@charset "UTF-8";@keyframes plyr-progress{to{background-position:25px 0;background-position:var(--plyr-progress-loading-size,25px) 0}}@keyframes plyr-popup{0%{opacity:.5;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes plyr-fade-in{0%{opacity:0}to{opacity:1}}.plyr{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;align-items:center;direction:ltr;display:flex;flex-direction:column;font-family:inherit;font-family:var(--plyr-font-family,inherit);font-variant-numeric:tabular-nums;font-weight:400;font-weight:var(--plyr-font-weight-regular,400);line-height:1.7;line-height:var(--plyr-line-height,1.7);max-width:100%;min-width:200px;position:relative;text-shadow:none;transition:box-shadow .3s ease;z-index:0}.plyr audio,.plyr iframe,.plyr video{display:block;height:100%;width:100%}.plyr button{font:inherit;line-height:inherit;width:auto}.plyr:focus{outline:0}.plyr--full-ui{box-sizing:border-box}.plyr--full-ui *,.plyr--full-ui :after,.plyr--full-ui :before{box-sizing:inherit}.plyr--full-ui a,.plyr--full-ui button,.plyr--full-ui input,.plyr--full-ui label{touch-action:manipulation}.plyr__badge{background:#4a5464;background:var(--plyr-badge-background,#4a5464);border-radius:2px;border-radius:var(--plyr-badge-border-radius,2px);color:#fff;color:var(--plyr-badge-text-color,#fff);font-size:9px;font-size:var(--plyr-font-size-badge,9px);line-height:1;padding:3px 4px}.plyr--full-ui ::-webkit-media-text-track-container{display:none}.plyr__captions{animation:plyr-fade-in .3s ease;bottom:0;display:none;font-size:13px;font-size:var(--plyr-font-size-small,13px);left:0;padding:10px;padding:var(--plyr-control-spacing,10px);position:absolute;text-align:center;transition:transform .4s ease-in-out;width:100%}.plyr__captions span:empty{display:none}@media (min-width:480px){.plyr__captions{font-size:15px;font-size:var(--plyr-font-size-base,15px);padding:20px;padding:calc(var(--plyr-control-spacing, 10px)*2)}}@media (min-width:768px){.plyr__captions{font-size:18px;font-size:var(--plyr-font-size-large,18px)}}.plyr--captions-active .plyr__captions{display:block}.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty)~.plyr__captions{transform:translateY(-40px);transform:translateY(calc(var(--plyr-control-spacing, 10px)*-4))}.plyr__caption{background:#000c;background:var(--plyr-captions-background,#000c);border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone;color:#fff;color:var(--plyr-captions-text-color,#fff);line-height:185%;padding:.2em .5em;white-space:pre-wrap}.plyr__caption div{display:inline}.plyr__control{background:#0000;border:0;border-radius:4px;border-radius:var(--plyr-control-radius,4px);color:inherit;cursor:pointer;flex-shrink:0;overflow:visible;padding:7px;padding:calc(var(--plyr-control-spacing, 10px)*.7);position:relative;transition:all .1s ease-in-out}.plyr__control svg{display:block;fill:currentColor;height:18px;height:var(--plyr-control-icon-size,18px);pointer-events:none;width:18px;width:var(--plyr-control-icon-size,18px)}.plyr__control:focus{outline:0}.plyr__control:focus-visible{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}a.plyr__control{text-decoration:none}.plyr__control.plyr__control--pressed .icon--not-pressed,.plyr__control.plyr__control--pressed .label--not-pressed,.plyr__control:not(.plyr__control--pressed) .icon--pressed,.plyr__control:not(.plyr__control--pressed) .label--pressed,a.plyr__control:after,a.plyr__control:before{display:none}.plyr--full-ui ::-webkit-media-controls{display:none}.plyr__controls{align-items:center;display:flex;justify-content:flex-end;text-align:center}.plyr__controls .plyr__progress__container{flex:1;min-width:0}.plyr__controls .plyr__controls__item{margin-left:2.5px;margin-left:calc(var(--plyr-control-spacing, 10px)/4)}.plyr__controls .plyr__controls__item:first-child{margin-left:0;margin-right:auto}.plyr__controls .plyr__controls__item.plyr__progress__container{padding-left:2.5px;padding-left:calc(var(--plyr-control-spacing, 10px)/4)}.plyr__controls .plyr__controls__item.plyr__time{padding:0 5px;padding:0 calc(var(--plyr-control-spacing, 10px)/2)}.plyr__controls .plyr__controls__item.plyr__progress__container:first-child,.plyr__controls .plyr__controls__item.plyr__time+.plyr__time,.plyr__controls .plyr__controls__item.plyr__time:first-child{padding-left:0}.plyr [data-plyr=airplay],.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen],.plyr [data-plyr=pip],.plyr__controls:empty{display:none}.plyr--airplay-supported [data-plyr=airplay],.plyr--captions-enabled [data-plyr=captions],.plyr--fullscreen-enabled [data-plyr=fullscreen],.plyr--pip-supported [data-plyr=pip]{display:inline-block}.plyr__menu{display:flex;position:relative}.plyr__menu .plyr__control svg{transition:transform .3s ease}.plyr__menu .plyr__control[aria-expanded=true] svg{transform:rotate(90deg)}.plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip{display:none}.plyr__menu__container{animation:plyr-popup .2s ease;background:#ffffffe6;background:var(--plyr-menu-background,#ffffffe6);border-radius:8px;border-radius:var(--plyr-menu-radius,8px);bottom:100%;box-shadow:0 1px 2px #00000026;box-shadow:var(--plyr-menu-shadow,0 1px 2px #00000026);color:#4a5464;color:var(--plyr-menu-color,#4a5464);font-size:15px;font-size:var(--plyr-font-size-base,15px);margin-bottom:10px;position:absolute;right:-3px;text-align:left;white-space:nowrap;z-index:3}.plyr__menu__container>div{overflow:hidden;transition:height .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1)}.plyr__menu__container:after{border:4px solid #0000;border-top-color:#ffffffe6;border:var(--plyr-menu-arrow-size,4px) solid #0000;border-top-color:var(--plyr-menu-background,#ffffffe6);content:"";height:0;position:absolute;right:14px;right:calc(var(--plyr-control-icon-size, 18px)/2 + var(--plyr-control-spacing, 10px)*.7 - var(--plyr-menu-arrow-size, 4px)/2);top:100%;width:0}.plyr__menu__container [role=menu]{padding:7px;padding:calc(var(--plyr-control-spacing, 10px)*.7)}.plyr__menu__container [role=menuitem],.plyr__menu__container [role=menuitemradio]{margin-top:2px}.plyr__menu__container [role=menuitem]:first-child,.plyr__menu__container [role=menuitemradio]:first-child{margin-top:0}.plyr__menu__container .plyr__control{align-items:center;color:#4a5464;color:var(--plyr-menu-color,#4a5464);display:flex;font-size:13px;font-size:var(--plyr-font-size-menu,var(--plyr-font-size-small,13px));padding:4.66667px 10.5px;padding:calc(var(--plyr-control-spacing, 10px)*.7/1.5) calc(var(--plyr-control-spacing, 10px)*.7*1.5);-webkit-user-select:none;user-select:none;width:100%}.plyr__menu__container .plyr__control>span{align-items:inherit;display:flex;width:100%}.plyr__menu__container .plyr__control:after{border:4px solid #0000;border:var(--plyr-menu-item-arrow-size,4px) solid #0000;content:"";position:absolute;top:50%;transform:translateY(-50%)}.plyr__menu__container .plyr__control--forward{padding-right:28px;padding-right:calc(var(--plyr-control-spacing, 10px)*.7*4)}.plyr__menu__container .plyr__control--forward:after{border-left-color:#728197;border-left-color:var(--plyr-menu-arrow-color,#728197);right:6.5px;right:calc(var(--plyr-control-spacing, 10px)*.7*1.5 - var(--plyr-menu-item-arrow-size, 4px))}.plyr__menu__container .plyr__control--forward:focus-visible:after,.plyr__menu__container .plyr__control--forward:hover:after{border-left-color:initial}.plyr__menu__container .plyr__control--back{font-weight:400;font-weight:var(--plyr-font-weight-regular,400);margin:7px;margin:calc(var(--plyr-control-spacing, 10px)*.7);margin-bottom:3.5px;margin-bottom:calc(var(--plyr-control-spacing, 10px)*.7/2);padding-left:28px;padding-left:calc(var(--plyr-control-spacing, 10px)*.7*4);position:relative;width:calc(100% - 14px);width:calc(100% - var(--plyr-control-spacing, 10px)*.7*2)}.plyr__menu__container .plyr__control--back:after{border-right-color:#728197;border-right-color:var(--plyr-menu-arrow-color,#728197);left:6.5px;left:calc(var(--plyr-control-spacing, 10px)*.7*1.5 - var(--plyr-menu-item-arrow-size, 4px))}.plyr__menu__container .plyr__control--back:before{background:#dcdfe5;background:var(--plyr-menu-back-border-color,#dcdfe5);box-shadow:0 1px 0 #fff;box-shadow:0 1px 0 var(--plyr-menu-back-border-shadow-color,#fff);content:"";height:1px;left:0;margin-top:3.5px;margin-top:calc(var(--plyr-control-spacing, 10px)*.7/2);overflow:hidden;position:absolute;right:0;top:100%}.plyr__menu__container .plyr__control--back:focus-visible:after,.plyr__menu__container .plyr__control--back:hover:after{border-right-color:initial}.plyr__menu__container .plyr__control[role=menuitemradio]{padding-left:7px;padding-left:calc(var(--plyr-control-spacing, 10px)*.7)}.plyr__menu__container .plyr__control[role=menuitemradio]:after,.plyr__menu__container .plyr__control[role=menuitemradio]:before{border-radius:100%}.plyr__menu__container .plyr__control[role=menuitemradio]:before{background:#0000001a;content:"";display:block;flex-shrink:0;height:16px;margin-right:10px;margin-right:var(--plyr-control-spacing,10px);transition:all .3s ease;width:16px}.plyr__menu__container .plyr__control[role=menuitemradio]:after{background:#fff;border:0;height:6px;left:12px;opacity:0;top:50%;transform:translateY(-50%) scale(0);transition:transform .3s ease,opacity .3s ease;width:6px}.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:before{background:#00b2ff;background:var(--plyr-control-toggle-checked-background,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)))}.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:after{opacity:1;transform:translateY(-50%) scale(1)}.plyr__menu__container .plyr__control[role=menuitemradio]:focus-visible:before,.plyr__menu__container .plyr__control[role=menuitemradio]:hover:before{background:#23282f1a}.plyr__menu__container .plyr__menu__value{align-items:center;display:flex;margin-left:auto;margin-right:-5px;margin-right:calc(var(--plyr-control-spacing, 10px)*.7*-1 - -2px);overflow:hidden;padding-left:24.5px;padding-left:calc(var(--plyr-control-spacing, 10px)*.7*3.5);pointer-events:none}.plyr--full-ui input[type=range]{appearance:none;background:#0000;border:0;border-radius:26px;border-radius:calc(var(--plyr-range-thumb-height, 13px)*2);color:#00b2ff;color:var(--plyr-range-fill-background,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));display:block;height:19px;height:calc(var(--plyr-range-thumb-active-shadow-width, 3px)*2 + var(--plyr-range-thumb-height, 13px));margin:0;min-width:0;padding:0;transition:box-shadow .3s ease;width:100%}.plyr--full-ui input[type=range]::-webkit-slider-runnable-track{background:#0000;background-image:linear-gradient(90deg,currentColor 0,#0000 0);background-image:linear-gradient(to right,currentColor var(--value,0),#0000 var(--value,0));border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-webkit-transition:box-shadow .3s ease;transition:box-shadow .3s ease;-webkit-user-select:none;user-select:none}.plyr--full-ui input[type=range]::-webkit-slider-thumb{appearance:none;background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);height:13px;height:var(--plyr-range-thumb-height,13px);margin-top:-4px;margin-top:calc((var(--plyr-range-thumb-height, 13px) - var(--plyr-range-track-height, 5px))/2*-1);position:relative;-webkit-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)}.plyr--full-ui input[type=range]::-moz-range-track{background:#0000;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-moz-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}.plyr--full-ui input[type=range]::-moz-range-thumb{background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);height:13px;height:var(--plyr-range-thumb-height,13px);position:relative;-moz-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)}.plyr--full-ui input[type=range]::-moz-range-progress{background:currentColor;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px)}.plyr--full-ui input[type=range]::-ms-track{color:#0000}.plyr--full-ui input[type=range]::-ms-fill-upper,.plyr--full-ui input[type=range]::-ms-track{background:#0000;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-ms-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}.plyr--full-ui input[type=range]::-ms-fill-lower{background:#0000;background:currentColor;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-ms-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}.plyr--full-ui input[type=range]::-ms-thumb{background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);height:13px;height:var(--plyr-range-thumb-height,13px);margin-top:0;position:relative;-ms-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)}.plyr--full-ui input[type=range]::-ms-tooltip{display:none}.plyr--full-ui input[type=range]::-moz-focus-outer{border:0}.plyr--full-ui input[type=range]:focus{outline:0}.plyr--full-ui input[type=range]:focus-visible::-webkit-slider-runnable-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}.plyr--full-ui input[type=range]:focus-visible::-moz-range-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}.plyr--full-ui input[type=range]:focus-visible::-ms-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}.plyr__poster{background-color:#000;background-color:var(--plyr-video-background,var(--plyr-video-background,#000));background-position:50% 50%;background-repeat:no-repeat;background-size:contain;height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .2s ease;width:100%;z-index:1}.plyr--stopped.plyr__poster-enabled .plyr__poster{opacity:1}.plyr--youtube.plyr--paused.plyr__poster-enabled:not(.plyr--stopped) .plyr__poster{display:none}.plyr__time{font-size:13px;font-size:var(--plyr-font-size-time,var(--plyr-font-size-small,13px))}.plyr__time+.plyr__time:before{content:"⁄";margin-right:10px;margin-right:var(--plyr-control-spacing,10px)}@media (max-width:767px){.plyr__time+.plyr__time{display:none}}.plyr__tooltip{background:#fff;background:var(--plyr-tooltip-background,#fff);border-radius:5px;border-radius:var(--plyr-tooltip-radius,5px);bottom:100%;box-shadow:0 1px 2px #00000026;box-shadow:var(--plyr-tooltip-shadow,0 1px 2px #00000026);color:#4a5464;color:var(--plyr-tooltip-color,#4a5464);font-size:13px;font-size:var(--plyr-font-size-small,13px);font-weight:400;font-weight:var(--plyr-font-weight-regular,400);left:50%;line-height:1.3;margin-bottom:10px;margin-bottom:calc(var(--plyr-control-spacing, 10px)/2*2);opacity:0;padding:5px 7.5px;padding:calc(var(--plyr-control-spacing, 10px)/2) calc(var(--plyr-control-spacing, 10px)/2*1.5);pointer-events:none;position:absolute;transform:translate(-50%,10px) scale(.8);transform-origin:50% 100%;transition:transform .2s ease .1s,opacity .2s ease .1s;white-space:nowrap;z-index:2}.plyr__tooltip:before{border-left:4px solid #0000;border-left:var(--plyr-tooltip-arrow-size,4px) solid #0000;border-right:4px solid #0000;border-right:var(--plyr-tooltip-arrow-size,4px) solid #0000;border-top:4px solid #fff;border-top:var(--plyr-tooltip-arrow-size,4px) solid var(--plyr-tooltip-background,#fff);bottom:-4px;bottom:calc(var(--plyr-tooltip-arrow-size, 4px)*-1);content:"";height:0;left:50%;position:absolute;transform:translateX(-50%);width:0;z-index:2}.plyr .plyr__control:focus-visible .plyr__tooltip,.plyr .plyr__control:hover .plyr__tooltip,.plyr__tooltip--visible{opacity:1;transform:translate(-50%) scale(1)}.plyr .plyr__control:hover .plyr__tooltip{z-index:3}.plyr__controls>.plyr__control:first-child .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip{left:0;transform:translateY(10px) scale(.8);transform-origin:0 100%}.plyr__controls>.plyr__control:first-child .plyr__tooltip:before,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip:before{left:16px;left:calc(var(--plyr-control-icon-size, 18px)/2 + var(--plyr-control-spacing, 10px)*.7)}.plyr__controls>.plyr__control:last-child .plyr__tooltip{left:auto;right:0;transform:translateY(10px) scale(.8);transform-origin:100% 100%}.plyr__controls>.plyr__control:last-child .plyr__tooltip:before{left:auto;right:16px;right:calc(var(--plyr-control-icon-size, 18px)/2 + var(--plyr-control-spacing, 10px)*.7);transform:translateX(50%)}.plyr__controls>.plyr__control:first-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control:focus-visible .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control:hover .plyr__tooltip,.plyr__controls>.plyr__control:first-child:focus-visible .plyr__tooltip,.plyr__controls>.plyr__control:first-child:hover .plyr__tooltip,.plyr__controls>.plyr__control:last-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:last-child:focus-visible .plyr__tooltip,.plyr__controls>.plyr__control:last-child:hover .plyr__tooltip{transform:translate(0) scale(1)}.plyr__progress{left:6.5px;left:calc(var(--plyr-range-thumb-height, 13px)*.5);margin-right:13px;margin-right:var(--plyr-range-thumb-height,13px);position:relative}.plyr__progress input[type=range],.plyr__progress__buffer{margin-left:-6.5px;margin-left:calc(var(--plyr-range-thumb-height, 13px)*-.5);margin-right:-6.5px;margin-right:calc(var(--plyr-range-thumb-height, 13px)*-.5);width:calc(100% + 13px);width:calc(100% + var(--plyr-range-thumb-height, 13px))}.plyr__progress input[type=range]{position:relative;z-index:2}.plyr__progress .plyr__tooltip{left:0;max-width:120px;overflow-wrap:break-word}.plyr__progress__buffer{-webkit-appearance:none;background:#0000;border:0;border-radius:100px;height:5px;height:var(--plyr-range-track-height,5px);left:0;margin-top:-2.5px;margin-top:calc(var(--plyr-range-track-height, 5px)/2*-1);padding:0;position:absolute;top:50%}.plyr__progress__buffer::-webkit-progress-bar{background:#0000}.plyr__progress__buffer::-webkit-progress-value{background:currentColor;border-radius:100px;min-width:5px;min-width:var(--plyr-range-track-height,5px);-webkit-transition:width .2s ease;transition:width .2s ease}.plyr__progress__buffer::-moz-progress-bar{background:currentColor;border-radius:100px;min-width:5px;min-width:var(--plyr-range-track-height,5px);-moz-transition:width .2s ease;transition:width .2s ease}.plyr__progress__buffer::-ms-fill{border-radius:100px;-ms-transition:width .2s ease;transition:width .2s ease}.plyr--loading .plyr__progress__buffer{animation:plyr-progress 1s linear infinite;background-image:linear-gradient(-45deg,#23282f99 25%,#0000 0,#0000 50%,#23282f99 0,#23282f99 75%,#0000 0,#0000);background-image:linear-gradient(-45deg,var(--plyr-progress-loading-background,#23282f99) 25%,#0000 25%,#0000 50%,var(--plyr-progress-loading-background,#23282f99) 50%,var(--plyr-progress-loading-background,#23282f99) 75%,#0000 75%,#0000);background-repeat:repeat-x;background-size:25px 25px;background-size:var(--plyr-progress-loading-size,25px) var(--plyr-progress-loading-size,25px);color:#0000}.plyr--video.plyr--loading .plyr__progress__buffer{background-color:#ffffff40;background-color:var(--plyr-video-progress-buffered-background,#ffffff40)}.plyr--audio.plyr--loading .plyr__progress__buffer{background-color:#c1c8d199;background-color:var(--plyr-audio-progress-buffered-background,#c1c8d199)}.plyr__progress__marker{background-color:#fff;background-color:var(--plyr-progress-marker-background,#fff);border-radius:1px;height:5px;height:var(--plyr-range-track-height,5px);position:absolute;top:50%;transform:translate(-50%,-50%);width:3px;width:var(--plyr-progress-marker-width,3px);z-index:3}.plyr__volume{align-items:center;display:flex;position:relative}.plyr__volume input[type=range]{margin-left:5px;margin-left:calc(var(--plyr-control-spacing, 10px)/2);margin-right:5px;margin-right:calc(var(--plyr-control-spacing, 10px)/2);max-width:90px;min-width:60px;position:relative;z-index:2}.plyr--audio{display:block}.plyr--audio .plyr__controls{background:#fff;background:var(--plyr-audio-controls-background,#fff);border-radius:inherit;color:#4a5464;color:var(--plyr-audio-control-color,#4a5464);padding:10px;padding:var(--plyr-control-spacing,10px)}.plyr--audio .plyr__control:focus-visible,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true]{background:#00b2ff;background:var(--plyr-audio-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));color:#fff;color:var(--plyr-audio-control-color-hover,#fff)}.plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))}.plyr--full-ui.plyr--audio input[type=range]::-moz-range-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))}.plyr--full-ui.plyr--audio input[type=range]::-ms-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))}.plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)}.plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)}.plyr--full-ui.plyr--audio input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)}.plyr--audio .plyr__progress__buffer{color:#c1c8d199;color:var(--plyr-audio-progress-buffered-background,#c1c8d199)}.plyr--video{overflow:hidden}.plyr--video.plyr--menu-open{overflow:visible}.plyr__video-wrapper{background:#000;background:var(--plyr-video-background,var(--plyr-video-background,#000));border-radius:inherit;height:100%;margin:auto;overflow:hidden;position:relative;width:100%}.plyr__video-embed,.plyr__video-wrapper--fixed-ratio{aspect-ratio:16/9}@supports not (aspect-ratio:16/9){.plyr__video-embed,.plyr__video-wrapper--fixed-ratio{height:0;padding-bottom:56.25%;position:relative}}.plyr__video-embed iframe,.plyr__video-wrapper--fixed-ratio video{border:0;height:100%;left:0;position:absolute;top:0;width:100%}.plyr--full-ui .plyr__video-embed>.plyr__video-embed__container{padding-bottom:240%;position:relative;transform:translateY(-38.28125%)}.plyr--video .plyr__controls{background:linear-gradient(#0000,#000000bf);background:var(--plyr-video-controls-background,linear-gradient(#0000,#000000bf));border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;bottom:0;color:#fff;color:var(--plyr-video-control-color,#fff);left:0;padding:5px;padding:calc(var(--plyr-control-spacing, 10px)/2);padding-top:20px;padding-top:calc(var(--plyr-control-spacing, 10px)*2);position:absolute;right:0;transition:opacity .4s ease-in-out,transform .4s ease-in-out;z-index:3}@media (min-width:480px){.plyr--video .plyr__controls{padding:10px;padding:var(--plyr-control-spacing,10px);padding-top:35px;padding-top:calc(var(--plyr-control-spacing, 10px)*3.5)}}.plyr--video.plyr--hide-controls .plyr__controls{opacity:0;pointer-events:none;transform:translateY(100%)}.plyr--video .plyr__control:focus-visible,.plyr--video .plyr__control:hover,.plyr--video .plyr__control[aria-expanded=true]{background:#00b2ff;background:var(--plyr-video-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));color:#fff;color:var(--plyr-video-control-color-hover,#fff)}.plyr__control--overlaid{background:#00b2ff;background:var(--plyr-video-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));border:0;border-radius:100%;color:#fff;color:var(--plyr-video-control-color,#fff);display:none;left:50%;opacity:.9;padding:15px;padding:calc(var(--plyr-control-spacing, 10px)*1.5);position:absolute;top:50%;transform:translate(-50%,-50%);transition:.3s;z-index:2}.plyr__control--overlaid svg{left:2px;position:relative}.plyr__control--overlaid:focus,.plyr__control--overlaid:hover{opacity:1}.plyr--playing .plyr__control--overlaid{opacity:0;visibility:hidden}.plyr--full-ui.plyr--video .plyr__control--overlaid{display:block}.plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))}.plyr--full-ui.plyr--video input[type=range]::-moz-range-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))}.plyr--full-ui.plyr--video input[type=range]::-ms-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))}.plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)}.plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)}.plyr--full-ui.plyr--video input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)}.plyr--video .plyr__progress__buffer{color:#ffffff40;color:var(--plyr-video-progress-buffered-background,#ffffff40)}.plyr:fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:fullscreen video{height:100%}.plyr:fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:fullscreen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:fullscreen .plyr__captions{font-size:21px;font-size:var(--plyr-font-size-xlarge,21px)}}.plyr--fullscreen-fallback{background:#000;border-radius:0!important;height:100%;inset:0;margin:0;position:fixed;width:100%;z-index:10000000}.plyr--fullscreen-fallback video{height:100%}.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen{display:block}.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr--fullscreen-fallback.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr--fullscreen-fallback .plyr__captions{font-size:21px;font-size:var(--plyr-font-size-xlarge,21px)}}.plyr__ads{border-radius:inherit;cursor:pointer;inset:0;overflow:hidden;position:absolute;z-index:-1}.plyr__ads>div,.plyr__ads>div iframe{height:100%;position:absolute;width:100%}.plyr__ads:after{background:#23282f;border-radius:2px;bottom:10px;bottom:var(--plyr-control-spacing,10px);color:#fff;content:attr(data-badge-text);font-size:11px;padding:2px 6px;pointer-events:none;position:absolute;right:10px;right:var(--plyr-control-spacing,10px);z-index:3}.plyr__ads:empty:after{display:none}.plyr__cues{background:currentColor;display:block;height:5px;height:var(--plyr-range-track-height,5px);left:0;opacity:.8;position:absolute;top:50%;transform:translateY(-50%);width:3px;z-index:3}.plyr__preview-thumb{background-color:#fff;background-color:var(--plyr-tooltip-background,#fff);border-radius:8px;border-radius:var(--plyr-menu-radius,8px);bottom:100%;box-shadow:0 1px 2px #00000026;box-shadow:var(--plyr-tooltip-shadow,0 1px 2px #00000026);margin-bottom:10px;margin-bottom:calc(var(--plyr-control-spacing, 10px)/2*2);opacity:0;padding:3px;pointer-events:none;position:absolute;transform:translateY(10px) scale(.8);transform-origin:50% 100%;transition:transform .2s ease .1s,opacity .2s ease .1s;z-index:2}.plyr__preview-thumb--is-shown{opacity:1;transform:translate(0) scale(1)}.plyr__preview-thumb:before{border-left:4px solid #0000;border-left:var(--plyr-tooltip-arrow-size,4px) solid #0000;border-right:4px solid #0000;border-right:var(--plyr-tooltip-arrow-size,4px) solid #0000;border-top:4px solid #fff;border-top:var(--plyr-tooltip-arrow-size,4px) solid var(--plyr-tooltip-background,#fff);bottom:-4px;bottom:calc(var(--plyr-tooltip-arrow-size, 4px)*-1);content:"";height:0;left:calc(50% + var(--preview-arrow-offset));position:absolute;transform:translateX(-50%);width:0;z-index:2}.plyr__preview-thumb__image-container{background:#c1c8d1;border-radius:7px;border-radius:calc(var(--plyr-menu-radius, 8px) - 1px);overflow:hidden;position:relative;z-index:0}.plyr__preview-thumb__image-container img,.plyr__preview-thumb__image-container:after{height:100%;left:0;position:absolute;top:0;width:100%}.plyr__preview-thumb__image-container:after{border-radius:inherit;box-shadow:inset 0 0 0 1px #00000026;content:"";pointer-events:none}.plyr__preview-thumb__image-container img{max-height:none;max-width:none}.plyr__preview-thumb__time-container{background:linear-gradient(#0000,#000000bf);background:var(--plyr-video-controls-background,linear-gradient(#0000,#000000bf));border-bottom-left-radius:7px;border-bottom-left-radius:calc(var(--plyr-menu-radius, 8px) - 1px);border-bottom-right-radius:7px;border-bottom-right-radius:calc(var(--plyr-menu-radius, 8px) - 1px);bottom:0;left:0;line-height:1.1;padding:20px 6px 6px;position:absolute;right:0;z-index:3}.plyr__preview-thumb__time-container span{color:#fff;font-size:13px;font-size:var(--plyr-font-size-time,var(--plyr-font-size-small,13px))}.plyr__preview-scrubbing{filter:blur(1px);height:100%;inset:0;margin:auto;opacity:0;overflow:hidden;pointer-events:none;position:absolute;transition:opacity .3s ease;width:100%;z-index:1}.plyr__preview-scrubbing--is-shown{opacity:1}.plyr__preview-scrubbing img{height:100%;left:0;max-height:none;max-width:none;object-fit:contain;position:absolute;top:0;width:100%}.plyr--no-transition{transition:none!important}.plyr__sr-only{clip:rect(1px,1px,1px,1px);border:0!important;height:1px!important;overflow:hidden;padding:0!important;position:absolute!important;width:1px!important}.plyr [hidden]{display:none!important}
/*!
 * Bootstrap v4.1.3 (https://getbootstrap.com/)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#007bff;--secondary:#6c757d;--success:#28a745;--info:#17a2b8;--warning:#ffc107;--danger:#dc3545;--light:#f8f9fa;--dark:#343a40;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}@-ms-viewport{width:device-width}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}dfn{font-style:italic}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent;-webkit-text-decoration-skip:objects}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto;-ms-overflow-style:scrollbar}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-bottom:.5rem;font-family:inherit;font-weight:500;line-height:1.2;color:inherit}.h1,h1{font-size:2.5rem}.h2,h2{font-size:2rem}.h3,h3{font-size:1.75rem}.h4,h4{font-size:1.5rem}.h5,h5{font-size:1.25rem}.h6,h6{font-size:1rem}.lead{font-size:1.25rem;font-weight:300}.display-1{font-size:6rem;font-weight:300;line-height:1.2}.display-2{font-size:5.5rem;font-weight:300;line-height:1.2}.display-3{font-size:4.5rem;font-weight:300;line-height:1.2}.display-4{font-size:3.5rem;font-weight:300;line-height:1.2}hr{margin-top:1rem;margin-bottom:1rem;border:0;border-top:1px solid rgba(0,0,0,.1)}.small,small{font-size:80%;font-weight:400}.mark,mark{padding:.2em;background-color:#fcf8e3}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;list-style:none}.list-inline-item{display:inline-block}.list-inline-item:not(:last-child){margin-right:.5rem}.initialism{font-size:90%;text-transform:uppercase}.blockquote{margin-bottom:1rem;font-size:1.25rem}.blockquote-footer{display:block;font-size:80%;color:#6c757d}.blockquote-footer::before{content:"\2014 \00A0"}.img-fluid{max-width:100%;height:auto}.img-thumbnail{padding:.25rem;background-color:#fff;border:1px solid #dee2e6;border-radius:.25rem;max-width:100%;height:auto}.figure{display:inline-block}.figure-img{margin-bottom:.5rem;line-height:1}.figure-caption{font-size:90%;color:#6c757d}code{font-size:87.5%;color:#e83e8c;word-break:break-word}a>code{color:inherit}kbd{padding:.2rem .4rem;font-size:87.5%;color:#fff;background-color:#212529;border-radius:.2rem}kbd kbd{padding:0;font-size:100%;font-weight:700}pre{display:block;font-size:87.5%;color:#212529}pre code{font-size:inherit;color:inherit;word-break:normal}.pre-scrollable{max-height:340px;overflow-y:scroll}.container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}}.container-fluid{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.no-gutters{margin-right:0;margin-left:0}.no-gutters>.col,.no-gutters>[class*=col-]{padding-right:0;padding-left:0}.col,.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-auto,.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-auto,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-auto,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-auto,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-auto{position:relative;width:100%;min-height:1px;padding-right:15px;padding-left:15px}.col{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.col-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-first{-ms-flex-order:-1;order:-1}.order-last{-ms-flex-order:13;order:13}.order-0{-ms-flex-order:0;order:0}.order-1{-ms-flex-order:1;order:1}.order-2{-ms-flex-order:2;order:2}.order-3{-ms-flex-order:3;order:3}.order-4{-ms-flex-order:4;order:4}.order-5{-ms-flex-order:5;order:5}.order-6{-ms-flex-order:6;order:6}.order-7{-ms-flex-order:7;order:7}.order-8{-ms-flex-order:8;order:8}.order-9{-ms-flex-order:9;order:9}.order-10{-ms-flex-order:10;order:10}.order-11{-ms-flex-order:11;order:11}.order-12{-ms-flex-order:12;order:12}.offset-1{margin-left:8.333333%}.offset-2{margin-left:16.666667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.333333%}.offset-5{margin-left:41.666667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.333333%}.offset-8{margin-left:66.666667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.333333%}.offset-11{margin-left:91.666667%}@media (min-width:576px){.col-sm{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-sm-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.col-sm-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-sm-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-sm-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-sm-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-sm-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-sm-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-sm-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-sm-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-sm-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-sm-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-sm-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-sm-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-sm-first{-ms-flex-order:-1;order:-1}.order-sm-last{-ms-flex-order:13;order:13}.order-sm-0{-ms-flex-order:0;order:0}.order-sm-1{-ms-flex-order:1;order:1}.order-sm-2{-ms-flex-order:2;order:2}.order-sm-3{-ms-flex-order:3;order:3}.order-sm-4{-ms-flex-order:4;order:4}.order-sm-5{-ms-flex-order:5;order:5}.order-sm-6{-ms-flex-order:6;order:6}.order-sm-7{-ms-flex-order:7;order:7}.order-sm-8{-ms-flex-order:8;order:8}.order-sm-9{-ms-flex-order:9;order:9}.order-sm-10{-ms-flex-order:10;order:10}.order-sm-11{-ms-flex-order:11;order:11}.order-sm-12{-ms-flex-order:12;order:12}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.333333%}.offset-sm-2{margin-left:16.666667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.333333%}.offset-sm-5{margin-left:41.666667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.333333%}.offset-sm-8{margin-left:66.666667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.333333%}.offset-sm-11{margin-left:91.666667%}}@media (min-width:768px){.col-md{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-md-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.col-md-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-md-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-md-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-md-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-md-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-md-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-md-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-md-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-md-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-md-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-md-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-md-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-md-first{-ms-flex-order:-1;order:-1}.order-md-last{-ms-flex-order:13;order:13}.order-md-0{-ms-flex-order:0;order:0}.order-md-1{-ms-flex-order:1;order:1}.order-md-2{-ms-flex-order:2;order:2}.order-md-3{-ms-flex-order:3;order:3}.order-md-4{-ms-flex-order:4;order:4}.order-md-5{-ms-flex-order:5;order:5}.order-md-6{-ms-flex-order:6;order:6}.order-md-7{-ms-flex-order:7;order:7}.order-md-8{-ms-flex-order:8;order:8}.order-md-9{-ms-flex-order:9;order:9}.order-md-10{-ms-flex-order:10;order:10}.order-md-11{-ms-flex-order:11;order:11}.order-md-12{-ms-flex-order:12;order:12}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.333333%}.offset-md-2{margin-left:16.666667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.333333%}.offset-md-5{margin-left:41.666667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.333333%}.offset-md-8{margin-left:66.666667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.333333%}.offset-md-11{margin-left:91.666667%}}@media (min-width:992px){.col-lg{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-lg-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.col-lg-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-lg-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-lg-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-lg-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-lg-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-lg-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-lg-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-lg-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-lg-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-lg-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-lg-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-lg-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-lg-first{-ms-flex-order:-1;order:-1}.order-lg-last{-ms-flex-order:13;order:13}.order-lg-0{-ms-flex-order:0;order:0}.order-lg-1{-ms-flex-order:1;order:1}.order-lg-2{-ms-flex-order:2;order:2}.order-lg-3{-ms-flex-order:3;order:3}.order-lg-4{-ms-flex-order:4;order:4}.order-lg-5{-ms-flex-order:5;order:5}.order-lg-6{-ms-flex-order:6;order:6}.order-lg-7{-ms-flex-order:7;order:7}.order-lg-8{-ms-flex-order:8;order:8}.order-lg-9{-ms-flex-order:9;order:9}.order-lg-10{-ms-flex-order:10;order:10}.order-lg-11{-ms-flex-order:11;order:11}.order-lg-12{-ms-flex-order:12;order:12}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.333333%}.offset-lg-2{margin-left:16.666667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.333333%}.offset-lg-5{margin-left:41.666667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.333333%}.offset-lg-8{margin-left:66.666667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.333333%}.offset-lg-11{margin-left:91.666667%}}@media (min-width:1200px){.col-xl{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-xl-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.col-xl-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-xl-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-xl-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-xl-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-xl-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-xl-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-xl-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-xl-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-xl-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-xl-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-xl-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-xl-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-xl-first{-ms-flex-order:-1;order:-1}.order-xl-last{-ms-flex-order:13;order:13}.order-xl-0{-ms-flex-order:0;order:0}.order-xl-1{-ms-flex-order:1;order:1}.order-xl-2{-ms-flex-order:2;order:2}.order-xl-3{-ms-flex-order:3;order:3}.order-xl-4{-ms-flex-order:4;order:4}.order-xl-5{-ms-flex-order:5;order:5}.order-xl-6{-ms-flex-order:6;order:6}.order-xl-7{-ms-flex-order:7;order:7}.order-xl-8{-ms-flex-order:8;order:8}.order-xl-9{-ms-flex-order:9;order:9}.order-xl-10{-ms-flex-order:10;order:10}.order-xl-11{-ms-flex-order:11;order:11}.order-xl-12{-ms-flex-order:12;order:12}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.333333%}.offset-xl-2{margin-left:16.666667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.333333%}.offset-xl-5{margin-left:41.666667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.333333%}.offset-xl-8{margin-left:66.666667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.333333%}.offset-xl-11{margin-left:91.666667%}}.table{width:100%;margin-bottom:1rem;background-color:transparent}.table td,.table th{padding:.75rem;vertical-align:top;border-top:1px solid #dee2e6}.table thead th{vertical-align:bottom;border-bottom:2px solid #dee2e6}.table tbody+tbody{border-top:2px solid #dee2e6}.table .table{background-color:#fff}.table-sm td,.table-sm th{padding:.3rem}.table-bordered{border:1px solid #dee2e6}.table-bordered td,.table-bordered th{border:1px solid #dee2e6}.table-bordered thead td,.table-bordered thead th{border-bottom-width:2px}.table-borderless tbody+tbody,.table-borderless td,.table-borderless th,.table-borderless thead th{border:0}.table-striped tbody tr:nth-of-type(odd){background-color:rgba(0,0,0,.05)}.table-hover tbody tr:hover{background-color:rgba(0,0,0,.075)}.table-primary,.table-primary>td,.table-primary>th{background-color:#b8daff}.table-hover .table-primary:hover{background-color:#9fcdff}.table-hover .table-primary:hover>td,.table-hover .table-primary:hover>th{background-color:#9fcdff}.table-secondary,.table-secondary>td,.table-secondary>th{background-color:#d6d8db}.table-hover .table-secondary:hover{background-color:#c8cbcf}.table-hover .table-secondary:hover>td,.table-hover .table-secondary:hover>th{background-color:#c8cbcf}.table-success,.table-success>td,.table-success>th{background-color:#c3e6cb}.table-hover .table-success:hover{background-color:#b1dfbb}.table-hover .table-success:hover>td,.table-hover .table-success:hover>th{background-color:#b1dfbb}.table-info,.table-info>td,.table-info>th{background-color:#bee5eb}.table-hover .table-info:hover{background-color:#abdde5}.table-hover .table-info:hover>td,.table-hover .table-info:hover>th{background-color:#abdde5}.table-warning,.table-warning>td,.table-warning>th{background-color:#ffeeba}.table-hover .table-warning:hover{background-color:#ffe8a1}.table-hover .table-warning:hover>td,.table-hover .table-warning:hover>th{background-color:#ffe8a1}.table-danger,.table-danger>td,.table-danger>th{background-color:#f5c6cb}.table-hover .table-danger:hover{background-color:#f1b0b7}.table-hover .table-danger:hover>td,.table-hover .table-danger:hover>th{background-color:#f1b0b7}.table-light,.table-light>td,.table-light>th{background-color:#fdfdfe}.table-hover .table-light:hover{background-color:#ececf6}.table-hover .table-light:hover>td,.table-hover .table-light:hover>th{background-color:#ececf6}.table-dark,.table-dark>td,.table-dark>th{background-color:#c6c8ca}.table-hover .table-dark:hover{background-color:#b9bbbe}.table-hover .table-dark:hover>td,.table-hover .table-dark:hover>th{background-color:#b9bbbe}.table-active,.table-active>td,.table-active>th{background-color:rgba(0,0,0,.075)}.table-hover .table-active:hover{background-color:rgba(0,0,0,.075)}.table-hover .table-active:hover>td,.table-hover .table-active:hover>th{background-color:rgba(0,0,0,.075)}.table .thead-dark th{color:#fff;background-color:#212529;border-color:#32383e}.table .thead-light th{color:#495057;background-color:#e9ecef;border-color:#dee2e6}.table-dark{color:#fff;background-color:#212529}.table-dark td,.table-dark th,.table-dark thead th{border-color:#32383e}.table-dark.table-bordered{border:0}.table-dark.table-striped tbody tr:nth-of-type(odd){background-color:rgba(255,255,255,.05)}.table-dark.table-hover tbody tr:hover{background-color:rgba(255,255,255,.075)}@media (max-width:575.98px){.table-responsive-sm{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.table-responsive-sm>.table-bordered{border:0}}@media (max-width:767.98px){.table-responsive-md{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.table-responsive-md>.table-bordered{border:0}}@media (max-width:991.98px){.table-responsive-lg{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.table-responsive-lg>.table-bordered{border:0}}@media (max-width:1199.98px){.table-responsive-xl{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.table-responsive-xl>.table-bordered{border:0}}.table-responsive{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.table-responsive>.table-bordered{border:0}.form-control{display:block;width:100%;height:calc(2.25rem + 2px);padding:.375rem .75rem;font-size:1rem;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media screen and (prefers-reduced-motion:reduce){.form-control{transition:none}}.form-control::-ms-expand{background-color:transparent;border:0}.form-control:focus{color:#495057;background-color:#fff;border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.form-control::-webkit-input-placeholder{color:#6c757d;opacity:1}.form-control::-moz-placeholder{color:#6c757d;opacity:1}.form-control:-ms-input-placeholder{color:#6c757d;opacity:1}.form-control::-ms-input-placeholder{color:#6c757d;opacity:1}.form-control::placeholder{color:#6c757d;opacity:1}.form-control:disabled,.form-control[readonly]{background-color:#e9ecef;opacity:1}select.form-control:focus::-ms-value{color:#495057;background-color:#fff}.form-control-file,.form-control-range{display:block;width:100%}.col-form-label{padding-top:calc(.375rem + 1px);padding-bottom:calc(.375rem + 1px);margin-bottom:0;font-size:inherit;line-height:1.5}.col-form-label-lg{padding-top:calc(.5rem + 1px);padding-bottom:calc(.5rem + 1px);font-size:1.25rem;line-height:1.5}.col-form-label-sm{padding-top:calc(.25rem + 1px);padding-bottom:calc(.25rem + 1px);font-size:.875rem;line-height:1.5}.form-control-plaintext{display:block;width:100%;padding-top:.375rem;padding-bottom:.375rem;margin-bottom:0;line-height:1.5;color:#212529;background-color:transparent;border:solid transparent;border-width:1px 0}.form-control-plaintext.form-control-lg,.form-control-plaintext.form-control-sm{padding-right:0;padding-left:0}.form-control-sm{height:calc(1.8125rem + 2px);padding:.25rem .5rem;font-size:.875rem;line-height:1.5;border-radius:.2rem}.form-control-lg{height:calc(2.875rem + 2px);padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}select.form-control[multiple],select.form-control[size]{height:auto}textarea.form-control{height:auto}.form-group{margin-bottom:1rem}.form-text{display:block;margin-top:.25rem}.form-row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-5px;margin-left:-5px}.form-row>.col,.form-row>[class*=col-]{padding-right:5px;padding-left:5px}.form-check{position:relative;display:block;padding-left:1.25rem}.form-check-input{position:absolute;margin-top:.3rem;margin-left:-1.25rem}.form-check-input:disabled~.form-check-label{color:#6c757d}.form-check-label{margin-bottom:0}.form-check-inline{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;padding-left:0;margin-right:.75rem}.form-check-inline .form-check-input{position:static;margin-top:0;margin-right:.3125rem;margin-left:0}.valid-feedback{display:none;width:100%;margin-top:.25rem;font-size:80%;color:#28a745}.valid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:.875rem;line-height:1.5;color:#fff;background-color:rgba(40,167,69,.9);border-radius:.25rem}.custom-select.is-valid,.form-control.is-valid,.was-validated .custom-select:valid,.was-validated .form-control:valid{border-color:#28a745}.custom-select.is-valid:focus,.form-control.is-valid:focus,.was-validated .custom-select:valid:focus,.was-validated .form-control:valid:focus{border-color:#28a745;box-shadow:0 0 0 .2rem rgba(40,167,69,.25)}.custom-select.is-valid~.valid-feedback,.custom-select.is-valid~.valid-tooltip,.form-control.is-valid~.valid-feedback,.form-control.is-valid~.valid-tooltip,.was-validated .custom-select:valid~.valid-feedback,.was-validated .custom-select:valid~.valid-tooltip,.was-validated .form-control:valid~.valid-feedback,.was-validated .form-control:valid~.valid-tooltip{display:block}.form-control-file.is-valid~.valid-feedback,.form-control-file.is-valid~.valid-tooltip,.was-validated .form-control-file:valid~.valid-feedback,.was-validated .form-control-file:valid~.valid-tooltip{display:block}.form-check-input.is-valid~.form-check-label,.was-validated .form-check-input:valid~.form-check-label{color:#28a745}.form-check-input.is-valid~.valid-feedback,.form-check-input.is-valid~.valid-tooltip,.was-validated .form-check-input:valid~.valid-feedback,.was-validated .form-check-input:valid~.valid-tooltip{display:block}.custom-control-input.is-valid~.custom-control-label,.was-validated .custom-control-input:valid~.custom-control-label{color:#28a745}.custom-control-input.is-valid~.custom-control-label::before,.was-validated .custom-control-input:valid~.custom-control-label::before{background-color:#71dd8a}.custom-control-input.is-valid~.valid-feedback,.custom-control-input.is-valid~.valid-tooltip,.was-validated .custom-control-input:valid~.valid-feedback,.was-validated .custom-control-input:valid~.valid-tooltip{display:block}.custom-control-input.is-valid:checked~.custom-control-label::before,.was-validated .custom-control-input:valid:checked~.custom-control-label::before{background-color:#34ce57}.custom-control-input.is-valid:focus~.custom-control-label::before,.was-validated .custom-control-input:valid:focus~.custom-control-label::before{box-shadow:0 0 0 1px #fff,0 0 0 .2rem rgba(40,167,69,.25)}.custom-file-input.is-valid~.custom-file-label,.was-validated .custom-file-input:valid~.custom-file-label{border-color:#28a745}.custom-file-input.is-valid~.custom-file-label::after,.was-validated .custom-file-input:valid~.custom-file-label::after{border-color:inherit}.custom-file-input.is-valid~.valid-feedback,.custom-file-input.is-valid~.valid-tooltip,.was-validated .custom-file-input:valid~.valid-feedback,.was-validated .custom-file-input:valid~.valid-tooltip{display:block}.custom-file-input.is-valid:focus~.custom-file-label,.was-validated .custom-file-input:valid:focus~.custom-file-label{box-shadow:0 0 0 .2rem rgba(40,167,69,.25)}.invalid-feedback{display:none;width:100%;margin-top:.25rem;font-size:80%;color:#dc3545}.invalid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:.875rem;line-height:1.5;color:#fff;background-color:rgba(220,53,69,.9);border-radius:.25rem}.custom-select.is-invalid,.form-control.is-invalid,.was-validated .custom-select:invalid,.was-validated .form-control:invalid{border-color:#dc3545}.custom-select.is-invalid:focus,.form-control.is-invalid:focus,.was-validated .custom-select:invalid:focus,.was-validated .form-control:invalid:focus{border-color:#dc3545;box-shadow:0 0 0 .2rem rgba(220,53,69,.25)}.custom-select.is-invalid~.invalid-feedback,.custom-select.is-invalid~.invalid-tooltip,.form-control.is-invalid~.invalid-feedback,.form-control.is-invalid~.invalid-tooltip,.was-validated .custom-select:invalid~.invalid-feedback,.was-validated .custom-select:invalid~.invalid-tooltip,.was-validated .form-control:invalid~.invalid-feedback,.was-validated .form-control:invalid~.invalid-tooltip{display:block}.form-control-file.is-invalid~.invalid-feedback,.form-control-file.is-invalid~.invalid-tooltip,.was-validated .form-control-file:invalid~.invalid-feedback,.was-validated .form-control-file:invalid~.invalid-tooltip{display:block}.form-check-input.is-invalid~.form-check-label,.was-validated .form-check-input:invalid~.form-check-label{color:#dc3545}.form-check-input.is-invalid~.invalid-feedback,.form-check-input.is-invalid~.invalid-tooltip,.was-validated .form-check-input:invalid~.invalid-feedback,.was-validated .form-check-input:invalid~.invalid-tooltip{display:block}.custom-control-input.is-invalid~.custom-control-label,.was-validated .custom-control-input:invalid~.custom-control-label{color:#dc3545}.custom-control-input.is-invalid~.custom-control-label::before,.was-validated .custom-control-input:invalid~.custom-control-label::before{background-color:#efa2a9}.custom-control-input.is-invalid~.invalid-feedback,.custom-control-input.is-invalid~.invalid-tooltip,.was-validated .custom-control-input:invalid~.invalid-feedback,.was-validated .custom-control-input:invalid~.invalid-tooltip{display:block}.custom-control-input.is-invalid:checked~.custom-control-label::before,.was-validated .custom-control-input:invalid:checked~.custom-control-label::before{background-color:#e4606d}.custom-control-input.is-invalid:focus~.custom-control-label::before,.was-validated .custom-control-input:invalid:focus~.custom-control-label::before{box-shadow:0 0 0 1px #fff,0 0 0 .2rem rgba(220,53,69,.25)}.custom-file-input.is-invalid~.custom-file-label,.was-validated .custom-file-input:invalid~.custom-file-label{border-color:#dc3545}.custom-file-input.is-invalid~.custom-file-label::after,.was-validated .custom-file-input:invalid~.custom-file-label::after{border-color:inherit}.custom-file-input.is-invalid~.invalid-feedback,.custom-file-input.is-invalid~.invalid-tooltip,.was-validated .custom-file-input:invalid~.invalid-feedback,.was-validated .custom-file-input:invalid~.invalid-tooltip{display:block}.custom-file-input.is-invalid:focus~.custom-file-label,.was-validated .custom-file-input:invalid:focus~.custom-file-label{box-shadow:0 0 0 .2rem rgba(220,53,69,.25)}.form-inline{display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-align:center;align-items:center}.form-inline .form-check{width:100%}@media (min-width:576px){.form-inline label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin-bottom:0}.form-inline .form-group{display:-ms-flexbox;display:flex;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-align:center;align-items:center;margin-bottom:0}.form-inline .form-control{display:inline-block;width:auto;vertical-align:middle}.form-inline .form-control-plaintext{display:inline-block}.form-inline .custom-select,.form-inline .input-group{width:auto}.form-inline .form-check{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:auto;padding-left:0}.form-inline .form-check-input{position:relative;margin-top:0;margin-right:.25rem;margin-left:0}.form-inline .custom-control{-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.form-inline .custom-control-label{margin-bottom:0}}.btn{display:inline-block;font-weight:400;text-align:center;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;padding:.375rem .75rem;font-size:1rem;line-height:1.5;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media screen and (prefers-reduced-motion:reduce){.btn{transition:none}}.btn:focus,.btn:hover{text-decoration:none}.btn.focus,.btn:focus{outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.btn.disabled,.btn:disabled{opacity:.65}.btn:not(:disabled):not(.disabled){cursor:pointer}a.btn.disabled,fieldset:disabled a.btn{pointer-events:none}.btn-primary{color:#fff;background-color:#007bff;border-color:#007bff}.btn-primary:hover{color:#fff;background-color:#0069d9;border-color:#0062cc}.btn-primary.focus,.btn-primary:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}.btn-primary.disabled,.btn-primary:disabled{color:#fff;background-color:#007bff;border-color:#007bff}.btn-primary:not(:disabled):not(.disabled).active,.btn-primary:not(:disabled):not(.disabled):active,.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#0062cc;border-color:#005cbf}.btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}.btn-secondary{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-secondary:hover{color:#fff;background-color:#5a6268;border-color:#545b62}.btn-secondary.focus,.btn-secondary:focus{box-shadow:0 0 0 .2rem rgba(108,117,125,.5)}.btn-secondary.disabled,.btn-secondary:disabled{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-secondary:not(:disabled):not(.disabled).active,.btn-secondary:not(:disabled):not(.disabled):active,.show>.btn-secondary.dropdown-toggle{color:#fff;background-color:#545b62;border-color:#4e555b}.btn-secondary:not(:disabled):not(.disabled).active:focus,.btn-secondary:not(:disabled):not(.disabled):active:focus,.show>.btn-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(108,117,125,.5)}.btn-success{color:#fff;background-color:#28a745;border-color:#28a745}.btn-success:hover{color:#fff;background-color:#218838;border-color:#1e7e34}.btn-success.focus,.btn-success:focus{box-shadow:0 0 0 .2rem rgba(40,167,69,.5)}.btn-success.disabled,.btn-success:disabled{color:#fff;background-color:#28a745;border-color:#28a745}.btn-success:not(:disabled):not(.disabled).active,.btn-success:not(:disabled):not(.disabled):active,.show>.btn-success.dropdown-toggle{color:#fff;background-color:#1e7e34;border-color:#1c7430}.btn-success:not(:disabled):not(.disabled).active:focus,.btn-success:not(:disabled):not(.disabled):active:focus,.show>.btn-success.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(40,167,69,.5)}.btn-info{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-info:hover{color:#fff;background-color:#138496;border-color:#117a8b}.btn-info.focus,.btn-info:focus{box-shadow:0 0 0 .2rem rgba(23,162,184,.5)}.btn-info.disabled,.btn-info:disabled{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-info:not(:disabled):not(.disabled).active,.btn-info:not(:disabled):not(.disabled):active,.show>.btn-info.dropdown-toggle{color:#fff;background-color:#117a8b;border-color:#10707f}.btn-info:not(:disabled):not(.disabled).active:focus,.btn-info:not(:disabled):not(.disabled):active:focus,.show>.btn-info.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(23,162,184,.5)}.btn-warning{color:#212529;background-color:#ffc107;border-color:#ffc107}.btn-warning:hover{color:#212529;background-color:#e0a800;border-color:#d39e00}.btn-warning.focus,.btn-warning:focus{box-shadow:0 0 0 .2rem rgba(255,193,7,.5)}.btn-warning.disabled,.btn-warning:disabled{color:#212529;background-color:#ffc107;border-color:#ffc107}.btn-warning:not(:disabled):not(.disabled).active,.btn-warning:not(:disabled):not(.disabled):active,.show>.btn-warning.dropdown-toggle{color:#212529;background-color:#d39e00;border-color:#c69500}.btn-warning:not(:disabled):not(.disabled).active:focus,.btn-warning:not(:disabled):not(.disabled):active:focus,.show>.btn-warning.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(255,193,7,.5)}.btn-danger{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-danger:hover{color:#fff;background-color:#c82333;border-color:#bd2130}.btn-danger.focus,.btn-danger:focus{box-shadow:0 0 0 .2rem rgba(220,53,69,.5)}.btn-danger.disabled,.btn-danger:disabled{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-danger:not(:disabled):not(.disabled).active,.btn-danger:not(:disabled):not(.disabled):active,.show>.btn-danger.dropdown-toggle{color:#fff;background-color:#bd2130;border-color:#b21f2d}.btn-danger:not(:disabled):not(.disabled).active:focus,.btn-danger:not(:disabled):not(.disabled):active:focus,.show>.btn-danger.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(220,53,69,.5)}.btn-light{color:#212529;background-color:#f8f9fa;border-color:#f8f9fa}.btn-light:hover{color:#212529;background-color:#e2e6ea;border-color:#dae0e5}.btn-light.focus,.btn-light:focus{box-shadow:0 0 0 .2rem rgba(248,249,250,.5)}.btn-light.disabled,.btn-light:disabled{color:#212529;background-color:#f8f9fa;border-color:#f8f9fa}.btn-light:not(:disabled):not(.disabled).active,.btn-light:not(:disabled):not(.disabled):active,.show>.btn-light.dropdown-toggle{color:#212529;background-color:#dae0e5;border-color:#d3d9df}.btn-light:not(:disabled):not(.disabled).active:focus,.btn-light:not(:disabled):not(.disabled):active:focus,.show>.btn-light.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(248,249,250,.5)}.btn-dark{color:#fff;background-color:#343a40;border-color:#343a40}.btn-dark:hover{color:#fff;background-color:#23272b;border-color:#1d2124}.btn-dark.focus,.btn-dark:focus{box-shadow:0 0 0 .2rem rgba(52,58,64,.5)}.btn-dark.disabled,.btn-dark:disabled{color:#fff;background-color:#343a40;border-color:#343a40}.btn-dark:not(:disabled):not(.disabled).active,.btn-dark:not(:disabled):not(.disabled):active,.show>.btn-dark.dropdown-toggle{color:#fff;background-color:#1d2124;border-color:#171a1d}.btn-dark:not(:disabled):not(.disabled).active:focus,.btn-dark:not(:disabled):not(.disabled):active:focus,.show>.btn-dark.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(52,58,64,.5)}.btn-outline-primary{color:#007bff;background-color:transparent;background-image:none;border-color:#007bff}.btn-outline-primary:hover{color:#fff;background-color:#007bff;border-color:#007bff}.btn-outline-primary.focus,.btn-outline-primary:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}.btn-outline-primary.disabled,.btn-outline-primary:disabled{color:#007bff;background-color:transparent}.btn-outline-primary:not(:disabled):not(.disabled).active,.btn-outline-primary:not(:disabled):not(.disabled):active,.show>.btn-outline-primary.dropdown-toggle{color:#fff;background-color:#007bff;border-color:#007bff}.btn-outline-primary:not(:disabled):not(.disabled).active:focus,.btn-outline-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}.btn-outline-secondary{color:#6c757d;background-color:transparent;background-image:none;border-color:#6c757d}.btn-outline-secondary:hover{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-outline-secondary.focus,.btn-outline-secondary:focus{box-shadow:0 0 0 .2rem rgba(108,117,125,.5)}.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{color:#6c757d;background-color:transparent}.btn-outline-secondary:not(:disabled):not(.disabled).active,.btn-outline-secondary:not(:disabled):not(.disabled):active,.show>.btn-outline-secondary.dropdown-toggle{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(108,117,125,.5)}.btn-outline-success{color:#28a745;background-color:transparent;background-image:none;border-color:#28a745}.btn-outline-success:hover{color:#fff;background-color:#28a745;border-color:#28a745}.btn-outline-success.focus,.btn-outline-success:focus{box-shadow:0 0 0 .2rem rgba(40,167,69,.5)}.btn-outline-success.disabled,.btn-outline-success:disabled{color:#28a745;background-color:transparent}.btn-outline-success:not(:disabled):not(.disabled).active,.btn-outline-success:not(:disabled):not(.disabled):active,.show>.btn-outline-success.dropdown-toggle{color:#fff;background-color:#28a745;border-color:#28a745}.btn-outline-success:not(:disabled):not(.disabled).active:focus,.btn-outline-success:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-success.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(40,167,69,.5)}.btn-outline-info{color:#17a2b8;background-color:transparent;background-image:none;border-color:#17a2b8}.btn-outline-info:hover{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-outline-info.focus,.btn-outline-info:focus{box-shadow:0 0 0 .2rem rgba(23,162,184,.5)}.btn-outline-info.disabled,.btn-outline-info:disabled{color:#17a2b8;background-color:transparent}.btn-outline-info:not(:disabled):not(.disabled).active,.btn-outline-info:not(:disabled):not(.disabled):active,.show>.btn-outline-info.dropdown-toggle{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-outline-info:not(:disabled):not(.disabled).active:focus,.btn-outline-info:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-info.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(23,162,184,.5)}.btn-outline-warning{color:#ffc107;background-color:transparent;background-image:none;border-color:#ffc107}.btn-outline-warning:hover{color:#212529;background-color:#ffc107;border-color:#ffc107}.btn-outline-warning.focus,.btn-outline-warning:focus{box-shadow:0 0 0 .2rem rgba(255,193,7,.5)}.btn-outline-warning.disabled,.btn-outline-warning:disabled{color:#ffc107;background-color:transparent}.btn-outline-warning:not(:disabled):not(.disabled).active,.btn-outline-warning:not(:disabled):not(.disabled):active,.show>.btn-outline-warning.dropdown-toggle{color:#212529;background-color:#ffc107;border-color:#ffc107}.btn-outline-warning:not(:disabled):not(.disabled).active:focus,.btn-outline-warning:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-warning.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(255,193,7,.5)}.btn-outline-danger{color:#dc3545;background-color:transparent;background-image:none;border-color:#dc3545}.btn-outline-danger:hover{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-outline-danger.focus,.btn-outline-danger:focus{box-shadow:0 0 0 .2rem rgba(220,53,69,.5)}.btn-outline-danger.disabled,.btn-outline-danger:disabled{color:#dc3545;background-color:transparent}.btn-outline-danger:not(:disabled):not(.disabled).active,.btn-outline-danger:not(:disabled):not(.disabled):active,.show>.btn-outline-danger.dropdown-toggle{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-outline-danger:not(:disabled):not(.disabled).active:focus,.btn-outline-danger:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-danger.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(220,53,69,.5)}.btn-outline-light{color:#f8f9fa;background-color:transparent;background-image:none;border-color:#f8f9fa}.btn-outline-light:hover{color:#212529;background-color:#f8f9fa;border-color:#f8f9fa}.btn-outline-light.focus,.btn-outline-light:focus{box-shadow:0 0 0 .2rem rgba(248,249,250,.5)}.btn-outline-light.disabled,.btn-outline-light:disabled{color:#f8f9fa;background-color:transparent}.btn-outline-light:not(:disabled):not(.disabled).active,.btn-outline-light:not(:disabled):not(.disabled):active,.show>.btn-outline-light.dropdown-toggle{color:#212529;background-color:#f8f9fa;border-color:#f8f9fa}.btn-outline-light:not(:disabled):not(.disabled).active:focus,.btn-outline-light:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-light.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(248,249,250,.5)}.btn-outline-dark{color:#343a40;background-color:transparent;background-image:none;border-color:#343a40}.btn-outline-dark:hover{color:#fff;background-color:#343a40;border-color:#343a40}.btn-outline-dark.focus,.btn-outline-dark:focus{box-shadow:0 0 0 .2rem rgba(52,58,64,.5)}.btn-outline-dark.disabled,.btn-outline-dark:disabled{color:#343a40;background-color:transparent}.btn-outline-dark:not(:disabled):not(.disabled).active,.btn-outline-dark:not(:disabled):not(.disabled):active,.show>.btn-outline-dark.dropdown-toggle{color:#fff;background-color:#343a40;border-color:#343a40}.btn-outline-dark:not(:disabled):not(.disabled).active:focus,.btn-outline-dark:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-dark.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(52,58,64,.5)}.btn-link{font-weight:400;color:#007bff;background-color:transparent}.btn-link:hover{color:#0056b3;text-decoration:underline;background-color:transparent;border-color:transparent}.btn-link.focus,.btn-link:focus{text-decoration:underline;border-color:transparent;box-shadow:none}.btn-link.disabled,.btn-link:disabled{color:#6c757d;pointer-events:none}.btn-group-lg>.btn,.btn-lg{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.btn-group-sm>.btn,.btn-sm{padding:.25rem .5rem;font-size:.875rem;line-height:1.5;border-radius:.2rem}.btn-block{display:block;width:100%}.btn-block+.btn-block{margin-top:.5rem}input[type=button].btn-block,input[type=reset].btn-block,input[type=submit].btn-block{width:100%}.fade{transition:opacity .15s linear}@media screen and (prefers-reduced-motion:reduce){.fade{transition:none}}.fade:not(.show){opacity:0}.collapse:not(.show){display:none}.collapsing{position:relative;height:0;overflow:hidden;transition:height .35s ease}@media screen and (prefers-reduced-motion:reduce){.collapsing{transition:none}}.dropdown,.dropleft,.dropright,.dropup{position:relative}.dropdown-toggle::after{display:inline-block;width:0;height:0;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent}.dropdown-toggle:empty::after{margin-left:0}.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:10rem;padding:.5rem 0;margin:.125rem 0 0;font-size:1rem;color:#212529;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.dropdown-menu-right{right:0;left:auto}.dropup .dropdown-menu{top:auto;bottom:100%;margin-top:0;margin-bottom:.125rem}.dropup .dropdown-toggle::after{display:inline-block;width:0;height:0;margin-left:.255em;vertical-align:.255em;content:"";border-top:0;border-right:.3em solid transparent;border-bottom:.3em solid;border-left:.3em solid transparent}.dropup .dropdown-toggle:empty::after{margin-left:0}.dropright .dropdown-menu{top:0;right:auto;left:100%;margin-top:0;margin-left:.125rem}.dropright .dropdown-toggle::after{display:inline-block;width:0;height:0;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:0;border-bottom:.3em solid transparent;border-left:.3em solid}.dropright .dropdown-toggle:empty::after{margin-left:0}.dropright .dropdown-toggle::after{vertical-align:0}.dropleft .dropdown-menu{top:0;right:100%;left:auto;margin-top:0;margin-right:.125rem}.dropleft .dropdown-toggle::after{display:inline-block;width:0;height:0;margin-left:.255em;vertical-align:.255em;content:""}.dropleft .dropdown-toggle::after{display:none}.dropleft .dropdown-toggle::before{display:inline-block;width:0;height:0;margin-right:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:.3em solid;border-bottom:.3em solid transparent}.dropleft .dropdown-toggle:empty::after{margin-left:0}.dropleft .dropdown-toggle::before{vertical-align:0}.dropdown-menu[x-placement^=bottom],.dropdown-menu[x-placement^=left],.dropdown-menu[x-placement^=right],.dropdown-menu[x-placement^=top]{right:auto;bottom:auto}.dropdown-divider{height:0;margin:.5rem 0;overflow:hidden;border-top:1px solid #e9ecef}.dropdown-item{display:block;width:100%;padding:.25rem 1.5rem;clear:both;font-weight:400;color:#212529;text-align:inherit;white-space:nowrap;background-color:transparent;border:0}.dropdown-item:focus,.dropdown-item:hover{color:#16181b;text-decoration:none;background-color:#f8f9fa}.dropdown-item.active,.dropdown-item:active{color:#fff;text-decoration:none;background-color:#007bff}.dropdown-item.disabled,.dropdown-item:disabled{color:#6c757d;background-color:transparent}.dropdown-menu.show{display:block}.dropdown-header{display:block;padding:.5rem 1.5rem;margin-bottom:0;font-size:.875rem;color:#6c757d;white-space:nowrap}.dropdown-item-text{display:block;padding:.25rem 1.5rem;color:#212529}.btn-group,.btn-group-vertical{position:relative;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}.btn-group-vertical>.btn,.btn-group>.btn{position:relative;-ms-flex:0 1 auto;flex:0 1 auto}.btn-group-vertical>.btn:hover,.btn-group>.btn:hover{z-index:1}.btn-group-vertical>.btn.active,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn:focus,.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus{z-index:1}.btn-group .btn+.btn,.btn-group .btn+.btn-group,.btn-group .btn-group+.btn,.btn-group .btn-group+.btn-group,.btn-group-vertical .btn+.btn,.btn-group-vertical .btn+.btn-group,.btn-group-vertical .btn-group+.btn,.btn-group-vertical .btn-group+.btn-group{margin-left:-1px}.btn-toolbar{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:start;justify-content:flex-start}.btn-toolbar .input-group{width:auto}.btn-group>.btn:first-child{margin-left:0}.btn-group>.btn-group:not(:last-child)>.btn,.btn-group>.btn:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn-group:not(:first-child)>.btn,.btn-group>.btn:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-toggle-split{padding-right:.5625rem;padding-left:.5625rem}.dropdown-toggle-split::after,.dropright .dropdown-toggle-split::after,.dropup .dropdown-toggle-split::after{margin-left:0}.dropleft .dropdown-toggle-split::before{margin-right:0}.btn-group-sm>.btn+.dropdown-toggle-split,.btn-sm+.dropdown-toggle-split{padding-right:.375rem;padding-left:.375rem}.btn-group-lg>.btn+.dropdown-toggle-split,.btn-lg+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-group-vertical{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center}.btn-group-vertical .btn,.btn-group-vertical .btn-group{width:100%}.btn-group-vertical>.btn+.btn,.btn-group-vertical>.btn+.btn-group,.btn-group-vertical>.btn-group+.btn,.btn-group-vertical>.btn-group+.btn-group{margin-top:-1px;margin-left:0}.btn-group-vertical>.btn-group:not(:last-child)>.btn,.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle){border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn-group:not(:first-child)>.btn,.btn-group-vertical>.btn:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}.btn-group-toggle>.btn,.btn-group-toggle>.btn-group>.btn{margin-bottom:0}.btn-group-toggle>.btn input[type=checkbox],.btn-group-toggle>.btn input[type=radio],.btn-group-toggle>.btn-group>.btn input[type=checkbox],.btn-group-toggle>.btn-group>.btn input[type=radio]{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.input-group{position:relative;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:stretch;align-items:stretch;width:100%}.input-group>.custom-file,.input-group>.custom-select,.input-group>.form-control{position:relative;-ms-flex:1 1 auto;flex:1 1 auto;width:1%;margin-bottom:0}.input-group>.custom-file+.custom-file,.input-group>.custom-file+.custom-select,.input-group>.custom-file+.form-control,.input-group>.custom-select+.custom-file,.input-group>.custom-select+.custom-select,.input-group>.custom-select+.form-control,.input-group>.form-control+.custom-file,.input-group>.form-control+.custom-select,.input-group>.form-control+.form-control{margin-left:-1px}.input-group>.custom-file .custom-file-input:focus~.custom-file-label,.input-group>.custom-select:focus,.input-group>.form-control:focus{z-index:3}.input-group>.custom-file .custom-file-input:focus{z-index:4}.input-group>.custom-select:not(:last-child),.input-group>.form-control:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.input-group>.custom-select:not(:first-child),.input-group>.form-control:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.input-group>.custom-file{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.input-group>.custom-file:not(:last-child) .custom-file-label,.input-group>.custom-file:not(:last-child) .custom-file-label::after{border-top-right-radius:0;border-bottom-right-radius:0}.input-group>.custom-file:not(:first-child) .custom-file-label{border-top-left-radius:0;border-bottom-left-radius:0}.input-group-append,.input-group-prepend{display:-ms-flexbox;display:flex}.input-group-append .btn,.input-group-prepend .btn{position:relative;z-index:2}.input-group-append .btn+.btn,.input-group-append .btn+.input-group-text,.input-group-append .input-group-text+.btn,.input-group-append .input-group-text+.input-group-text,.input-group-prepend .btn+.btn,.input-group-prepend .btn+.input-group-text,.input-group-prepend .input-group-text+.btn,.input-group-prepend .input-group-text+.input-group-text{margin-left:-1px}.input-group-prepend{margin-right:-1px}.input-group-append{margin-left:-1px}.input-group-text{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:.375rem .75rem;margin-bottom:0;font-size:1rem;font-weight:400;line-height:1.5;color:#495057;text-align:center;white-space:nowrap;background-color:#e9ecef;border:1px solid #ced4da;border-radius:.25rem}.input-group-text input[type=checkbox],.input-group-text input[type=radio]{margin-top:0}.input-group-lg>.form-control,.input-group-lg>.input-group-append>.btn,.input-group-lg>.input-group-append>.input-group-text,.input-group-lg>.input-group-prepend>.btn,.input-group-lg>.input-group-prepend>.input-group-text{height:calc(2.875rem + 2px);padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.input-group-sm>.form-control,.input-group-sm>.input-group-append>.btn,.input-group-sm>.input-group-append>.input-group-text,.input-group-sm>.input-group-prepend>.btn,.input-group-sm>.input-group-prepend>.input-group-text{height:calc(1.8125rem + 2px);padding:.25rem .5rem;font-size:.875rem;line-height:1.5;border-radius:.2rem}.input-group>.input-group-append:last-child>.btn:not(:last-child):not(.dropdown-toggle),.input-group>.input-group-append:last-child>.input-group-text:not(:last-child),.input-group>.input-group-append:not(:last-child)>.btn,.input-group>.input-group-append:not(:last-child)>.input-group-text,.input-group>.input-group-prepend>.btn,.input-group>.input-group-prepend>.input-group-text{border-top-right-radius:0;border-bottom-right-radius:0}.input-group>.input-group-append>.btn,.input-group>.input-group-append>.input-group-text,.input-group>.input-group-prepend:first-child>.btn:not(:first-child),.input-group>.input-group-prepend:first-child>.input-group-text:not(:first-child),.input-group>.input-group-prepend:not(:first-child)>.btn,.input-group>.input-group-prepend:not(:first-child)>.input-group-text{border-top-left-radius:0;border-bottom-left-radius:0}.custom-control{position:relative;display:block;min-height:1.5rem;padding-left:1.5rem}.custom-control-inline{display:-ms-inline-flexbox;display:inline-flex;margin-right:1rem}.custom-control-input{position:absolute;z-index:-1;opacity:0}.custom-control-input:checked~.custom-control-label::before{color:#fff;background-color:#007bff}.custom-control-input:focus~.custom-control-label::before{box-shadow:0 0 0 1px #fff,0 0 0 .2rem rgba(0,123,255,.25)}.custom-control-input:active~.custom-control-label::before{color:#fff;background-color:#b3d7ff}.custom-control-input:disabled~.custom-control-label{color:#6c757d}.custom-control-input:disabled~.custom-control-label::before{background-color:#e9ecef}.custom-control-label{position:relative;margin-bottom:0}.custom-control-label::before{position:absolute;top:.25rem;left:-1.5rem;display:block;width:1rem;height:1rem;pointer-events:none;content:"";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:#dee2e6}.custom-control-label::after{position:absolute;top:.25rem;left:-1.5rem;display:block;width:1rem;height:1rem;content:"";background-repeat:no-repeat;background-position:center center;background-size:50% 50%}.custom-checkbox .custom-control-label::before{border-radius:.25rem}.custom-checkbox .custom-control-input:checked~.custom-control-label::before{background-color:#007bff}.custom-checkbox .custom-control-input:checked~.custom-control-label::after{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 8 8%27%3E%3Cpath fill=%27%23fff%27 d=%27M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z%27/%3E%3C/svg%3E")}.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before{background-color:#007bff}.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::after{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 4 4%27%3E%3Cpath stroke=%27%23fff%27 d=%27M0 2h4%27/%3E%3C/svg%3E")}.custom-checkbox .custom-control-input:disabled:checked~.custom-control-label::before{background-color:rgba(0,123,255,.5)}.custom-checkbox .custom-control-input:disabled:indeterminate~.custom-control-label::before{background-color:rgba(0,123,255,.5)}.custom-radio .custom-control-label::before{border-radius:50%}.custom-radio .custom-control-input:checked~.custom-control-label::before{background-color:#007bff}.custom-radio .custom-control-input:checked~.custom-control-label::after{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3E%3Ccircle r=%273%27 fill=%27%23fff%27/%3E%3C/svg%3E")}.custom-radio .custom-control-input:disabled:checked~.custom-control-label::before{background-color:rgba(0,123,255,.5)}.custom-select{display:inline-block;width:100%;height:calc(2.25rem + 2px);padding:.375rem 1.75rem .375rem .75rem;line-height:1.5;color:#495057;vertical-align:middle;background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 4 5%27%3E%3Cpath fill=%27%23343a40%27 d=%27M2 0L0 2h4zm0 5L0 3h4z%27/%3E%3C/svg%3E") no-repeat right .75rem center;background-size:8px 10px;border:1px solid #ced4da;border-radius:.25rem;-webkit-appearance:none;-moz-appearance:none;appearance:none}.custom-select:focus{border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem rgba(128,189,255,.5)}.custom-select:focus::-ms-value{color:#495057;background-color:#fff}.custom-select[multiple],.custom-select[size]:not([size="1"]){height:auto;padding-right:.75rem;background-image:none}.custom-select:disabled{color:#6c757d;background-color:#e9ecef}.custom-select::-ms-expand{opacity:0}.custom-select-sm{height:calc(1.8125rem + 2px);padding-top:.375rem;padding-bottom:.375rem;font-size:75%}.custom-select-lg{height:calc(2.875rem + 2px);padding-top:.375rem;padding-bottom:.375rem;font-size:125%}.custom-file{position:relative;display:inline-block;width:100%;height:calc(2.25rem + 2px);margin-bottom:0}.custom-file-input{position:relative;z-index:2;width:100%;height:calc(2.25rem + 2px);margin:0;opacity:0}.custom-file-input:focus~.custom-file-label{border-color:#80bdff;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.custom-file-input:focus~.custom-file-label::after{border-color:#80bdff}.custom-file-input:disabled~.custom-file-label{background-color:#e9ecef}.custom-file-input:lang(en)~.custom-file-label::after{content:"Browse"}.custom-file-label{position:absolute;top:0;right:0;left:0;z-index:1;height:calc(2.25rem + 2px);padding:.375rem .75rem;line-height:1.5;color:#495057;background-color:#fff;border:1px solid #ced4da;border-radius:.25rem}.custom-file-label::after{position:absolute;top:0;right:0;bottom:0;z-index:3;display:block;height:2.25rem;padding:.375rem .75rem;line-height:1.5;color:#495057;content:"Browse";background-color:#e9ecef;border-left:1px solid #ced4da;border-radius:0 .25rem .25rem 0}.custom-range{width:100%;padding-left:0;background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none}.custom-range:focus{outline:0}.custom-range:focus::-webkit-slider-thumb{box-shadow:0 0 0 1px #fff,0 0 0 .2rem rgba(0,123,255,.25)}.custom-range:focus::-moz-range-thumb{box-shadow:0 0 0 1px #fff,0 0 0 .2rem rgba(0,123,255,.25)}.custom-range:focus::-ms-thumb{box-shadow:0 0 0 1px #fff,0 0 0 .2rem rgba(0,123,255,.25)}.custom-range::-moz-focus-outer{border:0}.custom-range::-webkit-slider-thumb{width:1rem;height:1rem;margin-top:-.25rem;background-color:#007bff;border:0;border-radius:1rem;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;-webkit-appearance:none;appearance:none}@media screen and (prefers-reduced-motion:reduce){.custom-range::-webkit-slider-thumb{transition:none}}.custom-range::-webkit-slider-thumb:active{background-color:#b3d7ff}.custom-range::-webkit-slider-runnable-track{width:100%;height:.5rem;color:transparent;cursor:pointer;background-color:#dee2e6;border-color:transparent;border-radius:1rem}.custom-range::-moz-range-thumb{width:1rem;height:1rem;background-color:#007bff;border:0;border-radius:1rem;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;-moz-appearance:none;appearance:none}@media screen and (prefers-reduced-motion:reduce){.custom-range::-moz-range-thumb{transition:none}}.custom-range::-moz-range-thumb:active{background-color:#b3d7ff}.custom-range::-moz-range-track{width:100%;height:.5rem;color:transparent;cursor:pointer;background-color:#dee2e6;border-color:transparent;border-radius:1rem}.custom-range::-ms-thumb{width:1rem;height:1rem;margin-top:0;margin-right:.2rem;margin-left:.2rem;background-color:#007bff;border:0;border-radius:1rem;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;appearance:none}@media screen and (prefers-reduced-motion:reduce){.custom-range::-ms-thumb{transition:none}}.custom-range::-ms-thumb:active{background-color:#b3d7ff}.custom-range::-ms-track{width:100%;height:.5rem;color:transparent;cursor:pointer;background-color:transparent;border-color:transparent;border-width:.5rem}.custom-range::-ms-fill-lower{background-color:#dee2e6;border-radius:1rem}.custom-range::-ms-fill-upper{margin-right:15px;background-color:#dee2e6;border-radius:1rem}.custom-control-label::before,.custom-file-label,.custom-select{transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media screen and (prefers-reduced-motion:reduce){.custom-control-label::before,.custom-file-label,.custom-select{transition:none}}.nav{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.nav-link{display:block;padding:.5rem 1rem}.nav-link:focus,.nav-link:hover{text-decoration:none}.nav-link.disabled{color:#6c757d}.nav-tabs{border-bottom:1px solid #dee2e6}.nav-tabs .nav-item{margin-bottom:-1px}.nav-tabs .nav-link{border:1px solid transparent;border-top-left-radius:.25rem;border-top-right-radius:.25rem}.nav-tabs .nav-link:focus,.nav-tabs .nav-link:hover{border-color:#e9ecef #e9ecef #dee2e6}.nav-tabs .nav-link.disabled{color:#6c757d;background-color:transparent;border-color:transparent}.nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active{color:#495057;background-color:#fff;border-color:#dee2e6 #dee2e6 #fff}.nav-tabs .dropdown-menu{margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}.nav-pills .nav-link{border-radius:.25rem}.nav-pills .nav-link.active,.nav-pills .show>.nav-link{color:#fff;background-color:#007bff}.nav-fill .nav-item{-ms-flex:1 1 auto;flex:1 1 auto;text-align:center}.nav-justified .nav-item{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;text-align:center}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.navbar{position:relative;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:.5rem 1rem}.navbar>.container,.navbar>.container-fluid{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.navbar-brand{display:inline-block;padding-top:.3125rem;padding-bottom:.3125rem;margin-right:1rem;font-size:1.25rem;line-height:inherit;white-space:nowrap}.navbar-brand:focus,.navbar-brand:hover{text-decoration:none}.navbar-nav{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}.navbar-nav .nav-link{padding-right:0;padding-left:0}.navbar-nav .dropdown-menu{position:static;float:none}.navbar-text{display:inline-block;padding-top:.5rem;padding-bottom:.5rem}.navbar-collapse{-ms-flex-preferred-size:100%;flex-basis:100%;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center}.navbar-toggler{padding:.25rem .75rem;font-size:1.25rem;line-height:1;background-color:transparent;border:1px solid transparent;border-radius:.25rem}.navbar-toggler:focus,.navbar-toggler:hover{text-decoration:none}.navbar-toggler:not(:disabled):not(.disabled){cursor:pointer}.navbar-toggler-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;content:"";background:no-repeat center center;background-size:100% 100%}@media (max-width:575.98px){.navbar-expand-sm>.container,.navbar-expand-sm>.container-fluid{padding-right:0;padding-left:0}}@media (min-width:576px){.navbar-expand-sm{-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand-sm .navbar-nav{-ms-flex-direction:row;flex-direction:row}.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-sm .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-sm>.container,.navbar-expand-sm>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand-sm .navbar-collapse{display:-ms-flexbox!important;display:flex!important;-ms-flex-preferred-size:auto;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}@media (max-width:767.98px){.navbar-expand-md>.container,.navbar-expand-md>.container-fluid{padding-right:0;padding-left:0}}@media (min-width:768px){.navbar-expand-md{-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand-md .navbar-nav{-ms-flex-direction:row;flex-direction:row}.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-md .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-md>.container,.navbar-expand-md>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand-md .navbar-collapse{display:-ms-flexbox!important;display:flex!important;-ms-flex-preferred-size:auto;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}}@media (max-width:991.98px){.navbar-expand-lg>.container,.navbar-expand-lg>.container-fluid{padding-right:0;padding-left:0}}@media (min-width:992px){.navbar-expand-lg{-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand-lg .navbar-nav{-ms-flex-direction:row;flex-direction:row}.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-lg .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-lg>.container,.navbar-expand-lg>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand-lg .navbar-collapse{display:-ms-flexbox!important;display:flex!important;-ms-flex-preferred-size:auto;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}@media (max-width:1199.98px){.navbar-expand-xl>.container,.navbar-expand-xl>.container-fluid{padding-right:0;padding-left:0}}@media (min-width:1200px){.navbar-expand-xl{-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand-xl .navbar-nav{-ms-flex-direction:row;flex-direction:row}.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-xl .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-xl>.container,.navbar-expand-xl>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand-xl .navbar-collapse{display:-ms-flexbox!important;display:flex!important;-ms-flex-preferred-size:auto;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}}.navbar-expand{-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand>.container,.navbar-expand>.container-fluid{padding-right:0;padding-left:0}.navbar-expand .navbar-nav{-ms-flex-direction:row;flex-direction:row}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.navbar-expand .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand>.container,.navbar-expand>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand .navbar-collapse{display:-ms-flexbox!important;display:flex!important;-ms-flex-preferred-size:auto;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}.navbar-light .navbar-brand{color:rgba(0,0,0,.9)}.navbar-light .navbar-brand:focus,.navbar-light .navbar-brand:hover{color:rgba(0,0,0,.9)}.navbar-light .navbar-nav .nav-link{color:rgba(0,0,0,.5)}.navbar-light .navbar-nav .nav-link:focus,.navbar-light .navbar-nav .nav-link:hover{color:rgba(0,0,0,.7)}.navbar-light .navbar-nav .nav-link.disabled{color:rgba(0,0,0,.3)}.navbar-light .navbar-nav .active>.nav-link,.navbar-light .navbar-nav .nav-link.active,.navbar-light .navbar-nav .nav-link.show,.navbar-light .navbar-nav .show>.nav-link{color:rgba(0,0,0,.9)}.navbar-light .navbar-toggler{color:rgba(0,0,0,.5);border-color:rgba(0,0,0,.1)}.navbar-light .navbar-toggler-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox=%270 0 30 30%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath stroke=%27rgba%280, 0, 0, 0.5%29%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-miterlimit=%2710%27 d=%27M4 7h22M4 15h22M4 23h22%27/%3E%3C/svg%3E")}.navbar-light .navbar-text{color:rgba(0,0,0,.5)}.navbar-light .navbar-text a{color:rgba(0,0,0,.9)}.navbar-light .navbar-text a:focus,.navbar-light .navbar-text a:hover{color:rgba(0,0,0,.9)}.navbar-dark .navbar-brand{color:#fff}.navbar-dark .navbar-brand:focus,.navbar-dark .navbar-brand:hover{color:#fff}.navbar-dark .navbar-nav .nav-link{color:rgba(255,255,255,.5)}.navbar-dark .navbar-nav .nav-link:focus,.navbar-dark .navbar-nav .nav-link:hover{color:rgba(255,255,255,.75)}.navbar-dark .navbar-nav .nav-link.disabled{color:rgba(255,255,255,.25)}.navbar-dark .navbar-nav .active>.nav-link,.navbar-dark .navbar-nav .nav-link.active,.navbar-dark .navbar-nav .nav-link.show,.navbar-dark .navbar-nav .show>.nav-link{color:#fff}.navbar-dark .navbar-toggler{color:rgba(255,255,255,.5);border-color:rgba(255,255,255,.1)}.navbar-dark .navbar-toggler-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox=%270 0 30 30%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath stroke=%27rgba%28255, 255, 255, 0.5%29%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-miterlimit=%2710%27 d=%27M4 7h22M4 15h22M4 23h22%27/%3E%3C/svg%3E")}.navbar-dark .navbar-text{color:rgba(255,255,255,.5)}.navbar-dark .navbar-text a{color:#fff}.navbar-dark .navbar-text a:focus,.navbar-dark .navbar-text a:hover{color:#fff}.card{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.125);border-radius:.25rem}.card>hr{margin-right:0;margin-left:0}.card>.list-group:first-child .list-group-item:first-child{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.card>.list-group:last-child .list-group-item:last-child{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.card-body{-ms-flex:1 1 auto;flex:1 1 auto;padding:1.25rem}.card-title{margin-bottom:.75rem}.card-subtitle{margin-top:-.375rem;margin-bottom:0}.card-text:last-child{margin-bottom:0}.card-link:hover{text-decoration:none}.card-link+.card-link{margin-left:1.25rem}.card-header{padding:.75rem 1.25rem;margin-bottom:0;background-color:rgba(0,0,0,.03);border-bottom:1px solid rgba(0,0,0,.125)}.card-header:first-child{border-radius:calc(.25rem - 1px) calc(.25rem - 1px) 0 0}.card-header+.list-group .list-group-item:first-child{border-top:0}.card-footer{padding:.75rem 1.25rem;background-color:rgba(0,0,0,.03);border-top:1px solid rgba(0,0,0,.125)}.card-footer:last-child{border-radius:0 0 calc(.25rem - 1px) calc(.25rem - 1px)}.card-header-tabs{margin-right:-.625rem;margin-bottom:-.75rem;margin-left:-.625rem;border-bottom:0}.card-header-pills{margin-right:-.625rem;margin-left:-.625rem}.card-img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:1.25rem}.card-img{width:100%;border-radius:calc(.25rem - 1px)}.card-img-top{width:100%;border-top-left-radius:calc(.25rem - 1px);border-top-right-radius:calc(.25rem - 1px)}.card-img-bottom{width:100%;border-bottom-right-radius:calc(.25rem - 1px);border-bottom-left-radius:calc(.25rem - 1px)}.card-deck{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.card-deck .card{margin-bottom:15px}@media (min-width:576px){.card-deck{-ms-flex-flow:row wrap;flex-flow:row wrap;margin-right:-15px;margin-left:-15px}.card-deck .card{display:-ms-flexbox;display:flex;-ms-flex:1 0 0%;flex:1 0 0%;-ms-flex-direction:column;flex-direction:column;margin-right:15px;margin-bottom:0;margin-left:15px}}.card-group{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.card-group>.card{margin-bottom:15px}@media (min-width:576px){.card-group{-ms-flex-flow:row wrap;flex-flow:row wrap}.card-group>.card{-ms-flex:1 0 0%;flex:1 0 0%;margin-bottom:0}.card-group>.card+.card{margin-left:0;border-left:0}.card-group>.card:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.card-group>.card:first-child .card-header,.card-group>.card:first-child .card-img-top{border-top-right-radius:0}.card-group>.card:first-child .card-footer,.card-group>.card:first-child .card-img-bottom{border-bottom-right-radius:0}.card-group>.card:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.card-group>.card:last-child .card-header,.card-group>.card:last-child .card-img-top{border-top-left-radius:0}.card-group>.card:last-child .card-footer,.card-group>.card:last-child .card-img-bottom{border-bottom-left-radius:0}.card-group>.card:only-child{border-radius:.25rem}.card-group>.card:only-child .card-header,.card-group>.card:only-child .card-img-top{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.card-group>.card:only-child .card-footer,.card-group>.card:only-child .card-img-bottom{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.card-group>.card:not(:first-child):not(:last-child):not(:only-child){border-radius:0}.card-group>.card:not(:first-child):not(:last-child):not(:only-child) .card-footer,.card-group>.card:not(:first-child):not(:last-child):not(:only-child) .card-header,.card-group>.card:not(:first-child):not(:last-child):not(:only-child) .card-img-bottom,.card-group>.card:not(:first-child):not(:last-child):not(:only-child) .card-img-top{border-radius:0}}.card-columns .card{margin-bottom:.75rem}@media (min-width:576px){.card-columns{-webkit-column-count:3;-moz-column-count:3;column-count:3;-webkit-column-gap:1.25rem;-moz-column-gap:1.25rem;column-gap:1.25rem;orphans:1;widows:1}.card-columns .card{display:inline-block;width:100%}}.accordion .card:not(:first-of-type):not(:last-of-type){border-bottom:0;border-radius:0}.accordion .card:not(:first-of-type) .card-header:first-child{border-radius:0}.accordion .card:first-of-type{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.accordion .card:last-of-type{border-top-left-radius:0;border-top-right-radius:0}.breadcrumb{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:.75rem 1rem;margin-bottom:1rem;list-style:none;background-color:#e9ecef;border-radius:.25rem}.breadcrumb-item+.breadcrumb-item{padding-left:.5rem}.breadcrumb-item+.breadcrumb-item::before{display:inline-block;padding-right:.5rem;color:#6c757d;content:"/"}.breadcrumb-item+.breadcrumb-item:hover::before{text-decoration:underline}.breadcrumb-item+.breadcrumb-item:hover::before{text-decoration:none}.breadcrumb-item.active{color:#6c757d}.pagination{display:-ms-flexbox;display:flex;padding-left:0;list-style:none;border-radius:.25rem}.page-link{position:relative;display:block;padding:.5rem .75rem;margin-left:-1px;line-height:1.25;color:#007bff;background-color:#fff;border:1px solid #dee2e6}.page-link:hover{z-index:2;color:#0056b3;text-decoration:none;background-color:#e9ecef;border-color:#dee2e6}.page-link:focus{z-index:2;outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.page-link:not(:disabled):not(.disabled){cursor:pointer}.page-item:first-child .page-link{margin-left:0;border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.page-item:last-child .page-link{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.page-item.active .page-link{z-index:1;color:#fff;background-color:#007bff;border-color:#007bff}.page-item.disabled .page-link{color:#6c757d;pointer-events:none;cursor:auto;background-color:#fff;border-color:#dee2e6}.pagination-lg .page-link{padding:.75rem 1.5rem;font-size:1.25rem;line-height:1.5}.pagination-lg .page-item:first-child .page-link{border-top-left-radius:.3rem;border-bottom-left-radius:.3rem}.pagination-lg .page-item:last-child .page-link{border-top-right-radius:.3rem;border-bottom-right-radius:.3rem}.pagination-sm .page-link{padding:.25rem .5rem;font-size:.875rem;line-height:1.5}.pagination-sm .page-item:first-child .page-link{border-top-left-radius:.2rem;border-bottom-left-radius:.2rem}.pagination-sm .page-item:last-child .page-link{border-top-right-radius:.2rem;border-bottom-right-radius:.2rem}.badge{display:inline-block;padding:.25em .4em;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.badge-pill{padding-right:.6em;padding-left:.6em;border-radius:10rem}.badge-primary{color:#fff;background-color:#007bff}.badge-primary[href]:focus,.badge-primary[href]:hover{color:#fff;text-decoration:none;background-color:#0062cc}.badge-secondary{color:#fff;background-color:#6c757d}.badge-secondary[href]:focus,.badge-secondary[href]:hover{color:#fff;text-decoration:none;background-color:#545b62}.badge-success{color:#fff;background-color:#28a745}.badge-success[href]:focus,.badge-success[href]:hover{color:#fff;text-decoration:none;background-color:#1e7e34}.badge-info{color:#fff;background-color:#17a2b8}.badge-info[href]:focus,.badge-info[href]:hover{color:#fff;text-decoration:none;background-color:#117a8b}.badge-warning{color:#212529;background-color:#ffc107}.badge-warning[href]:focus,.badge-warning[href]:hover{color:#212529;text-decoration:none;background-color:#d39e00}.badge-danger{color:#fff;background-color:#dc3545}.badge-danger[href]:focus,.badge-danger[href]:hover{color:#fff;text-decoration:none;background-color:#bd2130}.badge-light{color:#212529;background-color:#f8f9fa}.badge-light[href]:focus,.badge-light[href]:hover{color:#212529;text-decoration:none;background-color:#dae0e5}.badge-dark{color:#fff;background-color:#343a40}.badge-dark[href]:focus,.badge-dark[href]:hover{color:#fff;text-decoration:none;background-color:#1d2124}.jumbotron{padding:2rem 1rem;margin-bottom:2rem;background-color:#e9ecef;border-radius:.3rem}@media (min-width:576px){.jumbotron{padding:4rem 2rem}}.jumbotron-fluid{padding-right:0;padding-left:0;border-radius:0}.alert{position:relative;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem}.alert-heading{color:inherit}.alert-link{font-weight:700}.alert-dismissible{padding-right:4rem}.alert-dismissible .close{position:absolute;top:0;right:0;padding:.75rem 1.25rem;color:inherit}.alert-primary{color:#004085;background-color:#cce5ff;border-color:#b8daff}.alert-primary hr{border-top-color:#9fcdff}.alert-primary .alert-link{color:#002752}.alert-secondary{color:#383d41;background-color:#e2e3e5;border-color:#d6d8db}.alert-secondary hr{border-top-color:#c8cbcf}.alert-secondary .alert-link{color:#202326}.alert-success{color:#155724;background-color:#d4edda;border-color:#c3e6cb}.alert-success hr{border-top-color:#b1dfbb}.alert-success .alert-link{color:#0b2e13}.alert-info{color:#0c5460;background-color:#d1ecf1;border-color:#bee5eb}.alert-info hr{border-top-color:#abdde5}.alert-info .alert-link{color:#062c33}.alert-warning{color:#856404;background-color:#fff3cd;border-color:#ffeeba}.alert-warning hr{border-top-color:#ffe8a1}.alert-warning .alert-link{color:#533f03}.alert-danger{color:#721c24;background-color:#f8d7da;border-color:#f5c6cb}.alert-danger hr{border-top-color:#f1b0b7}.alert-danger .alert-link{color:#491217}.alert-light{color:#818182;background-color:#fefefe;border-color:#fdfdfe}.alert-light hr{border-top-color:#ececf6}.alert-light .alert-link{color:#686868}.alert-dark{color:#1b1e21;background-color:#d6d8d9;border-color:#c6c8ca}.alert-dark hr{border-top-color:#b9bbbe}.alert-dark .alert-link{color:#040505}@-webkit-keyframes progress-bar-stripes{from{background-position:1rem 0}to{background-position:0 0}}@keyframes progress-bar-stripes{from{background-position:1rem 0}to{background-position:0 0}}.progress{display:-ms-flexbox;display:flex;height:1rem;overflow:hidden;font-size:.75rem;background-color:#e9ecef;border-radius:.25rem}.progress-bar{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;color:#fff;text-align:center;white-space:nowrap;background-color:#007bff;transition:width .6s ease}@media screen and (prefers-reduced-motion:reduce){.progress-bar{transition:none}}.progress-bar-striped{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:1rem 1rem}.progress-bar-animated{-webkit-animation:progress-bar-stripes 1s linear infinite;animation:progress-bar-stripes 1s linear infinite}.media{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.media-body{-ms-flex:1;flex:1}.list-group{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding-left:0;margin-bottom:0}.list-group-item-action{width:100%;color:#495057;text-align:inherit}.list-group-item-action:focus,.list-group-item-action:hover{color:#495057;text-decoration:none;background-color:#f8f9fa}.list-group-item-action:active{color:#212529;background-color:#e9ecef}.list-group-item{position:relative;display:block;padding:.75rem 1.25rem;margin-bottom:-1px;background-color:#fff;border:1px solid rgba(0,0,0,.125)}.list-group-item:first-child{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.list-group-item:last-child{margin-bottom:0;border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.list-group-item:focus,.list-group-item:hover{z-index:1;text-decoration:none}.list-group-item.disabled,.list-group-item:disabled{color:#6c757d;background-color:#fff}.list-group-item.active{z-index:2;color:#fff;background-color:#007bff;border-color:#007bff}.list-group-flush .list-group-item{border-right:0;border-left:0;border-radius:0}.list-group-flush:first-child .list-group-item:first-child{border-top:0}.list-group-flush:last-child .list-group-item:last-child{border-bottom:0}.list-group-item-primary{color:#004085;background-color:#b8daff}.list-group-item-primary.list-group-item-action:focus,.list-group-item-primary.list-group-item-action:hover{color:#004085;background-color:#9fcdff}.list-group-item-primary.list-group-item-action.active{color:#fff;background-color:#004085;border-color:#004085}.list-group-item-secondary{color:#383d41;background-color:#d6d8db}.list-group-item-secondary.list-group-item-action:focus,.list-group-item-secondary.list-group-item-action:hover{color:#383d41;background-color:#c8cbcf}.list-group-item-secondary.list-group-item-action.active{color:#fff;background-color:#383d41;border-color:#383d41}.list-group-item-success{color:#155724;background-color:#c3e6cb}.list-group-item-success.list-group-item-action:focus,.list-group-item-success.list-group-item-action:hover{color:#155724;background-color:#b1dfbb}.list-group-item-success.list-group-item-action.active{color:#fff;background-color:#155724;border-color:#155724}.list-group-item-info{color:#0c5460;background-color:#bee5eb}.list-group-item-info.list-group-item-action:focus,.list-group-item-info.list-group-item-action:hover{color:#0c5460;background-color:#abdde5}.list-group-item-info.list-group-item-action.active{color:#fff;background-color:#0c5460;border-color:#0c5460}.list-group-item-warning{color:#856404;background-color:#ffeeba}.list-group-item-warning.list-group-item-action:focus,.list-group-item-warning.list-group-item-action:hover{color:#856404;background-color:#ffe8a1}.list-group-item-warning.list-group-item-action.active{color:#fff;background-color:#856404;border-color:#856404}.list-group-item-danger{color:#721c24;background-color:#f5c6cb}.list-group-item-danger.list-group-item-action:focus,.list-group-item-danger.list-group-item-action:hover{color:#721c24;background-color:#f1b0b7}.list-group-item-danger.list-group-item-action.active{color:#fff;background-color:#721c24;border-color:#721c24}.list-group-item-light{color:#818182;background-color:#fdfdfe}.list-group-item-light.list-group-item-action:focus,.list-group-item-light.list-group-item-action:hover{color:#818182;background-color:#ececf6}.list-group-item-light.list-group-item-action.active{color:#fff;background-color:#818182;border-color:#818182}.list-group-item-dark{color:#1b1e21;background-color:#c6c8ca}.list-group-item-dark.list-group-item-action:focus,.list-group-item-dark.list-group-item-action:hover{color:#1b1e21;background-color:#b9bbbe}.list-group-item-dark.list-group-item-action.active{color:#fff;background-color:#1b1e21;border-color:#1b1e21}.close{float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5}.close:not(:disabled):not(.disabled){cursor:pointer}.close:not(:disabled):not(.disabled):focus,.close:not(:disabled):not(.disabled):hover{color:#000;text-decoration:none;opacity:.75}button.close{padding:0;background-color:transparent;border:0;-webkit-appearance:none}.modal-open{overflow:hidden}.modal-open .modal{overflow-x:hidden;overflow-y:auto}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;display:none;overflow:hidden;outline:0}.modal-dialog{position:relative;width:auto;margin:.5rem;pointer-events:none}.modal.fade .modal-dialog{transition:-webkit-transform .3s ease-out;transition:transform .3s ease-out;transition:transform .3s ease-out,-webkit-transform .3s ease-out;-webkit-transform:translate(0,-25%);transform:translate(0,-25%)}@media screen and (prefers-reduced-motion:reduce){.modal.fade .modal-dialog{transition:none}}.modal.show .modal-dialog{-webkit-transform:translate(0,0);transform:translate(0,0)}.modal-dialog-centered{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:calc(100% - (.5rem * 2))}.modal-dialog-centered::before{display:block;height:calc(100vh - (.5rem * 2));content:""}.modal-content{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;pointer-events:auto;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem;outline:0}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000}.modal-backdrop.fade{opacity:0}.modal-backdrop.show{opacity:.5}.modal-header{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:justify;justify-content:space-between;padding:1rem;border-bottom:1px solid #e9ecef;border-top-left-radius:.3rem;border-top-right-radius:.3rem}.modal-header .close{padding:1rem;margin:-1rem -1rem -1rem auto}.modal-title{margin-bottom:0;line-height:1.5}.modal-body{position:relative;-ms-flex:1 1 auto;flex:1 1 auto;padding:1rem}.modal-footer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end;padding:1rem;border-top:1px solid #e9ecef}.modal-footer>:not(:first-child){margin-left:.25rem}.modal-footer>:not(:last-child){margin-right:.25rem}.modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}@media (min-width:576px){.modal-dialog{max-width:500px;margin:1.75rem auto}.modal-dialog-centered{min-height:calc(100% - (1.75rem * 2))}.modal-dialog-centered::before{height:calc(100vh - (1.75rem * 2))}.modal-sm{max-width:300px}}@media (min-width:992px){.modal-lg{max-width:800px}}.tooltip{position:absolute;z-index:1070;display:block;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;white-space:normal;line-break:auto;font-size:.875rem;word-wrap:break-word;opacity:0}.tooltip.show{opacity:.9}.tooltip .arrow{position:absolute;display:block;width:.8rem;height:.4rem}.tooltip .arrow::before{position:absolute;content:"";border-color:transparent;border-style:solid}.bs-tooltip-auto[x-placement^=top],.bs-tooltip-top{padding:.4rem 0}.bs-tooltip-auto[x-placement^=top] .arrow,.bs-tooltip-top .arrow{bottom:0}.bs-tooltip-auto[x-placement^=top] .arrow::before,.bs-tooltip-top .arrow::before{top:0;border-width:.4rem .4rem 0;border-top-color:#000}.bs-tooltip-auto[x-placement^=right],.bs-tooltip-right{padding:0 .4rem}.bs-tooltip-auto[x-placement^=right] .arrow,.bs-tooltip-right .arrow{left:0;width:.4rem;height:.8rem}.bs-tooltip-auto[x-placement^=right] .arrow::before,.bs-tooltip-right .arrow::before{right:0;border-width:.4rem .4rem .4rem 0;border-right-color:#000}.bs-tooltip-auto[x-placement^=bottom],.bs-tooltip-bottom{padding:.4rem 0}.bs-tooltip-auto[x-placement^=bottom] .arrow,.bs-tooltip-bottom .arrow{top:0}.bs-tooltip-auto[x-placement^=bottom] .arrow::before,.bs-tooltip-bottom .arrow::before{bottom:0;border-width:0 .4rem .4rem;border-bottom-color:#000}.bs-tooltip-auto[x-placement^=left],.bs-tooltip-left{padding:0 .4rem}.bs-tooltip-auto[x-placement^=left] .arrow,.bs-tooltip-left .arrow{right:0;width:.4rem;height:.8rem}.bs-tooltip-auto[x-placement^=left] .arrow::before,.bs-tooltip-left .arrow::before{left:0;border-width:.4rem 0 .4rem .4rem;border-left-color:#000}.tooltip-inner{max-width:200px;padding:.25rem .5rem;color:#fff;text-align:center;background-color:#000;border-radius:.25rem}.popover{position:absolute;top:0;left:0;z-index:1060;display:block;max-width:276px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;white-space:normal;line-break:auto;font-size:.875rem;word-wrap:break-word;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem}.popover .arrow{position:absolute;display:block;width:1rem;height:.5rem;margin:0 .3rem}.popover .arrow::after,.popover .arrow::before{position:absolute;display:block;content:"";border-color:transparent;border-style:solid}.bs-popover-auto[x-placement^=top],.bs-popover-top{margin-bottom:.5rem}.bs-popover-auto[x-placement^=top] .arrow,.bs-popover-top .arrow{bottom:calc((.5rem + 1px) * -1)}.bs-popover-auto[x-placement^=top] .arrow::after,.bs-popover-auto[x-placement^=top] .arrow::before,.bs-popover-top .arrow::after,.bs-popover-top .arrow::before{border-width:.5rem .5rem 0}.bs-popover-auto[x-placement^=top] .arrow::before,.bs-popover-top .arrow::before{bottom:0;border-top-color:rgba(0,0,0,.25)}.bs-popover-auto[x-placement^=top] .arrow::after,.bs-popover-top .arrow::after{bottom:1px;border-top-color:#fff}.bs-popover-auto[x-placement^=right],.bs-popover-right{margin-left:.5rem}.bs-popover-auto[x-placement^=right] .arrow,.bs-popover-right .arrow{left:calc((.5rem + 1px) * -1);width:.5rem;height:1rem;margin:.3rem 0}.bs-popover-auto[x-placement^=right] .arrow::after,.bs-popover-auto[x-placement^=right] .arrow::before,.bs-popover-right .arrow::after,.bs-popover-right .arrow::before{border-width:.5rem .5rem .5rem 0}.bs-popover-auto[x-placement^=right] .arrow::before,.bs-popover-right .arrow::before{left:0;border-right-color:rgba(0,0,0,.25)}.bs-popover-auto[x-placement^=right] .arrow::after,.bs-popover-right .arrow::after{left:1px;border-right-color:#fff}.bs-popover-auto[x-placement^=bottom],.bs-popover-bottom{margin-top:.5rem}.bs-popover-auto[x-placement^=bottom] .arrow,.bs-popover-bottom .arrow{top:calc((.5rem + 1px) * -1)}.bs-popover-auto[x-placement^=bottom] .arrow::after,.bs-popover-auto[x-placement^=bottom] .arrow::before,.bs-popover-bottom .arrow::after,.bs-popover-bottom .arrow::before{border-width:0 .5rem .5rem .5rem}.bs-popover-auto[x-placement^=bottom] .arrow::before,.bs-popover-bottom .arrow::before{top:0;border-bottom-color:rgba(0,0,0,.25)}.bs-popover-auto[x-placement^=bottom] .arrow::after,.bs-popover-bottom .arrow::after{top:1px;border-bottom-color:#fff}.bs-popover-auto[x-placement^=bottom] .popover-header::before,.bs-popover-bottom .popover-header::before{position:absolute;top:0;left:50%;display:block;width:1rem;margin-left:-.5rem;content:"";border-bottom:1px solid #f7f7f7}.bs-popover-auto[x-placement^=left],.bs-popover-left{margin-right:.5rem}.bs-popover-auto[x-placement^=left] .arrow,.bs-popover-left .arrow{right:calc((.5rem + 1px) * -1);width:.5rem;height:1rem;margin:.3rem 0}.bs-popover-auto[x-placement^=left] .arrow::after,.bs-popover-auto[x-placement^=left] .arrow::before,.bs-popover-left .arrow::after,.bs-popover-left .arrow::before{border-width:.5rem 0 .5rem .5rem}.bs-popover-auto[x-placement^=left] .arrow::before,.bs-popover-left .arrow::before{right:0;border-left-color:rgba(0,0,0,.25)}.bs-popover-auto[x-placement^=left] .arrow::after,.bs-popover-left .arrow::after{right:1px;border-left-color:#fff}.popover-header{padding:.5rem .75rem;margin-bottom:0;font-size:1rem;color:inherit;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;border-top-left-radius:calc(.3rem - 1px);border-top-right-radius:calc(.3rem - 1px)}.popover-header:empty{display:none}.popover-body{padding:.5rem .75rem;color:#212529}.carousel{position:relative}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-item{position:relative;display:none;-ms-flex-align:center;align-items:center;width:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000px;perspective:1000px}.carousel-item-next,.carousel-item-prev,.carousel-item.active{display:block;transition:-webkit-transform .6s ease;transition:transform .6s ease;transition:transform .6s ease,-webkit-transform .6s ease}@media screen and (prefers-reduced-motion:reduce){.carousel-item-next,.carousel-item-prev,.carousel-item.active{transition:none}}.carousel-item-next,.carousel-item-prev{position:absolute;top:0}.carousel-item-next.carousel-item-left,.carousel-item-prev.carousel-item-right{-webkit-transform:translateX(0);transform:translateX(0)}@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)){.carousel-item-next.carousel-item-left,.carousel-item-prev.carousel-item-right{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.active.carousel-item-right,.carousel-item-next{-webkit-transform:translateX(100%);transform:translateX(100%)}@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)){.active.carousel-item-right,.carousel-item-next{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.active.carousel-item-left,.carousel-item-prev{-webkit-transform:translateX(-100%);transform:translateX(-100%)}@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)){.active.carousel-item-left,.carousel-item-prev{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.carousel-fade .carousel-item{opacity:0;transition-duration:.6s;transition-property:opacity}.carousel-fade .carousel-item-next.carousel-item-left,.carousel-fade .carousel-item-prev.carousel-item-right,.carousel-fade .carousel-item.active{opacity:1}.carousel-fade .active.carousel-item-left,.carousel-fade .active.carousel-item-right{opacity:0}.carousel-fade .active.carousel-item-left,.carousel-fade .active.carousel-item-prev,.carousel-fade .carousel-item-next,.carousel-fade .carousel-item-prev,.carousel-fade .carousel-item.active{-webkit-transform:translateX(0);transform:translateX(0)}@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)){.carousel-fade .active.carousel-item-left,.carousel-fade .active.carousel-item-prev,.carousel-fade .carousel-item-next,.carousel-fade .carousel-item-prev,.carousel-fade .carousel-item.active{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.carousel-control-next,.carousel-control-prev{position:absolute;top:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:15%;color:#fff;text-align:center;opacity:.5}.carousel-control-next:focus,.carousel-control-next:hover,.carousel-control-prev:focus,.carousel-control-prev:hover{color:#fff;text-decoration:none;outline:0;opacity:.9}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-control-next-icon,.carousel-control-prev-icon{display:inline-block;width:20px;height:20px;background:transparent no-repeat center center;background-size:100% 100%}.carousel-control-prev-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23fff%27 viewBox=%270 0 8 8%27%3E%3Cpath d=%27M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z%27/%3E%3C/svg%3E")}.carousel-control-next-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23fff%27 viewBox=%270 0 8 8%27%3E%3Cpath d=%27M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z%27/%3E%3C/svg%3E")}.carousel-indicators{position:absolute;right:0;bottom:10px;left:0;z-index:15;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding-left:0;margin-right:15%;margin-left:15%;list-style:none}.carousel-indicators li{position:relative;-ms-flex:0 1 auto;flex:0 1 auto;width:30px;height:3px;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:rgba(255,255,255,.5)}.carousel-indicators li::before{position:absolute;top:-10px;left:0;display:inline-block;width:100%;height:10px;content:""}.carousel-indicators li::after{position:absolute;bottom:-10px;left:0;display:inline-block;width:100%;height:10px;content:""}.carousel-indicators .active{background-color:#fff}.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center}.align-baseline{vertical-align:baseline!important}.align-top{vertical-align:top!important}.align-middle{vertical-align:middle!important}.align-bottom{vertical-align:bottom!important}.align-text-bottom{vertical-align:text-bottom!important}.align-text-top{vertical-align:text-top!important}.bg-primary{background-color:#007bff!important}a.bg-primary:focus,a.bg-primary:hover,button.bg-primary:focus,button.bg-primary:hover{background-color:#0062cc!important}.bg-secondary{background-color:#6c757d!important}a.bg-secondary:focus,a.bg-secondary:hover,button.bg-secondary:focus,button.bg-secondary:hover{background-color:#545b62!important}.bg-success{background-color:#28a745!important}a.bg-success:focus,a.bg-success:hover,button.bg-success:focus,button.bg-success:hover{background-color:#1e7e34!important}.bg-info{background-color:#17a2b8!important}a.bg-info:focus,a.bg-info:hover,button.bg-info:focus,button.bg-info:hover{background-color:#117a8b!important}.bg-warning{background-color:#ffc107!important}a.bg-warning:focus,a.bg-warning:hover,button.bg-warning:focus,button.bg-warning:hover{background-color:#d39e00!important}.bg-danger{background-color:#dc3545!important}a.bg-danger:focus,a.bg-danger:hover,button.bg-danger:focus,button.bg-danger:hover{background-color:#bd2130!important}.bg-light{background-color:#f8f9fa!important}a.bg-light:focus,a.bg-light:hover,button.bg-light:focus,button.bg-light:hover{background-color:#dae0e5!important}.bg-dark{background-color:#343a40!important}a.bg-dark:focus,a.bg-dark:hover,button.bg-dark:focus,button.bg-dark:hover{background-color:#1d2124!important}.bg-white{background-color:#fff!important}.bg-transparent{background-color:transparent!important}.border{border:1px solid #dee2e6!important}.border-top{border-top:1px solid #dee2e6!important}.border-right{border-right:1px solid #dee2e6!important}.border-bottom{border-bottom:1px solid #dee2e6!important}.border-left{border-left:1px solid #dee2e6!important}.border-0{border:0!important}.border-top-0{border-top:0!important}.border-right-0{border-right:0!important}.border-bottom-0{border-bottom:0!important}.border-left-0{border-left:0!important}.border-primary{border-color:#007bff!important}.border-secondary{border-color:#6c757d!important}.border-success{border-color:#28a745!important}.border-info{border-color:#17a2b8!important}.border-warning{border-color:#ffc107!important}.border-danger{border-color:#dc3545!important}.border-light{border-color:#f8f9fa!important}.border-dark{border-color:#343a40!important}.border-white{border-color:#fff!important}.rounded{border-radius:.25rem!important}.rounded-top{border-top-left-radius:.25rem!important;border-top-right-radius:.25rem!important}.rounded-right{border-top-right-radius:.25rem!important;border-bottom-right-radius:.25rem!important}.rounded-bottom{border-bottom-right-radius:.25rem!important;border-bottom-left-radius:.25rem!important}.rounded-left{border-top-left-radius:.25rem!important;border-bottom-left-radius:.25rem!important}.rounded-circle{border-radius:50%!important}.rounded-0{border-radius:0!important}.clearfix::after{display:block;clear:both;content:""}.d-none{display:none!important}.d-inline{display:inline!important}.d-inline-block{display:inline-block!important}.d-block{display:block!important}.d-table{display:table!important}.d-table-row{display:table-row!important}.d-table-cell{display:table-cell!important}.d-flex{display:-ms-flexbox!important;display:flex!important}.d-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}@media (min-width:576px){.d-sm-none{display:none!important}.d-sm-inline{display:inline!important}.d-sm-inline-block{display:inline-block!important}.d-sm-block{display:block!important}.d-sm-table{display:table!important}.d-sm-table-row{display:table-row!important}.d-sm-table-cell{display:table-cell!important}.d-sm-flex{display:-ms-flexbox!important;display:flex!important}.d-sm-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}}@media (min-width:768px){.d-md-none{display:none!important}.d-md-inline{display:inline!important}.d-md-inline-block{display:inline-block!important}.d-md-block{display:block!important}.d-md-table{display:table!important}.d-md-table-row{display:table-row!important}.d-md-table-cell{display:table-cell!important}.d-md-flex{display:-ms-flexbox!important;display:flex!important}.d-md-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}}@media (min-width:992px){.d-lg-none{display:none!important}.d-lg-inline{display:inline!important}.d-lg-inline-block{display:inline-block!important}.d-lg-block{display:block!important}.d-lg-table{display:table!important}.d-lg-table-row{display:table-row!important}.d-lg-table-cell{display:table-cell!important}.d-lg-flex{display:-ms-flexbox!important;display:flex!important}.d-lg-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}}@media (min-width:1200px){.d-xl-none{display:none!important}.d-xl-inline{display:inline!important}.d-xl-inline-block{display:inline-block!important}.d-xl-block{display:block!important}.d-xl-table{display:table!important}.d-xl-table-row{display:table-row!important}.d-xl-table-cell{display:table-cell!important}.d-xl-flex{display:-ms-flexbox!important;display:flex!important}.d-xl-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}}@media print{.d-print-none{display:none!important}.d-print-inline{display:inline!important}.d-print-inline-block{display:inline-block!important}.d-print-block{display:block!important}.d-print-table{display:table!important}.d-print-table-row{display:table-row!important}.d-print-table-cell{display:table-cell!important}.d-print-flex{display:-ms-flexbox!important;display:flex!important}.d-print-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}}.embed-responsive{position:relative;display:block;width:100%;padding:0;overflow:hidden}.embed-responsive::before{display:block;content:""}.embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0}.embed-responsive-21by9::before{padding-top:42.857143%}.embed-responsive-16by9::before{padding-top:56.25%}.embed-responsive-4by3::before{padding-top:75%}.embed-responsive-1by1::before{padding-top:100%}.flex-row{-ms-flex-direction:row!important;flex-direction:row!important}.flex-column{-ms-flex-direction:column!important;flex-direction:column!important}.flex-row-reverse{-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-column-reverse{-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.flex-fill{-ms-flex:1 1 auto!important;flex:1 1 auto!important}.flex-grow-0{-ms-flex-positive:0!important;flex-grow:0!important}.flex-grow-1{-ms-flex-positive:1!important;flex-grow:1!important}.flex-shrink-0{-ms-flex-negative:0!important;flex-shrink:0!important}.flex-shrink-1{-ms-flex-negative:1!important;flex-shrink:1!important}.justify-content-start{-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-end{-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-center{-ms-flex-pack:center!important;justify-content:center!important}.justify-content-between{-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-start{-ms-flex-align:start!important;align-items:flex-start!important}.align-items-end{-ms-flex-align:end!important;align-items:flex-end!important}.align-items-center{-ms-flex-align:center!important;align-items:center!important}.align-items-baseline{-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-stretch{-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}@media (min-width:576px){.flex-sm-row{-ms-flex-direction:row!important;flex-direction:row!important}.flex-sm-column{-ms-flex-direction:column!important;flex-direction:column!important}.flex-sm-row-reverse{-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-sm-column-reverse{-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-sm-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-sm-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-sm-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.flex-sm-fill{-ms-flex:1 1 auto!important;flex:1 1 auto!important}.flex-sm-grow-0{-ms-flex-positive:0!important;flex-grow:0!important}.flex-sm-grow-1{-ms-flex-positive:1!important;flex-grow:1!important}.flex-sm-shrink-0{-ms-flex-negative:0!important;flex-shrink:0!important}.flex-sm-shrink-1{-ms-flex-negative:1!important;flex-shrink:1!important}.justify-content-sm-start{-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-sm-end{-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-sm-center{-ms-flex-pack:center!important;justify-content:center!important}.justify-content-sm-between{-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-sm-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-sm-start{-ms-flex-align:start!important;align-items:flex-start!important}.align-items-sm-end{-ms-flex-align:end!important;align-items:flex-end!important}.align-items-sm-center{-ms-flex-align:center!important;align-items:center!important}.align-items-sm-baseline{-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-sm-stretch{-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-sm-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-sm-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-sm-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-sm-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-sm-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-sm-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-sm-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-sm-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-sm-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-sm-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-sm-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-sm-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}}@media (min-width:768px){.flex-md-row{-ms-flex-direction:row!important;flex-direction:row!important}.flex-md-column{-ms-flex-direction:column!important;flex-direction:column!important}.flex-md-row-reverse{-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-md-column-reverse{-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-md-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-md-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-md-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.flex-md-fill{-ms-flex:1 1 auto!important;flex:1 1 auto!important}.flex-md-grow-0{-ms-flex-positive:0!important;flex-grow:0!important}.flex-md-grow-1{-ms-flex-positive:1!important;flex-grow:1!important}.flex-md-shrink-0{-ms-flex-negative:0!important;flex-shrink:0!important}.flex-md-shrink-1{-ms-flex-negative:1!important;flex-shrink:1!important}.justify-content-md-start{-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-md-end{-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-md-center{-ms-flex-pack:center!important;justify-content:center!important}.justify-content-md-between{-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-md-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-md-start{-ms-flex-align:start!important;align-items:flex-start!important}.align-items-md-end{-ms-flex-align:end!important;align-items:flex-end!important}.align-items-md-center{-ms-flex-align:center!important;align-items:center!important}.align-items-md-baseline{-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-md-stretch{-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-md-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-md-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-md-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-md-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-md-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-md-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-md-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-md-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-md-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-md-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-md-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-md-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}}@media (min-width:992px){.flex-lg-row{-ms-flex-direction:row!important;flex-direction:row!important}.flex-lg-column{-ms-flex-direction:column!important;flex-direction:column!important}.flex-lg-row-reverse{-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-lg-column-reverse{-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-lg-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-lg-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-lg-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.flex-lg-fill{-ms-flex:1 1 auto!important;flex:1 1 auto!important}.flex-lg-grow-0{-ms-flex-positive:0!important;flex-grow:0!important}.flex-lg-grow-1{-ms-flex-positive:1!important;flex-grow:1!important}.flex-lg-shrink-0{-ms-flex-negative:0!important;flex-shrink:0!important}.flex-lg-shrink-1{-ms-flex-negative:1!important;flex-shrink:1!important}.justify-content-lg-start{-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-lg-end{-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-lg-center{-ms-flex-pack:center!important;justify-content:center!important}.justify-content-lg-between{-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-lg-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-lg-start{-ms-flex-align:start!important;align-items:flex-start!important}.align-items-lg-end{-ms-flex-align:end!important;align-items:flex-end!important}.align-items-lg-center{-ms-flex-align:center!important;align-items:center!important}.align-items-lg-baseline{-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-lg-stretch{-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-lg-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-lg-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-lg-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-lg-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-lg-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-lg-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-lg-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-lg-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-lg-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-lg-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-lg-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-lg-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}}@media (min-width:1200px){.flex-xl-row{-ms-flex-direction:row!important;flex-direction:row!important}.flex-xl-column{-ms-flex-direction:column!important;flex-direction:column!important}.flex-xl-row-reverse{-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-xl-column-reverse{-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-xl-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-xl-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-xl-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.flex-xl-fill{-ms-flex:1 1 auto!important;flex:1 1 auto!important}.flex-xl-grow-0{-ms-flex-positive:0!important;flex-grow:0!important}.flex-xl-grow-1{-ms-flex-positive:1!important;flex-grow:1!important}.flex-xl-shrink-0{-ms-flex-negative:0!important;flex-shrink:0!important}.flex-xl-shrink-1{-ms-flex-negative:1!important;flex-shrink:1!important}.justify-content-xl-start{-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-xl-end{-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-xl-center{-ms-flex-pack:center!important;justify-content:center!important}.justify-content-xl-between{-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-xl-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-xl-start{-ms-flex-align:start!important;align-items:flex-start!important}.align-items-xl-end{-ms-flex-align:end!important;align-items:flex-end!important}.align-items-xl-center{-ms-flex-align:center!important;align-items:center!important}.align-items-xl-baseline{-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-xl-stretch{-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-xl-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-xl-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-xl-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-xl-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-xl-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-xl-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-xl-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-xl-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-xl-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-xl-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-xl-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-xl-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}}.float-left{float:left!important}.float-right{float:right!important}.float-none{float:none!important}@media (min-width:576px){.float-sm-left{float:left!important}.float-sm-right{float:right!important}.float-sm-none{float:none!important}}@media (min-width:768px){.float-md-left{float:left!important}.float-md-right{float:right!important}.float-md-none{float:none!important}}@media (min-width:992px){.float-lg-left{float:left!important}.float-lg-right{float:right!important}.float-lg-none{float:none!important}}@media (min-width:1200px){.float-xl-left{float:left!important}.float-xl-right{float:right!important}.float-xl-none{float:none!important}}.position-static{position:static!important}.position-relative{position:relative!important}.position-absolute{position:absolute!important}.position-fixed{position:fixed!important}.position-sticky{position:-webkit-sticky!important;position:sticky!important}.fixed-top{position:fixed;top:0;right:0;left:0;z-index:1030}.fixed-bottom{position:fixed;right:0;bottom:0;left:0;z-index:1030}@supports ((position:-webkit-sticky) or (position:sticky)){.sticky-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}.shadow-sm{box-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important}.shadow{box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important}.shadow-lg{box-shadow:0 1rem 3rem rgba(0,0,0,.175)!important}.shadow-none{box-shadow:none!important}.w-25{width:25%!important}.w-50{width:50%!important}.w-75{width:75%!important}.w-100{width:100%!important}.w-auto{width:auto!important}.h-25{height:25%!important}.h-50{height:50%!important}.h-75{height:75%!important}.h-100{height:100%!important}.h-auto{height:auto!important}.mw-100{max-width:100%!important}.mh-100{max-height:100%!important}.m-0{margin:0!important}.mt-0,.my-0{margin-top:0!important}.mr-0,.mx-0{margin-right:0!important}.mb-0,.my-0{margin-bottom:0!important}.ml-0,.mx-0{margin-left:0!important}.m-1{margin:.25rem!important}.mt-1,.my-1{margin-top:.25rem!important}.mr-1,.mx-1{margin-right:.25rem!important}.mb-1,.my-1{margin-bottom:.25rem!important}.ml-1,.mx-1{margin-left:.25rem!important}.m-2{margin:.5rem!important}.mt-2,.my-2{margin-top:.5rem!important}.mr-2,.mx-2{margin-right:.5rem!important}.mb-2,.my-2{margin-bottom:.5rem!important}.ml-2,.mx-2{margin-left:.5rem!important}.m-3{margin:1rem!important}.mt-3,.my-3{margin-top:1rem!important}.mr-3,.mx-3{margin-right:1rem!important}.mb-3,.my-3{margin-bottom:1rem!important}.ml-3,.mx-3{margin-left:1rem!important}.m-4{margin:1.5rem!important}.mt-4,.my-4{margin-top:1.5rem!important}.mr-4,.mx-4{margin-right:1.5rem!important}.mb-4,.my-4{margin-bottom:1.5rem!important}.ml-4,.mx-4{margin-left:1.5rem!important}.m-5{margin:3rem!important}.mt-5,.my-5{margin-top:3rem!important}.mr-5,.mx-5{margin-right:3rem!important}.mb-5,.my-5{margin-bottom:3rem!important}.ml-5,.mx-5{margin-left:3rem!important}.p-0{padding:0!important}.pt-0,.py-0{padding-top:0!important}.pr-0,.px-0{padding-right:0!important}.pb-0,.py-0{padding-bottom:0!important}.pl-0,.px-0{padding-left:0!important}.p-1{padding:.25rem!important}.pt-1,.py-1{padding-top:.25rem!important}.pr-1,.px-1{padding-right:.25rem!important}.pb-1,.py-1{padding-bottom:.25rem!important}.pl-1,.px-1{padding-left:.25rem!important}.p-2{padding:.5rem!important}.pt-2,.py-2{padding-top:.5rem!important}.pr-2,.px-2{padding-right:.5rem!important}.pb-2,.py-2{padding-bottom:.5rem!important}.pl-2,.px-2{padding-left:.5rem!important}.p-3{padding:1rem!important}.pt-3,.py-3{padding-top:1rem!important}.pr-3,.px-3{padding-right:1rem!important}.pb-3,.py-3{padding-bottom:1rem!important}.pl-3,.px-3{padding-left:1rem!important}.p-4{padding:1.5rem!important}.pt-4,.py-4{padding-top:1.5rem!important}.pr-4,.px-4{padding-right:1.5rem!important}.pb-4,.py-4{padding-bottom:1.5rem!important}.pl-4,.px-4{padding-left:1.5rem!important}.p-5{padding:3rem!important}.pt-5,.py-5{padding-top:3rem!important}.pr-5,.px-5{padding-right:3rem!important}.pb-5,.py-5{padding-bottom:3rem!important}.pl-5,.px-5{padding-left:3rem!important}.m-auto{margin:auto!important}.mt-auto,.my-auto{margin-top:auto!important}.mr-auto,.mx-auto{margin-right:auto!important}.mb-auto,.my-auto{margin-bottom:auto!important}.ml-auto,.mx-auto{margin-left:auto!important}@media (min-width:576px){.m-sm-0{margin:0!important}.mt-sm-0,.my-sm-0{margin-top:0!important}.mr-sm-0,.mx-sm-0{margin-right:0!important}.mb-sm-0,.my-sm-0{margin-bottom:0!important}.ml-sm-0,.mx-sm-0{margin-left:0!important}.m-sm-1{margin:.25rem!important}.mt-sm-1,.my-sm-1{margin-top:.25rem!important}.mr-sm-1,.mx-sm-1{margin-right:.25rem!important}.mb-sm-1,.my-sm-1{margin-bottom:.25rem!important}.ml-sm-1,.mx-sm-1{margin-left:.25rem!important}.m-sm-2{margin:.5rem!important}.mt-sm-2,.my-sm-2{margin-top:.5rem!important}.mr-sm-2,.mx-sm-2{margin-right:.5rem!important}.mb-sm-2,.my-sm-2{margin-bottom:.5rem!important}.ml-sm-2,.mx-sm-2{margin-left:.5rem!important}.m-sm-3{margin:1rem!important}.mt-sm-3,.my-sm-3{margin-top:1rem!important}.mr-sm-3,.mx-sm-3{margin-right:1rem!important}.mb-sm-3,.my-sm-3{margin-bottom:1rem!important}.ml-sm-3,.mx-sm-3{margin-left:1rem!important}.m-sm-4{margin:1.5rem!important}.mt-sm-4,.my-sm-4{margin-top:1.5rem!important}.mr-sm-4,.mx-sm-4{margin-right:1.5rem!important}.mb-sm-4,.my-sm-4{margin-bottom:1.5rem!important}.ml-sm-4,.mx-sm-4{margin-left:1.5rem!important}.m-sm-5{margin:3rem!important}.mt-sm-5,.my-sm-5{margin-top:3rem!important}.mr-sm-5,.mx-sm-5{margin-right:3rem!important}.mb-sm-5,.my-sm-5{margin-bottom:3rem!important}.ml-sm-5,.mx-sm-5{margin-left:3rem!important}.p-sm-0{padding:0!important}.pt-sm-0,.py-sm-0{padding-top:0!important}.pr-sm-0,.px-sm-0{padding-right:0!important}.pb-sm-0,.py-sm-0{padding-bottom:0!important}.pl-sm-0,.px-sm-0{padding-left:0!important}.p-sm-1{padding:.25rem!important}.pt-sm-1,.py-sm-1{padding-top:.25rem!important}.pr-sm-1,.px-sm-1{padding-right:.25rem!important}.pb-sm-1,.py-sm-1{padding-bottom:.25rem!important}.pl-sm-1,.px-sm-1{padding-left:.25rem!important}.p-sm-2{padding:.5rem!important}.pt-sm-2,.py-sm-2{padding-top:.5rem!important}.pr-sm-2,.px-sm-2{padding-right:.5rem!important}.pb-sm-2,.py-sm-2{padding-bottom:.5rem!important}.pl-sm-2,.px-sm-2{padding-left:.5rem!important}.p-sm-3{padding:1rem!important}.pt-sm-3,.py-sm-3{padding-top:1rem!important}.pr-sm-3,.px-sm-3{padding-right:1rem!important}.pb-sm-3,.py-sm-3{padding-bottom:1rem!important}.pl-sm-3,.px-sm-3{padding-left:1rem!important}.p-sm-4{padding:1.5rem!important}.pt-sm-4,.py-sm-4{padding-top:1.5rem!important}.pr-sm-4,.px-sm-4{padding-right:1.5rem!important}.pb-sm-4,.py-sm-4{padding-bottom:1.5rem!important}.pl-sm-4,.px-sm-4{padding-left:1.5rem!important}.p-sm-5{padding:3rem!important}.pt-sm-5,.py-sm-5{padding-top:3rem!important}.pr-sm-5,.px-sm-5{padding-right:3rem!important}.pb-sm-5,.py-sm-5{padding-bottom:3rem!important}.pl-sm-5,.px-sm-5{padding-left:3rem!important}.m-sm-auto{margin:auto!important}.mt-sm-auto,.my-sm-auto{margin-top:auto!important}.mr-sm-auto,.mx-sm-auto{margin-right:auto!important}.mb-sm-auto,.my-sm-auto{margin-bottom:auto!important}.ml-sm-auto,.mx-sm-auto{margin-left:auto!important}}@media (min-width:768px){.m-md-0{margin:0!important}.mt-md-0,.my-md-0{margin-top:0!important}.mr-md-0,.mx-md-0{margin-right:0!important}.mb-md-0,.my-md-0{margin-bottom:0!important}.ml-md-0,.mx-md-0{margin-left:0!important}.m-md-1{margin:.25rem!important}.mt-md-1,.my-md-1{margin-top:.25rem!important}.mr-md-1,.mx-md-1{margin-right:.25rem!important}.mb-md-1,.my-md-1{margin-bottom:.25rem!important}.ml-md-1,.mx-md-1{margin-left:.25rem!important}.m-md-2{margin:.5rem!important}.mt-md-2,.my-md-2{margin-top:.5rem!important}.mr-md-2,.mx-md-2{margin-right:.5rem!important}.mb-md-2,.my-md-2{margin-bottom:.5rem!important}.ml-md-2,.mx-md-2{margin-left:.5rem!important}.m-md-3{margin:1rem!important}.mt-md-3,.my-md-3{margin-top:1rem!important}.mr-md-3,.mx-md-3{margin-right:1rem!important}.mb-md-3,.my-md-3{margin-bottom:1rem!important}.ml-md-3,.mx-md-3{margin-left:1rem!important}.m-md-4{margin:1.5rem!important}.mt-md-4,.my-md-4{margin-top:1.5rem!important}.mr-md-4,.mx-md-4{margin-right:1.5rem!important}.mb-md-4,.my-md-4{margin-bottom:1.5rem!important}.ml-md-4,.mx-md-4{margin-left:1.5rem!important}.m-md-5{margin:3rem!important}.mt-md-5,.my-md-5{margin-top:3rem!important}.mr-md-5,.mx-md-5{margin-right:3rem!important}.mb-md-5,.my-md-5{margin-bottom:3rem!important}.ml-md-5,.mx-md-5{margin-left:3rem!important}.p-md-0{padding:0!important}.pt-md-0,.py-md-0{padding-top:0!important}.pr-md-0,.px-md-0{padding-right:0!important}.pb-md-0,.py-md-0{padding-bottom:0!important}.pl-md-0,.px-md-0{padding-left:0!important}.p-md-1{padding:.25rem!important}.pt-md-1,.py-md-1{padding-top:.25rem!important}.pr-md-1,.px-md-1{padding-right:.25rem!important}.pb-md-1,.py-md-1{padding-bottom:.25rem!important}.pl-md-1,.px-md-1{padding-left:.25rem!important}.p-md-2{padding:.5rem!important}.pt-md-2,.py-md-2{padding-top:.5rem!important}.pr-md-2,.px-md-2{padding-right:.5rem!important}.pb-md-2,.py-md-2{padding-bottom:.5rem!important}.pl-md-2,.px-md-2{padding-left:.5rem!important}.p-md-3{padding:1rem!important}.pt-md-3,.py-md-3{padding-top:1rem!important}.pr-md-3,.px-md-3{padding-right:1rem!important}.pb-md-3,.py-md-3{padding-bottom:1rem!important}.pl-md-3,.px-md-3{padding-left:1rem!important}.p-md-4{padding:1.5rem!important}.pt-md-4,.py-md-4{padding-top:1.5rem!important}.pr-md-4,.px-md-4{padding-right:1.5rem!important}.pb-md-4,.py-md-4{padding-bottom:1.5rem!important}.pl-md-4,.px-md-4{padding-left:1.5rem!important}.p-md-5{padding:3rem!important}.pt-md-5,.py-md-5{padding-top:3rem!important}.pr-md-5,.px-md-5{padding-right:3rem!important}.pb-md-5,.py-md-5{padding-bottom:3rem!important}.pl-md-5,.px-md-5{padding-left:3rem!important}.m-md-auto{margin:auto!important}.mt-md-auto,.my-md-auto{margin-top:auto!important}.mr-md-auto,.mx-md-auto{margin-right:auto!important}.mb-md-auto,.my-md-auto{margin-bottom:auto!important}.ml-md-auto,.mx-md-auto{margin-left:auto!important}}@media (min-width:992px){.m-lg-0{margin:0!important}.mt-lg-0,.my-lg-0{margin-top:0!important}.mr-lg-0,.mx-lg-0{margin-right:0!important}.mb-lg-0,.my-lg-0{margin-bottom:0!important}.ml-lg-0,.mx-lg-0{margin-left:0!important}.m-lg-1{margin:.25rem!important}.mt-lg-1,.my-lg-1{margin-top:.25rem!important}.mr-lg-1,.mx-lg-1{margin-right:.25rem!important}.mb-lg-1,.my-lg-1{margin-bottom:.25rem!important}.ml-lg-1,.mx-lg-1{margin-left:.25rem!important}.m-lg-2{margin:.5rem!important}.mt-lg-2,.my-lg-2{margin-top:.5rem!important}.mr-lg-2,.mx-lg-2{margin-right:.5rem!important}.mb-lg-2,.my-lg-2{margin-bottom:.5rem!important}.ml-lg-2,.mx-lg-2{margin-left:.5rem!important}.m-lg-3{margin:1rem!important}.mt-lg-3,.my-lg-3{margin-top:1rem!important}.mr-lg-3,.mx-lg-3{margin-right:1rem!important}.mb-lg-3,.my-lg-3{margin-bottom:1rem!important}.ml-lg-3,.mx-lg-3{margin-left:1rem!important}.m-lg-4{margin:1.5rem!important}.mt-lg-4,.my-lg-4{margin-top:1.5rem!important}.mr-lg-4,.mx-lg-4{margin-right:1.5rem!important}.mb-lg-4,.my-lg-4{margin-bottom:1.5rem!important}.ml-lg-4,.mx-lg-4{margin-left:1.5rem!important}.m-lg-5{margin:3rem!important}.mt-lg-5,.my-lg-5{margin-top:3rem!important}.mr-lg-5,.mx-lg-5{margin-right:3rem!important}.mb-lg-5,.my-lg-5{margin-bottom:3rem!important}.ml-lg-5,.mx-lg-5{margin-left:3rem!important}.p-lg-0{padding:0!important}.pt-lg-0,.py-lg-0{padding-top:0!important}.pr-lg-0,.px-lg-0{padding-right:0!important}.pb-lg-0,.py-lg-0{padding-bottom:0!important}.pl-lg-0,.px-lg-0{padding-left:0!important}.p-lg-1{padding:.25rem!important}.pt-lg-1,.py-lg-1{padding-top:.25rem!important}.pr-lg-1,.px-lg-1{padding-right:.25rem!important}.pb-lg-1,.py-lg-1{padding-bottom:.25rem!important}.pl-lg-1,.px-lg-1{padding-left:.25rem!important}.p-lg-2{padding:.5rem!important}.pt-lg-2,.py-lg-2{padding-top:.5rem!important}.pr-lg-2,.px-lg-2{padding-right:.5rem!important}.pb-lg-2,.py-lg-2{padding-bottom:.5rem!important}.pl-lg-2,.px-lg-2{padding-left:.5rem!important}.p-lg-3{padding:1rem!important}.pt-lg-3,.py-lg-3{padding-top:1rem!important}.pr-lg-3,.px-lg-3{padding-right:1rem!important}.pb-lg-3,.py-lg-3{padding-bottom:1rem!important}.pl-lg-3,.px-lg-3{padding-left:1rem!important}.p-lg-4{padding:1.5rem!important}.pt-lg-4,.py-lg-4{padding-top:1.5rem!important}.pr-lg-4,.px-lg-4{padding-right:1.5rem!important}.pb-lg-4,.py-lg-4{padding-bottom:1.5rem!important}.pl-lg-4,.px-lg-4{padding-left:1.5rem!important}.p-lg-5{padding:3rem!important}.pt-lg-5,.py-lg-5{padding-top:3rem!important}.pr-lg-5,.px-lg-5{padding-right:3rem!important}.pb-lg-5,.py-lg-5{padding-bottom:3rem!important}.pl-lg-5,.px-lg-5{padding-left:3rem!important}.m-lg-auto{margin:auto!important}.mt-lg-auto,.my-lg-auto{margin-top:auto!important}.mr-lg-auto,.mx-lg-auto{margin-right:auto!important}.mb-lg-auto,.my-lg-auto{margin-bottom:auto!important}.ml-lg-auto,.mx-lg-auto{margin-left:auto!important}}@media (min-width:1200px){.m-xl-0{margin:0!important}.mt-xl-0,.my-xl-0{margin-top:0!important}.mr-xl-0,.mx-xl-0{margin-right:0!important}.mb-xl-0,.my-xl-0{margin-bottom:0!important}.ml-xl-0,.mx-xl-0{margin-left:0!important}.m-xl-1{margin:.25rem!important}.mt-xl-1,.my-xl-1{margin-top:.25rem!important}.mr-xl-1,.mx-xl-1{margin-right:.25rem!important}.mb-xl-1,.my-xl-1{margin-bottom:.25rem!important}.ml-xl-1,.mx-xl-1{margin-left:.25rem!important}.m-xl-2{margin:.5rem!important}.mt-xl-2,.my-xl-2{margin-top:.5rem!important}.mr-xl-2,.mx-xl-2{margin-right:.5rem!important}.mb-xl-2,.my-xl-2{margin-bottom:.5rem!important}.ml-xl-2,.mx-xl-2{margin-left:.5rem!important}.m-xl-3{margin:1rem!important}.mt-xl-3,.my-xl-3{margin-top:1rem!important}.mr-xl-3,.mx-xl-3{margin-right:1rem!important}.mb-xl-3,.my-xl-3{margin-bottom:1rem!important}.ml-xl-3,.mx-xl-3{margin-left:1rem!important}.m-xl-4{margin:1.5rem!important}.mt-xl-4,.my-xl-4{margin-top:1.5rem!important}.mr-xl-4,.mx-xl-4{margin-right:1.5rem!important}.mb-xl-4,.my-xl-4{margin-bottom:1.5rem!important}.ml-xl-4,.mx-xl-4{margin-left:1.5rem!important}.m-xl-5{margin:3rem!important}.mt-xl-5,.my-xl-5{margin-top:3rem!important}.mr-xl-5,.mx-xl-5{margin-right:3rem!important}.mb-xl-5,.my-xl-5{margin-bottom:3rem!important}.ml-xl-5,.mx-xl-5{margin-left:3rem!important}.p-xl-0{padding:0!important}.pt-xl-0,.py-xl-0{padding-top:0!important}.pr-xl-0,.px-xl-0{padding-right:0!important}.pb-xl-0,.py-xl-0{padding-bottom:0!important}.pl-xl-0,.px-xl-0{padding-left:0!important}.p-xl-1{padding:.25rem!important}.pt-xl-1,.py-xl-1{padding-top:.25rem!important}.pr-xl-1,.px-xl-1{padding-right:.25rem!important}.pb-xl-1,.py-xl-1{padding-bottom:.25rem!important}.pl-xl-1,.px-xl-1{padding-left:.25rem!important}.p-xl-2{padding:.5rem!important}.pt-xl-2,.py-xl-2{padding-top:.5rem!important}.pr-xl-2,.px-xl-2{padding-right:.5rem!important}.pb-xl-2,.py-xl-2{padding-bottom:.5rem!important}.pl-xl-2,.px-xl-2{padding-left:.5rem!important}.p-xl-3{padding:1rem!important}.pt-xl-3,.py-xl-3{padding-top:1rem!important}.pr-xl-3,.px-xl-3{padding-right:1rem!important}.pb-xl-3,.py-xl-3{padding-bottom:1rem!important}.pl-xl-3,.px-xl-3{padding-left:1rem!important}.p-xl-4{padding:1.5rem!important}.pt-xl-4,.py-xl-4{padding-top:1.5rem!important}.pr-xl-4,.px-xl-4{padding-right:1.5rem!important}.pb-xl-4,.py-xl-4{padding-bottom:1.5rem!important}.pl-xl-4,.px-xl-4{padding-left:1.5rem!important}.p-xl-5{padding:3rem!important}.pt-xl-5,.py-xl-5{padding-top:3rem!important}.pr-xl-5,.px-xl-5{padding-right:3rem!important}.pb-xl-5,.py-xl-5{padding-bottom:3rem!important}.pl-xl-5,.px-xl-5{padding-left:3rem!important}.m-xl-auto{margin:auto!important}.mt-xl-auto,.my-xl-auto{margin-top:auto!important}.mr-xl-auto,.mx-xl-auto{margin-right:auto!important}.mb-xl-auto,.my-xl-auto{margin-bottom:auto!important}.ml-xl-auto,.mx-xl-auto{margin-left:auto!important}}.text-monospace{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}.text-justify{text-align:justify!important}.text-nowrap{white-space:nowrap!important}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}@media (min-width:576px){.text-sm-left{text-align:left!important}.text-sm-right{text-align:right!important}.text-sm-center{text-align:center!important}}@media (min-width:768px){.text-md-left{text-align:left!important}.text-md-right{text-align:right!important}.text-md-center{text-align:center!important}}@media (min-width:992px){.text-lg-left{text-align:left!important}.text-lg-right{text-align:right!important}.text-lg-center{text-align:center!important}}@media (min-width:1200px){.text-xl-left{text-align:left!important}.text-xl-right{text-align:right!important}.text-xl-center{text-align:center!important}}.text-lowercase{text-transform:lowercase!important}.text-uppercase{text-transform:uppercase!important}.text-capitalize{text-transform:capitalize!important}.font-weight-light{font-weight:300!important}.font-weight-normal{font-weight:400!important}.font-weight-bold{font-weight:700!important}.font-italic{font-style:italic!important}.text-white{color:#fff!important}.text-primary{color:#007bff!important}a.text-primary:focus,a.text-primary:hover{color:#0062cc!important}.text-secondary{color:#6c757d!important}a.text-secondary:focus,a.text-secondary:hover{color:#545b62!important}.text-success{color:#28a745!important}a.text-success:focus,a.text-success:hover{color:#1e7e34!important}.text-info{color:#17a2b8!important}a.text-info:focus,a.text-info:hover{color:#117a8b!important}.text-warning{color:#ffc107!important}a.text-warning:focus,a.text-warning:hover{color:#d39e00!important}.text-danger{color:#dc3545!important}a.text-danger:focus,a.text-danger:hover{color:#bd2130!important}.text-light{color:#f8f9fa!important}a.text-light:focus,a.text-light:hover{color:#dae0e5!important}.text-dark{color:#343a40!important}a.text-dark:focus,a.text-dark:hover{color:#1d2124!important}.text-body{color:#212529!important}.text-muted{color:#6c757d!important}.text-black-50{color:rgba(0,0,0,.5)!important}.text-white-50{color:rgba(255,255,255,.5)!important}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.visible{visibility:visible!important}.invisible{visibility:hidden!important}@media print{*,::after,::before{text-shadow:none!important;box-shadow:none!important}a:not(.btn){text-decoration:underline}abbr[title]::after{content:" (" attr(title) ")"}pre{white-space:pre-wrap!important}blockquote,pre{border:1px solid #adb5bd;page-break-inside:avoid}thead{display:table-header-group}img,tr{page-break-inside:avoid}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}@page{size:a3}body{min-width:992px!important}.container{min-width:992px!important}.navbar{display:none}.badge{border:1px solid #000}.table{border-collapse:collapse!important}.table td,.table th{background-color:#fff!important}.table-bordered td,.table-bordered th{border:1px solid #dee2e6!important}.table-dark{color:inherit}.table-dark tbody+tbody,.table-dark td,.table-dark th,.table-dark thead th{border-color:#dee2e6}.table .thead-dark th{color:inherit;border-color:#dee2e6}}

/*! jQuery UI - v1.12.1 - 2016-09-14
* http://jqueryui.com
* Includes: core.css, accordion.css, autocomplete.css, menu.css, button.css, controlgroup.css, checkboxradio.css, datepicker.css, dialog.css, draggable.css, resizable.css, progressbar.css, selectable.css, selectmenu.css, slider.css, sortable.css, spinner.css, tabs.css, tooltip.css, theme.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?bgShadowXPos=&bgOverlayXPos=&bgErrorXPos=&bgHighlightXPos=&bgContentXPos=&bgHeaderXPos=&bgActiveXPos=&bgHoverXPos=&bgDefaultXPos=&bgShadowYPos=&bgOverlayYPos=&bgErrorYPos=&bgHighlightYPos=&bgContentYPos=&bgHeaderYPos=&bgActiveYPos=&bgHoverYPos=&bgDefaultYPos=&bgShadowRepeat=&bgOverlayRepeat=&bgErrorRepeat=&bgHighlightRepeat=&bgContentRepeat=&bgHeaderRepeat=&bgActiveRepeat=&bgHoverRepeat=&bgDefaultRepeat=&iconsHover=url(%22images%2Fui-icons_555555_256x240.png%22)&iconsHighlight=url(%22images%2Fui-icons_777620_256x240.png%22)&iconsHeader=url(%22images%2Fui-icons_444444_256x240.png%22)&iconsError=url(%22images%2Fui-icons_cc0000_256x240.png%22)&iconsDefault=url(%22images%2Fui-icons_777777_256x240.png%22)&iconsContent=url(%22images%2Fui-icons_444444_256x240.png%22)&iconsActive=url(%22images%2Fui-icons_ffffff_256x240.png%22)&bgImgUrlShadow=&bgImgUrlOverlay=&bgImgUrlHover=&bgImgUrlHighlight=&bgImgUrlHeader=&bgImgUrlError=&bgImgUrlDefault=&bgImgUrlContent=&bgImgUrlActive=&opacityFilterShadow=Alpha(Opacity%3D30)&opacityFilterOverlay=Alpha(Opacity%3D30)&opacityShadowPerc=30&opacityOverlayPerc=30&iconColorHover=%23555555&iconColorHighlight=%23777620&iconColorHeader=%23444444&iconColorError=%23cc0000&iconColorDefault=%23777777&iconColorContent=%23444444&iconColorActive=%23ffffff&bgImgOpacityShadow=0&bgImgOpacityOverlay=0&bgImgOpacityError=95&bgImgOpacityHighlight=55&bgImgOpacityContent=75&bgImgOpacityHeader=75&bgImgOpacityActive=65&bgImgOpacityHover=75&bgImgOpacityDefault=75&bgTextureShadow=flat&bgTextureOverlay=flat&bgTextureError=flat&bgTextureHighlight=flat&bgTextureContent=flat&bgTextureHeader=flat&bgTextureActive=flat&bgTextureHover=flat&bgTextureDefault=flat&cornerRadius=3px&fwDefault=normal&ffDefault=Arial%2CHelvetica%2Csans-serif&fsDefault=1em&cornerRadiusShadow=8px&thicknessShadow=5px&offsetLeftShadow=0px&offsetTopShadow=0px&opacityShadow=.3&bgColorShadow=%23666666&opacityOverlay=.3&bgColorOverlay=%23aaaaaa&fcError=%235f3f3f&borderColorError=%23f1a899&bgColorError=%23fddfdf&fcHighlight=%23777620&borderColorHighlight=%23dad55e&bgColorHighlight=%23fffa90&fcContent=%23333333&borderColorContent=%23dddddd&bgColorContent=%23ffffff&fcHeader=%23333333&borderColorHeader=%23dddddd&bgColorHeader=%23e9e9e9&fcActive=%23ffffff&borderColorActive=%23003eff&bgColorActive=%23007fff&fcHover=%232b2b2b&borderColorHover=%23cccccc&bgColorHover=%23ededed&fcDefault=%23454545&borderColorDefault=%23c5c5c5&bgColorDefault=%23f6f6f6
* Copyright jQuery Foundation and other contributors; Licensed MIT */

.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ui-helper-reset{margin:0;padding:0;border:0;outline:0;line-height:1.3;text-decoration:none;font-size:100%;list-style:none}.ui-helper-clearfix:before,.ui-helper-clearfix:after{content:"";display:table;border-collapse:collapse}.ui-helper-clearfix:after{clear:both}.ui-helper-zfix{width:100%;height:100%;top:0;left:0;position:absolute;opacity:0;filter:Alpha(Opacity=0)}.ui-front{z-index:100}.ui-state-disabled{cursor:default!important;pointer-events:none}.ui-icon{display:inline-block;vertical-align:middle;margin-top:-.25em;position:relative;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat}.ui-widget-icon-block{left:50%;margin-left:-8px;display:block}.ui-widget-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ui-accordion .ui-accordion-header{display:block;cursor:pointer;position:relative;margin:2px 0 0 0;padding:.5em .5em .5em .7em;font-size:100%}.ui-accordion .ui-accordion-content{padding:1em 2.2em;border-top:0;overflow:auto}.ui-autocomplete{position:absolute;top:0;left:0;cursor:default}.ui-menu{list-style:none;padding:0;margin:0;display:block;outline:0}.ui-menu .ui-menu{position:absolute}.ui-menu .ui-menu-item{margin:0;cursor:pointer;list-style-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)}.ui-menu .ui-menu-item-wrapper{position:relative;padding:3px 1em 3px .4em}.ui-menu .ui-menu-divider{margin:5px 0;height:0;font-size:0;line-height:0;border-width:1px 0 0 0}.ui-menu .ui-state-focus,.ui-menu .ui-state-active{margin:-1px}.ui-menu-icons{position:relative}.ui-menu-icons .ui-menu-item-wrapper{padding-left:2em}.ui-menu .ui-icon{position:absolute;top:0;bottom:0;left:.2em;margin:auto 0}.ui-menu .ui-menu-icon{left:auto;right:0}.ui-button{padding:.4em 1em;display:inline-block;position:relative;line-height:normal;margin-right:.1em;cursor:pointer;vertical-align:middle;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:visible}.ui-button,.ui-button:link,.ui-button:visited,.ui-button:hover,.ui-button:active{text-decoration:none}.ui-button-icon-only{width:2em;box-sizing:border-box;text-indent:-9999px;white-space:nowrap}input.ui-button.ui-button-icon-only{text-indent:0}.ui-button-icon-only .ui-icon{position:absolute;top:50%;left:50%;margin-top:-8px;margin-left:-8px}.ui-button.ui-icon-notext .ui-icon{padding:0;width:2.1em;height:2.1em;text-indent:-9999px;white-space:nowrap}input.ui-button.ui-icon-notext .ui-icon{width:auto;height:auto;text-indent:0;white-space:normal;padding:.4em 1em}input.ui-button::-moz-focus-inner,button.ui-button::-moz-focus-inner{border:0;padding:0}.ui-controlgroup{vertical-align:middle;display:inline-block}.ui-controlgroup > .ui-controlgroup-item{float:left;margin-left:0;margin-right:0}.ui-controlgroup > .ui-controlgroup-item:focus,.ui-controlgroup > .ui-controlgroup-item.ui-visual-focus{z-index:9999}.ui-controlgroup-vertical > .ui-controlgroup-item{display:block;float:none;width:100%;margin-top:0;margin-bottom:0;text-align:left}.ui-controlgroup-vertical .ui-controlgroup-item{box-sizing:border-box}.ui-controlgroup .ui-controlgroup-label{padding:.4em 1em}.ui-controlgroup .ui-controlgroup-label span{font-size:80%}.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item{border-left:none}.ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item{border-top:none}.ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content{border-right:none}.ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content{border-bottom:none}.ui-controlgroup-vertical .ui-spinner-input{width:75%;width:calc( 100% - 2.4em )}.ui-controlgroup-vertical .ui-spinner .ui-spinner-up{border-top-style:solid}.ui-checkboxradio-label .ui-icon-background{box-shadow:inset 1px 1px 1px #ccc;border-radius:.12em;border:none}.ui-checkboxradio-radio-label .ui-icon-background{width:16px;height:16px;border-radius:1em;overflow:visible;border:none}.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon{background-image:none;width:8px;height:8px;border-width:4px;border-style:solid}.ui-checkboxradio-disabled{pointer-events:none}.ui-datepicker{width:17em;padding:.2em .2em 0;display:none}.ui-datepicker .ui-datepicker-header{position:relative;padding:.2em 0}.ui-datepicker .ui-datepicker-prev,.ui-datepicker .ui-datepicker-next{position:absolute;top:2px;width:1.8em;height:1.8em}.ui-datepicker .ui-datepicker-prev-hover,.ui-datepicker .ui-datepicker-next-hover{top:1px}.ui-datepicker .ui-datepicker-prev{left:2px}.ui-datepicker .ui-datepicker-next{right:2px}.ui-datepicker .ui-datepicker-prev-hover{left:1px}.ui-datepicker .ui-datepicker-next-hover{right:1px}.ui-datepicker .ui-datepicker-prev span,.ui-datepicker .ui-datepicker-next span{display:block;position:absolute;left:50%;margin-left:-8px;top:50%;margin-top:-8px}.ui-datepicker .ui-datepicker-title{margin:0 2.3em;line-height:1.8em;text-align:center}.ui-datepicker .ui-datepicker-title select{font-size:1em;margin:1px 0}.ui-datepicker select.ui-datepicker-month,.ui-datepicker select.ui-datepicker-year{width:45%}.ui-datepicker table{width:100%;font-size:.9em;border-collapse:collapse;margin:0 0 .4em}.ui-datepicker th{padding:.7em .3em;text-align:center;font-weight:bold;border:0}.ui-datepicker td{border:0;padding:1px}.ui-datepicker td span,.ui-datepicker td a{display:block;padding:.2em;text-align:right;text-decoration:none}.ui-datepicker .ui-datepicker-buttonpane{background-image:none;margin:.7em 0 0 0;padding:0 .2em;border-left:0;border-right:0;border-bottom:0}.ui-datepicker .ui-datepicker-buttonpane button{float:right;margin:.5em .2em .4em;cursor:pointer;padding:.2em .6em .3em .6em;width:auto;overflow:visible}.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current{float:left}.ui-datepicker.ui-datepicker-multi{width:auto}.ui-datepicker-multi .ui-datepicker-group{float:left}.ui-datepicker-multi .ui-datepicker-group table{width:95%;margin:0 auto .4em}.ui-datepicker-multi-2 .ui-datepicker-group{width:50%}.ui-datepicker-multi-3 .ui-datepicker-group{width:33.3%}.ui-datepicker-multi-4 .ui-datepicker-group{width:25%}.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header{border-left-width:0}.ui-datepicker-multi .ui-datepicker-buttonpane{clear:left}.ui-datepicker-row-break{clear:both;width:100%;font-size:0}.ui-datepicker-rtl{direction:rtl}.ui-datepicker-rtl .ui-datepicker-prev{right:2px;left:auto}.ui-datepicker-rtl .ui-datepicker-next{left:2px;right:auto}.ui-datepicker-rtl .ui-datepicker-prev:hover{right:1px;left:auto}.ui-datepicker-rtl .ui-datepicker-next:hover{left:1px;right:auto}.ui-datepicker-rtl .ui-datepicker-buttonpane{clear:right}.ui-datepicker-rtl .ui-datepicker-buttonpane button{float:left}.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,.ui-datepicker-rtl .ui-datepicker-group{float:right}.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header{border-right-width:0;border-left-width:1px}.ui-datepicker .ui-icon{display:block;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat;left:.5em;top:.3em}.ui-dialog{position:absolute;top:0;left:0;padding:.2em;outline:0}.ui-dialog .ui-dialog-titlebar{padding:.4em 1em;position:relative}.ui-dialog .ui-dialog-title{float:left;margin:.1em 0;white-space:nowrap;width:90%;overflow:hidden;text-overflow:ellipsis}.ui-dialog .ui-dialog-titlebar-close{position:absolute;right:.3em;top:50%;width:20px;margin:-10px 0 0 0;padding:1px;height:20px}.ui-dialog .ui-dialog-content{position:relative;border:0;padding:.5em 1em;background:none;overflow:auto}.ui-dialog .ui-dialog-buttonpane{text-align:left;border-width:1px 0 0 0;background-image:none;margin-top:.5em;padding:.3em 1em .5em .4em}.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset{float:right}.ui-dialog .ui-dialog-buttonpane button{margin:.5em .4em .5em 0;cursor:pointer}.ui-dialog .ui-resizable-n{height:2px;top:0}.ui-dialog .ui-resizable-e{width:2px;right:0}.ui-dialog .ui-resizable-s{height:2px;bottom:0}.ui-dialog .ui-resizable-w{width:2px;left:0}.ui-dialog .ui-resizable-se,.ui-dialog .ui-resizable-sw,.ui-dialog .ui-resizable-ne,.ui-dialog .ui-resizable-nw{width:7px;height:7px}.ui-dialog .ui-resizable-se{right:0;bottom:0}.ui-dialog .ui-resizable-sw{left:0;bottom:0}.ui-dialog .ui-resizable-ne{right:0;top:0}.ui-dialog .ui-resizable-nw{left:0;top:0}.ui-draggable .ui-dialog-titlebar{cursor:move}.ui-draggable-handle{-ms-touch-action:none;touch-action:none}.ui-resizable{position:relative}.ui-resizable-handle{position:absolute;font-size:0.1px;display:block;-ms-touch-action:none;touch-action:none}.ui-resizable-disabled .ui-resizable-handle,.ui-resizable-autohide .ui-resizable-handle{display:none}.ui-resizable-n{cursor:n-resize;height:7px;width:100%;top:-5px;left:0}.ui-resizable-s{cursor:s-resize;height:7px;width:100%;bottom:-5px;left:0}.ui-resizable-e{cursor:e-resize;width:7px;right:-5px;top:0;height:100%}.ui-resizable-w{cursor:w-resize;width:7px;left:-5px;top:0;height:100%}.ui-resizable-se{cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.ui-resizable-sw{cursor:sw-resize;width:9px;height:9px;left:-5px;bottom:-5px}.ui-resizable-nw{cursor:nw-resize;width:9px;height:9px;left:-5px;top:-5px}.ui-resizable-ne{cursor:ne-resize;width:9px;height:9px;right:-5px;top:-5px}.ui-progressbar{height:2em;text-align:left;overflow:hidden}.ui-progressbar .ui-progressbar-value{margin:-1px;height:100%}.ui-progressbar .ui-progressbar-overlay{background:url(data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==);height:100%;filter:alpha(opacity=25);opacity:0.25}.ui-progressbar-indeterminate .ui-progressbar-value{background-image:none}.ui-selectable{-ms-touch-action:none;touch-action:none}.ui-selectable-helper{position:absolute;z-index:100;border:1px dotted black}.ui-selectmenu-menu{padding:0;margin:0;position:absolute;top:0;left:0;display:none}.ui-selectmenu-menu .ui-menu{overflow:auto;overflow-x:hidden;padding-bottom:1px}.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup{font-size:1em;font-weight:bold;line-height:1.5;padding:2px 0.4em;margin:0.5em 0 0 0;height:auto;border:0}.ui-selectmenu-open{display:block}.ui-selectmenu-text{display:block;margin-right:20px;overflow:hidden;text-overflow:ellipsis}.ui-selectmenu-button.ui-button{text-align:left;white-space:nowrap;width:14em}.ui-selectmenu-icon.ui-icon{float:right;margin-top:0}.ui-slider{position:relative;text-align:left}.ui-slider .ui-slider-handle{position:absolute;z-index:2;width:1.2em;height:1.2em;cursor:default;-ms-touch-action:none;touch-action:none}.ui-slider .ui-slider-range{position:absolute;z-index:1;font-size:.7em;display:block;border:0;background-position:0 0}.ui-slider.ui-state-disabled .ui-slider-handle,.ui-slider.ui-state-disabled .ui-slider-range{filter:inherit}.ui-slider-horizontal{height:.8em}.ui-slider-horizontal .ui-slider-handle{top:-.3em;margin-left:-.6em}.ui-slider-horizontal .ui-slider-range{top:0;height:100%}.ui-slider-horizontal .ui-slider-range-min{left:0}.ui-slider-horizontal .ui-slider-range-max{right:0}.ui-slider-vertical{width:.8em;height:100px}.ui-slider-vertical .ui-slider-handle{left:-.3em;margin-left:0;margin-bottom:-.6em}.ui-slider-vertical .ui-slider-range{left:0;width:100%}.ui-slider-vertical .ui-slider-range-min{bottom:0}.ui-slider-vertical .ui-slider-range-max{top:0}.ui-sortable-handle{-ms-touch-action:none;touch-action:none}.ui-spinner{position:relative;display:inline-block;overflow:hidden;padding:0;vertical-align:middle}.ui-spinner-input{border:none;background:none;color:inherit;padding:.222em 0;margin:.2em 0;vertical-align:middle;margin-left:.4em;margin-right:2em}.ui-spinner-button{width:1.6em;height:50%;font-size:.5em;padding:0;margin:0;text-align:center;position:absolute;cursor:default;display:block;overflow:hidden;right:0}.ui-spinner a.ui-spinner-button{border-top-style:none;border-bottom-style:none;border-right-style:none}.ui-spinner-up{top:0}.ui-spinner-down{bottom:0}.ui-tabs{position:relative;padding:.2em}.ui-tabs .ui-tabs-nav{margin:0;padding:.2em .2em 0}.ui-tabs .ui-tabs-nav li{list-style:none;float:left;position:relative;top:0;margin:1px .2em 0 0;border-bottom-width:0;padding:0;white-space:nowrap}.ui-tabs .ui-tabs-nav .ui-tabs-anchor{float:left;padding:.5em 1em;text-decoration:none}.ui-tabs .ui-tabs-nav li.ui-tabs-active{margin-bottom:-1px;padding-bottom:1px}.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor{cursor:text}.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor{cursor:pointer}.ui-tabs .ui-tabs-panel{display:block;border-width:0;padding:1em 1.4em;background:none}.ui-tooltip{padding:8px;position:absolute;z-index:9999;max-width:300px}body .ui-tooltip{border-width:2px}.ui-widget{font-family:Arial,Helvetica,sans-serif;font-size:1em}.ui-widget .ui-widget{font-size:1em}.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button{font-family:Arial,Helvetica,sans-serif;font-size:1em}.ui-widget.ui-widget-content{border:1px solid #c5c5c5}.ui-widget-content{border:1px solid #ddd;background:#fff;color:#333}.ui-widget-content a{color:#333}.ui-widget-header{border:1px solid #ddd;background:#e9e9e9;color:#333;font-weight:bold}.ui-widget-header a{color:#333}.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default,.ui-button,html .ui-button.ui-state-disabled:hover,html .ui-button.ui-state-disabled:active{border:1px solid #c5c5c5;background:#f6f6f6;font-weight:normal;color:#454545}.ui-state-default a,.ui-state-default a:link,.ui-state-default a:visited,a.ui-button,a:link.ui-button,a:visited.ui-button,.ui-button{color:#454545;text-decoration:none}.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus,.ui-button:hover,.ui-button:focus{border:1px solid #ccc;background:#ededed;font-weight:normal;color:#2b2b2b}.ui-state-hover a,.ui-state-hover a:hover,.ui-state-hover a:link,.ui-state-hover a:visited,.ui-state-focus a,.ui-state-focus a:hover,.ui-state-focus a:link,.ui-state-focus a:visited,a.ui-button:hover,a.ui-button:focus{color:#2b2b2b;text-decoration:none}.ui-visual-focus{box-shadow:0 0 3px 1px rgb(94,158,214)}.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active,a.ui-button:active,.ui-button:active,.ui-button.ui-state-active:hover{border:1px solid #003eff;background:#007fff;font-weight:normal;color:#fff}.ui-icon-background,.ui-state-active .ui-icon-background{border:#003eff;background-color:#fff}.ui-state-active a,.ui-state-active a:link,.ui-state-active a:visited{color:#fff;text-decoration:none}.ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight{border:1px solid #dad55e;background:#fffa90;color:#777620}.ui-state-checked{border:1px solid #dad55e;background:#fffa90}.ui-state-highlight a,.ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a{color:#777620}.ui-state-error,.ui-widget-content .ui-state-error,.ui-widget-header .ui-state-error{border:1px solid #f1a899;background:#fddfdf;color:#5f3f3f}.ui-state-error a,.ui-widget-content .ui-state-error a,.ui-widget-header .ui-state-error a{color:#5f3f3f}.ui-state-error-text,.ui-widget-content .ui-state-error-text,.ui-widget-header .ui-state-error-text{color:#5f3f3f}.ui-priority-primary,.ui-widget-content .ui-priority-primary,.ui-widget-header .ui-priority-primary{font-weight:bold}.ui-priority-secondary,.ui-widget-content .ui-priority-secondary,.ui-widget-header .ui-priority-secondary{opacity:.7;filter:Alpha(Opacity=70);font-weight:normal}.ui-state-disabled,.ui-widget-content .ui-state-disabled,.ui-widget-header .ui-state-disabled{opacity:.35;filter:Alpha(Opacity=35);background-image:none}.ui-state-disabled .ui-icon{filter:Alpha(Opacity=35)}.ui-icon{width:16px;height:16px}.ui-icon,.ui-widget-content .ui-icon{background-image:url(a4a8691ca395136aee47.png)}.ui-widget-header .ui-icon{background-image:url(a4a8691ca395136aee47.png)}.ui-state-hover .ui-icon,.ui-state-focus .ui-icon,.ui-button:hover .ui-icon,.ui-button:focus .ui-icon{background-image:url(0d6de499db574dd313c1.png)}.ui-state-active .ui-icon,.ui-button:active .ui-icon{background-image:url(1e360be5458b462df279.png)}.ui-state-highlight .ui-icon,.ui-button .ui-state-highlight.ui-icon{background-image:url(e084661154ad58415fa1.png)}.ui-state-error .ui-icon,.ui-state-error-text .ui-icon{background-image:url(dc29114100c22b4660e3.png)}.ui-button .ui-icon{background-image:url(853909d9945e29dd80d5.png)}.ui-icon-blank{background-position:16px 16px}.ui-icon-caret-1-n{background-position:0 0}.ui-icon-caret-1-ne{background-position:-16px 0}.ui-icon-caret-1-e{background-position:-32px 0}.ui-icon-caret-1-se{background-position:-48px 0}.ui-icon-caret-1-s{background-position:-65px 0}.ui-icon-caret-1-sw{background-position:-80px 0}.ui-icon-caret-1-w{background-position:-96px 0}.ui-icon-caret-1-nw{background-position:-112px 0}.ui-icon-caret-2-n-s{background-position:-128px 0}.ui-icon-caret-2-e-w{background-position:-144px 0}.ui-icon-triangle-1-n{background-position:0 -16px}.ui-icon-triangle-1-ne{background-position:-16px -16px}.ui-icon-triangle-1-e{background-position:-32px -16px}.ui-icon-triangle-1-se{background-position:-48px -16px}.ui-icon-triangle-1-s{background-position:-65px -16px}.ui-icon-triangle-1-sw{background-position:-80px -16px}.ui-icon-triangle-1-w{background-position:-96px -16px}.ui-icon-triangle-1-nw{background-position:-112px -16px}.ui-icon-triangle-2-n-s{background-position:-128px -16px}.ui-icon-triangle-2-e-w{background-position:-144px -16px}.ui-icon-arrow-1-n{background-position:0 -32px}.ui-icon-arrow-1-ne{background-position:-16px -32px}.ui-icon-arrow-1-e{background-position:-32px -32px}.ui-icon-arrow-1-se{background-position:-48px -32px}.ui-icon-arrow-1-s{background-position:-65px -32px}.ui-icon-arrow-1-sw{background-position:-80px -32px}.ui-icon-arrow-1-w{background-position:-96px -32px}.ui-icon-arrow-1-nw{background-position:-112px -32px}.ui-icon-arrow-2-n-s{background-position:-128px -32px}.ui-icon-arrow-2-ne-sw{background-position:-144px -32px}.ui-icon-arrow-2-e-w{background-position:-160px -32px}.ui-icon-arrow-2-se-nw{background-position:-176px -32px}.ui-icon-arrowstop-1-n{background-position:-192px -32px}.ui-icon-arrowstop-1-e{background-position:-208px -32px}.ui-icon-arrowstop-1-s{background-position:-224px -32px}.ui-icon-arrowstop-1-w{background-position:-240px -32px}.ui-icon-arrowthick-1-n{background-position:1px -48px}.ui-icon-arrowthick-1-ne{background-position:-16px -48px}.ui-icon-arrowthick-1-e{background-position:-32px -48px}.ui-icon-arrowthick-1-se{background-position:-48px -48px}.ui-icon-arrowthick-1-s{background-position:-64px -48px}.ui-icon-arrowthick-1-sw{background-position:-80px -48px}.ui-icon-arrowthick-1-w{background-position:-96px -48px}.ui-icon-arrowthick-1-nw{background-position:-112px -48px}.ui-icon-arrowthick-2-n-s{background-position:-128px -48px}.ui-icon-arrowthick-2-ne-sw{background-position:-144px -48px}.ui-icon-arrowthick-2-e-w{background-position:-160px -48px}.ui-icon-arrowthick-2-se-nw{background-position:-176px -48px}.ui-icon-arrowthickstop-1-n{background-position:-192px -48px}.ui-icon-arrowthickstop-1-e{background-position:-208px -48px}.ui-icon-arrowthickstop-1-s{background-position:-224px -48px}.ui-icon-arrowthickstop-1-w{background-position:-240px -48px}.ui-icon-arrowreturnthick-1-w{background-position:0 -64px}.ui-icon-arrowreturnthick-1-n{background-position:-16px -64px}.ui-icon-arrowreturnthick-1-e{background-position:-32px -64px}.ui-icon-arrowreturnthick-1-s{background-position:-48px -64px}.ui-icon-arrowreturn-1-w{background-position:-64px -64px}.ui-icon-arrowreturn-1-n{background-position:-80px -64px}.ui-icon-arrowreturn-1-e{background-position:-96px -64px}.ui-icon-arrowreturn-1-s{background-position:-112px -64px}.ui-icon-arrowrefresh-1-w{background-position:-128px -64px}.ui-icon-arrowrefresh-1-n{background-position:-144px -64px}.ui-icon-arrowrefresh-1-e{background-position:-160px -64px}.ui-icon-arrowrefresh-1-s{background-position:-176px -64px}.ui-icon-arrow-4{background-position:0 -80px}.ui-icon-arrow-4-diag{background-position:-16px -80px}.ui-icon-extlink{background-position:-32px -80px}.ui-icon-newwin{background-position:-48px -80px}.ui-icon-refresh{background-position:-64px -80px}.ui-icon-shuffle{background-position:-80px -80px}.ui-icon-transfer-e-w{background-position:-96px -80px}.ui-icon-transferthick-e-w{background-position:-112px -80px}.ui-icon-folder-collapsed{background-position:0 -96px}.ui-icon-folder-open{background-position:-16px -96px}.ui-icon-document{background-position:-32px -96px}.ui-icon-document-b{background-position:-48px -96px}.ui-icon-note{background-position:-64px -96px}.ui-icon-mail-closed{background-position:-80px -96px}.ui-icon-mail-open{background-position:-96px -96px}.ui-icon-suitcase{background-position:-112px -96px}.ui-icon-comment{background-position:-128px -96px}.ui-icon-person{background-position:-144px -96px}.ui-icon-print{background-position:-160px -96px}.ui-icon-trash{background-position:-176px -96px}.ui-icon-locked{background-position:-192px -96px}.ui-icon-unlocked{background-position:-208px -96px}.ui-icon-bookmark{background-position:-224px -96px}.ui-icon-tag{background-position:-240px -96px}.ui-icon-home{background-position:0 -112px}.ui-icon-flag{background-position:-16px -112px}.ui-icon-calendar{background-position:-32px -112px}.ui-icon-cart{background-position:-48px -112px}.ui-icon-pencil{background-position:-64px -112px}.ui-icon-clock{background-position:-80px -112px}.ui-icon-disk{background-position:-96px -112px}.ui-icon-calculator{background-position:-112px -112px}.ui-icon-zoomin{background-position:-128px -112px}.ui-icon-zoomout{background-position:-144px -112px}.ui-icon-search{background-position:-160px -112px}.ui-icon-wrench{background-position:-176px -112px}.ui-icon-gear{background-position:-192px -112px}.ui-icon-heart{background-position:-208px -112px}.ui-icon-star{background-position:-224px -112px}.ui-icon-link{background-position:-240px -112px}.ui-icon-cancel{background-position:0 -128px}.ui-icon-plus{background-position:-16px -128px}.ui-icon-plusthick{background-position:-32px -128px}.ui-icon-minus{background-position:-48px -128px}.ui-icon-minusthick{background-position:-64px -128px}.ui-icon-close{background-position:-80px -128px}.ui-icon-closethick{background-position:-96px -128px}.ui-icon-key{background-position:-112px -128px}.ui-icon-lightbulb{background-position:-128px -128px}.ui-icon-scissors{background-position:-144px -128px}.ui-icon-clipboard{background-position:-160px -128px}.ui-icon-copy{background-position:-176px -128px}.ui-icon-contact{background-position:-192px -128px}.ui-icon-image{background-position:-208px -128px}.ui-icon-video{background-position:-224px -128px}.ui-icon-script{background-position:-240px -128px}.ui-icon-alert{background-position:0 -144px}.ui-icon-info{background-position:-16px -144px}.ui-icon-notice{background-position:-32px -144px}.ui-icon-help{background-position:-48px -144px}.ui-icon-check{background-position:-64px -144px}.ui-icon-bullet{background-position:-80px -144px}.ui-icon-radio-on{background-position:-96px -144px}.ui-icon-radio-off{background-position:-112px -144px}.ui-icon-pin-w{background-position:-128px -144px}.ui-icon-pin-s{background-position:-144px -144px}.ui-icon-play{background-position:0 -160px}.ui-icon-pause{background-position:-16px -160px}.ui-icon-seek-next{background-position:-32px -160px}.ui-icon-seek-prev{background-position:-48px -160px}.ui-icon-seek-end{background-position:-64px -160px}.ui-icon-seek-start{background-position:-80px -160px}.ui-icon-seek-first{background-position:-80px -160px}.ui-icon-stop{background-position:-96px -160px}.ui-icon-eject{background-position:-112px -160px}.ui-icon-volume-off{background-position:-128px -160px}.ui-icon-volume-on{background-position:-144px -160px}.ui-icon-power{background-position:0 -176px}.ui-icon-signal-diag{background-position:-16px -176px}.ui-icon-signal{background-position:-32px -176px}.ui-icon-battery-0{background-position:-48px -176px}.ui-icon-battery-1{background-position:-64px -176px}.ui-icon-battery-2{background-position:-80px -176px}.ui-icon-battery-3{background-position:-96px -176px}.ui-icon-circle-plus{background-position:0 -192px}.ui-icon-circle-minus{background-position:-16px -192px}.ui-icon-circle-close{background-position:-32px -192px}.ui-icon-circle-triangle-e{background-position:-48px -192px}.ui-icon-circle-triangle-s{background-position:-64px -192px}.ui-icon-circle-triangle-w{background-position:-80px -192px}.ui-icon-circle-triangle-n{background-position:-96px -192px}.ui-icon-circle-arrow-e{background-position:-112px -192px}.ui-icon-circle-arrow-s{background-position:-128px -192px}.ui-icon-circle-arrow-w{background-position:-144px -192px}.ui-icon-circle-arrow-n{background-position:-160px -192px}.ui-icon-circle-zoomin{background-position:-176px -192px}.ui-icon-circle-zoomout{background-position:-192px -192px}.ui-icon-circle-check{background-position:-208px -192px}.ui-icon-circlesmall-plus{background-position:0 -208px}.ui-icon-circlesmall-minus{background-position:-16px -208px}.ui-icon-circlesmall-close{background-position:-32px -208px}.ui-icon-squaresmall-plus{background-position:-48px -208px}.ui-icon-squaresmall-minus{background-position:-64px -208px}.ui-icon-squaresmall-close{background-position:-80px -208px}.ui-icon-grip-dotted-vertical{background-position:0 -224px}.ui-icon-grip-dotted-horizontal{background-position:-16px -224px}.ui-icon-grip-solid-vertical{background-position:-32px -224px}.ui-icon-grip-solid-horizontal{background-position:-48px -224px}.ui-icon-gripsmall-diagonal-se{background-position:-64px -224px}.ui-icon-grip-diagonal-se{background-position:-80px -224px}.ui-corner-all,.ui-corner-top,.ui-corner-left,.ui-corner-tl{border-top-left-radius:3px}.ui-corner-all,.ui-corner-top,.ui-corner-right,.ui-corner-tr{border-top-right-radius:3px}.ui-corner-all,.ui-corner-bottom,.ui-corner-left,.ui-corner-bl{border-bottom-left-radius:3px}.ui-corner-all,.ui-corner-bottom,.ui-corner-right,.ui-corner-br{border-bottom-right-radius:3px}.ui-widget-overlay{background:#aaa;opacity:.003;filter:Alpha(Opacity=.3)}.ui-widget-shadow{-webkit-box-shadow:0 0 5px #666;box-shadow:0 0 5px #666}
:root {
    font-size: 16px;
    height: 100%;
    --top_navbar_height: 53px;
    --sticky_search_wrapper: 44px;
    /* Navigation: :root → --bottom_nav_height
       Purpose: fixed height of #bottom_nav_bar (native-app-style bottom navigation,
       narrow viewport only — see button-repositioning CSS). Single source of truth:
       #details_div reads this directly (below), and handleAreaHeightNewLayout() reads
       the same value via getComputedStyle() rather than hardcoding a second number —
       avoids the drift that caused the --sticky_search_wrapper/Safari height bug.
       Must match #bottom_nav_bar's actual CSS height (56px, set in step 1). */
    --bottom_nav_height: 56px;
    /*this is serving also as the margin-top of #details_div*/
    --details_div_top_padding: 10px;
    /* this div is the main one which is encapsulating many divs in pages.*/
    --display_div_padding_top: 5px;
    --hr_main_line_height: 1px;
    --hr_line_height: 1px;
    --table_search_div: 41px;
    /*#table_search_div is search input wrapper div on top of tables or side panels including top 10 padding. only used to make minus in small screen size since input div is invisible*/
    --home_page_lg_size: 63px;
    /*calculation includes: top navbar height(--top_navbar_height:53)+(--details_div_top_padding:10)*/
    --home_page_lg_side_panel: 63px;
    /* for home and settings page with navbar*/
    --admin_page_side_panel: 10px;
    /* Admin: just padding, no navbar */
    /*(#table_search_div height:41 including bottom 10 padding (auto-given not set by hand)+calculation includes: top navbar height(--top_navbar_height:53)+(--details_div_top_padding:10))*/
    /*----------------------------------------------*/
    /*--process_page_empty:110px;*/


    --flex_control_btns_single: 60.6px;
    --flex_control_btns_double: 132.6px;
    /*height of #side_details container in different sizes which is including control btns on top after 576 size as flex*/
    --flex_control_btns_triple: 142px;
    /*------------------------------*/
    --top_fieldset_widget_single: 47.9px;
    /*this is automated height given to widget including fieldset on top of home page contacts 47.9*/
    --top_fieldset_widget_tripple: 100.5px;
    /*this is automated height given to widget including fieldset on top of home page sent 100.5*/
    --top_fieldset_widget_four: 126.8px;
    /*this is automated height given to widget including fieldset on top of home page sent 100.5*/
    /*-----------------------------------*/
    --top_selection_btns_lg_div: 40px;
    /*auto given not set by hand and including 4px bottom padding*/
    --top_selection_btns_sm_div: 34px;
    /*auto given not set by hand and including 4px bottom padding*/
    /*displayinnerwindow section top information section*/
    --display_info_section: 59px;
    /*55px is height and 4 px is margin*/
    --li_bottom_margin: 2px;
    --li_border_radius: 3px;
    --close_btn_font_size: 18px;
    /*-----------------------------------*
    /*below are colors used in program*/
    --dark_content_bck: #e6e6e6;
    --medium_content_bck: #ededed;
    --lightest_background_gray: #fbfbfb;
    --light_background_gray: #eaeded;
    --ezinq_theme_color: #03396c;
    --background_color_btn_primary: #474069;
    --background_color_common_hover: #012240;
    --background_color_common_active: #001120;
    --button_text_color: #000000;
    --li_hover_color: lightgray;
    --line_hover_color: #C0C0C0;
    --button_hover_color: #b9d3eb;
    --tr_focused_color: #97bbdb;
    --btn_fill_light: #6495ed;
    --background_color_dark_blue: #3498db;
    --background_color_div_light: #f8f9fb;
    --background_color_div_light_hover: #c6c7c8;
    --background_color_div_light_btn_active: #9e9fa0;
    --public_border: #dfe0e1;
    --list_hover_background_color: #b9d3eb;
    --icon_colors: #a9a9a9;
    --icon_hover: #2ecc71;
    --entry_light_grey: #eff3f4;
    --light_border_grey: #e3eaec;
    --ultra_light_border_grey: #f1f4f5;
    --extreme_light_border_grey: #eef2f3;
    --attention_red: #ffb833;
    --attention_red_hover: #e59809;
    --top_title_darkest: #323232;
    --top_title_dark: #356089;
    --top_title_light: #6788a6;
    --top_title_bottom_border: #6f6f6f;
    --fill_color_gray: #71797E;
    --fill_color_focus_light_blue: #55a9e1;
    --section_color_light_blue: #f0ffff;
    --sidebar-surface: #f9fafb;
    --section_color_light_ivory: #FFFFF0;
    --mild_blue: #00b0eb;
    --light_background_border: #e5e7eb;
    --hint_color: #C7C7CD;
    --focus_input_bck_light_blue: #e8f0fe;
    --close_btn_color: gray;
    --close_btn_active: #AA4A44;
    /*some tbl column width sizes*/
    /*packing list width sizes*/
    --pack_checkbox_col_lg: 5%;
    --pack_img_col_lg: 7%;
    --pack_img_col_sm: 10%;
    --pack_other_col_lg: 4.886%;
    /*18 columns in a row using same*/
    --pack_stretched_col_lg: 11.886%;
    /*img section 10 + pack_other_col_lg 4.72 used in packing title wrapper div stretching to take space of multiple th size*/
    --pack_other_col_sm: 12.14%;
    /*7 columns in a row using same*/
    --pack_stretched_col_sm: 22.14%;
    /*img section 10 + pack_other_col_sm 12.14 used in packing title wrapper div stretching to take space of multiple th size*/
    /*below container page table side column width*/
    --con_other_col_lg: 20%;
    --con_visual_col_lg: 16.66%;
    /*below container page list view column width*/
    --con_list_view_col_lg: 5.88%;
    --con_list_view_stretched_col_lg: 11%;
    --con_list_view_col_sm: 14.28%;
    --con_list_view_stretched_col_sm: 28.56%;
    /* =====================================================
   SECTION ACCENT SYSTEM
   CSS Variables defined here for easy global changes
   ===================================================== */

    /* Section accent colors */
    --accent-workbench: #e8a838;
    --accent-images: #5b8db8;
    --accent-partners: #8b6fb5;
    --accent-files: #3a9e8f;
    --accent-orders: #4a9e5c;
    --accent-sale: #5c9e4a;
    --accent-sent-inq: #3478be;
    --accent-received-inq: #d27832;
    --accent-draft: #6482a0;
    --accent-batch-inq: #5a50b4;
    --accent-forward: #be5064;
    --accent-company-detail: #00a8a8;
    --text_muted_color: #6c757d;
    /*workbench file purpose colors*/
    --purpose-general: #6c757d;
    /* neutral gray    — general purpose  */
    --purpose-purchase: #28a745;
    /* green           — buying/inbound   */
    --purpose-sale: #dc3545;
    /* red             — selling/outbound */
    --purpose-tradesman: #9b59b6;
    /* purple          — middleman/broker */
    --guest_adjustment_color: red;
    --guest_adjustment_bck_color: #fff;
    --note_history_source_indicator:#0071e3;
    --wechat-green:#07C160;

    /*===========================================*/
    --product-img-col-size: 88px;
    --contact-img-col-size: 56px;
    --icon-checkbox-col-size: 36px;
    --table_row_height: 75px;
    /* ===== Packing Share (guest supplier page) ===== */
    --pkgshare-paper: #F1EEE4;
    --pkgshare-paper-dim: #E7E2D2;
    --pkgshare-card: #FBF9F3;
    --pkgshare-ink: #26241D;
    --pkgshare-ink-soft: #6B6656;
    --pkgshare-navy: #223A5E;
    --pkgshare-navy-dark: #17283F;
    --pkgshare-amber: #C97F17;
    --pkgshare-amber-bg: #F6E6C6;
    --pkgshare-green: #3F7D58;
    --pkgshare-green-bg: #DCEBE1;
    --pkgshare-red: #B7402F;
    --pkgshare-red-bg: #F3DFDA;
    --pkgshare-line: #CFC7AC;
    --pkgshare-radius: 14px;
    --pkgshare-shadow: 0 1px 0 rgba(38,36,29,0.04), 0 8px 20px -12px rgba(38,36,29,0.25);
    --pkgshare-font-display: "Arial Narrow", "Franklin Gothic Bold", "Microsoft Yahei", sans-serif;
    --pkgshare-font-body: "Helvetica Neue", Tahoma, Helvetica, Arial, "Microsoft Yahei", sans-serif;
    --pkgshare-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;

}

* {
    box-sizing: border-box;
    /* scrollbar-width: thin; */
}

body::-webkit-scrollbar {
    width: 12px;
}

html {
    font-size: 14px;
    height: 100%;
}

body {
    /* scrollbar-width: thin; */
    background-color: #ffffff;
    /*font-family: "Helvetica Neue","Arial_unicode_MS";*/
    font-family: Helvetica Neue, Tahoma, Helvetica, Arial, "Microsoft Yahei", "????", STXihei, "????", sans-serif;
    /*font-size:8px;*/
    margin: 0 auto;
    height: 100%;
    height: 100vh;
    overflow: hidden;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #D8D8D8 !important;
    opacity: 1;
    /* Firefox */
}

:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: red;
}

::-ms-input-placeholder {
    /* Microsoft Edge */
    color: red;
}

/* When #side_details is relocated into the hamburger drawer,
   force vertical stacking regardless of inner Bootstrap flex utility classes.
   Scoped tightly so desktop/tablet sidebar layout is completely unaffected. */
#sidebar_drawer_section #side_details .d-flex {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
}

.hidden {
    display: none;
}

label[for]:hover {
    cursor: pointer;
}

a.language_menu {
    display: table;
    padding-left: 0;
}

a.language_selection {
    padding: 5px;
}

a.language_menu span {
    display: inline-block;
    vertical-align: middle;
}

img[src="/assets/no_image.png"] {
    border: 1px solid grey;
}

/*====================================*/
/*autocomplete related css*/
.autocomplete-items {
    width: 100%;
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 100000;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    /*this property is changed in collapse navbar size which is 771 back to 0*/
    right: 0;
    max-height: 300px;
    /*min-height:100px;*/
    overflow: auto;
    outline: none;
    background-color: #fff;
    border-radius: 5px;


}

.autocomplete-items>div {
    padding: 5px 10px 5px 10px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
    display: flex;
    justify-content: center;
    align-items: center;

}

.autocomplete-items>div:hover {
    /*when hovering an item:*/
    background-color: #e9e9e9;
}

.autocomplete-active {
    /*when navigating through the items using the arrow keys:*/
    background-color: DodgerBlue !important;
    color: #ffffff;
}

.search_result_img_div {
    /*for long searchbox inner div section for img - fixed px flex-basis so it no longer shrinks with window resize*/
    flex: 0 0 44px;
    padding: 10px;


}
.search_result_img_div img {
    /*fixed square box regardless of container width, cropped to fit instead of stretched*/
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 4px;
}
.search_result_text_div {
    /*for long searchbox inner div section for text - merged from duplicate rule below; width:80% removed (was fighting flex:1 and causing the resize-shrink bug), font-size unified to 13px*/
    flex: 1;
    min-width: 0;
    padding: 10px;
    font-size: 11px;
    line-height: 1.3;
}

.search_result_img_div.search_sm {
    /*for narrow searchbox inner div section for img*/
    width: 20%;
    padding: 10px;
    height: 100%;


}

.search_result_text_div.search_sm {
    /*for narrow searchbox inner div section for text*/
    width: 80%;
    padding: 10px;
    height: 100%;
    font-size: 0.8em;

}

/*end of autocomplete related css*/
/*=========================================*/
/*very commonly used for arranging most outline of a page*/
.btn_writing {
    overflow-y: auto;
    padding: 0;
    background-color: var(--background_color_div_light);
}

.btn_writing button {
    font-weight: normal;
    font-size: 16px;
}

.btn_writing button[disabled] {
    font-weight: normal;
}

.btn_writing,
.settings_btn_writing {
    height: calc(100vh - var(--home_page_lg_side_panel));
    overflow-y: auto;
    overflow-x: hidden;
}

#contact_table {
    padding: 0;
    /*border:1px solid #f0f3f4;*/
}

#display-div {
    padding: 0 0 0 0;
    z-index: 1;
    background-color: white;
    /*the main reason we have to keep it white, otherwise in the very beginning opening partially it shows its color before page loads and unpleasant appearance*/
    height: 100%;
    text-align: center;
}

#display-div .scrollable_area {
    padding: 0 10px !important;
}

/*======= START OF MODAL WINDOW STYLES =======*/
.modal-dialog {
    /* overflow-y: initial !important; */
    outline: none;
}

.modal-content {
    border-radius: 14px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .18);
    border: none;
    /* added: fix footer pushup on all modals */
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    /*overflow:hidden; is for making the bottom of the modals with radius.
    if you want bottom sharp cornered by only top ones with radius, remove the code below overflow:hidden;*/
    overflow: hidden;
}

.modal-header {
    background: #f7f8fa;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    padding: 9px 15px;
    color: black;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.modal-title {
    font-weight: 600;
    font-size: 1.05rem;
    padding-left: 10px;
    padding-right: 10px;
    overflow-x: hidden;
    white-space: nowrap;
}

/* Safety net — modal-body scrolls by default so forgetting scrollable_body 
   never causes content to push footer off screen */
.modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.modal-footer {
    border-top: 1px solid rgba(0, 0, 0, .08);
    background: #f7f8fa;
    padding: 12px 18px;
}

.modal-xl {
    width: 90%;
    max-width: 1200px;
}

.modal.fade.modal-right .modal-dialog {
    transform: translate(125%, 0px);
}

.modal-backdrop.top_backdrop {
    z-index: 1060 !important;
}

.modal.show.modal-right .modal-dialog {
    transform: none;
}

.scrollable_dialog {
    overflow-y: initial !important
}

.scrollable_body {
    min-height: 200px;
    max-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

.modal-body-padded {
    padding: 0 10px;
}

.modal-body-padded-full {
    padding: 10px;
}

.modal-body.scrollable_body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

.scrollable_body_with_id {
    min-height: 200px;
    max-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    height: 400px;
}

.scrollable_body_full_height {
    overflow-y: auto;
    margin: 0;
    padding: 0;
    height: 100%;
}

.modal.in {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -moz-transform: translateZ(0);

}

/* START OF EXCEPTIONAL GUIDE VIDEO MODAL STYLING*/
/* Video modal — sizes itself to video aspect ratio, never clips or scrolls */
.guide_video_modal_content {
    max-height: none;
    overflow: visible;
}

.guide_video_modal_content .modal-body {
    overflow: hidden;
    padding: 0;
}

/* Maintain 16:9 aspect ratio at all viewport sizes */
.guide_plyr_video {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
}

/* On small viewports — shrink the dialog to fit without clipping */
#guide_video_modal .modal-dialog {
    margin: 10px auto;
    max-width: min(90vw, 800px);
}

@media (max-height: 500px) {
    #guide_video_modal .modal-dialog {
        max-width: min(70vw, 600px);
    }
}

/* END OF EXCEPTIONAL GUIDE VIDEO MODAL STYLING*/
button.close {
    outline: none !important;
    font-size: 18px;
    padding: 8px !important;
    color: black;
    margin: -9px -15px -0.875rem auto !important;
    border-top-right-radius: 6px;
}

button.close:hover {
    background-color: red;
}

button.close:hover span {
    color: white;
}

button.close:active {
    background-color: var(--close_btn_active);
}

button.close:active>span {
    color: white;
}

button.close span {
    font-size: var(--close_btn_font_size);
    color: var(--close_btn_color);
    opacity: 1;
    font-weight: normal !important;
    text-shadow: none !important;
}

/*======= END OF MODAL WINDOW STYLES =======*/
.copyable {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

/*======= START OF NAVBAR & NAVLINK STYLES =======*/
a.nav-link {
    display: flex;
    align-items: center;
    white-space: nowrap;
    gap: 0.5em;
}

.nav-item {
    color: white;
}

.navbar-nav {
    float: right;
}

.navbar-text {
    color: white;
}

.nav-item a {
    color: white;
}

.navbar li {
    z-index: 1001;
}

a.nav-link:not(.public_language_selection):not(.language_menu):hover {
    color: yellow !important;
}

/* Navigation: .navbar-nav .dropdown-menu → force floating overlay at all widths
   Purpose: Bootstrap 4's own stock rule sets navbar dropdowns to position:static
   below the navbar-expand breakpoint (intentional Bootstrap default, meant for
   dropdowns that should push mobile-collapsed-menu content down in place). Every
   navbar dropdown actually used in this app (language switchers, guide nav) is
   meant to float as an overlay at every width, matching desktop behavior — none
   are meant to expand in-place. General override here replaces per-dropdown fixes
   (previously applied individually to #guide_nav_li, #public_default_language,
   etc.) with one rule covering any current or future navbar dropdown.
*/
.navbar-nav .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
}

/*======= END OF NAVBAR & NAVLINK STYLES =======*/
/*======= START OF GENERAL RULES =======*/
.bck_common_clr {
    background-color: var(--ezinq_theme_color);
}

.dropdown-menu {
    z-index: 9999;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
}

/* Navigation: .dropdown-menu li span → override legacy nowrap for dropdown text
   Purpose: a legacy global rule (li span { white-space: nowrap }, origin/purpose
   unknown, still relied upon elsewhere so not removed outright) was forcing every
   dropdown item's inner text span onto one line — long strings (especially
   translated text with no natural break points) then just kept expanding the
   dropdown's width instead of wrapping, eventually overflowing/clipping past the
   viewport. Scoped here to any dropdown-menu context specifically, rather than
   touching the legacy rule's original scope, which may still be needed for other
   single-line list UI elsewhere in the app. */
.dropdown-menu li span {
    white-space: normal;
}

/* Generic rule: any dropdown item marked .remove_danger (red text/icon by
   default) flips to white on hover, matching the red background highlight
   that dropdown li hover states already apply — keeps contrast readable
   instead of red-on-red. Scoped generically so it applies wherever
   .remove_danger is used (share-link delete, workbench single-item delete,
   any future dropdown delete action) without needing a rule per feature. */
.dropdown-menu li:hover .remove_danger,
.dropdown-menu li:hover .remove_danger .ezinq-svg-icon,
.dropdown-menu li:hover .remove_danger span,
.public_dropdown_ul li:hover a .remove_danger,
.public_dropdown_ul li:hover a .remove_danger .ezinq-svg-icon,
.public_dropdown_ul li:hover a .remove_danger span,
.public_dropdown_ul li:hover a.remove_cf_group .remove_danger,
.public_dropdown_ul li:hover a.remove_cf_group .remove_danger .ezinq-svg-icon,
.public_dropdown_ul li:hover a.remove_cf_group .remove_danger span {
    color: #fff;
    fill: #fff;
}

/* Danger dropdown items (delete/remove actions marked .remove_danger):
   li background flips to red on hover instead of the normal theme color,
   confirming this is a destructive action — text/icon already turn white
   via the rule above, this adds the matching red background. Scoped with
   :has() to only affect li's containing .remove_danger, leaving every
   other dropdown item's normal hover background untouched. */
.dropdown-menu li:has(.remove_danger):hover {
    background-color: #dc3545 !important;
}

li {
    border: none;
}

a {
    outline: none;
    text-decoration: none !important;
    color: black;
}

div {
    outline: none;
}

#details_div {
    margin-top: calc(var(--top_navbar_height));
    padding-top: calc(var(--details_div_top_padding));
    height: calc(100vh - var(--top_navbar_height));
    overflow: hidden;
}

@media screen and (max-width: 768px) {
    #details_div {
        height: calc(100vh - var(--top_navbar_height) - var(--sticky_search_wrapper) - var(--bottom_nav_height)) !important;
    }
}

.dropdown a {
    text-decoration: none !important;
}

table {
    border-spacing: 0 !important;
    border-collapse: separate !important;
}

.table {
    border-spacing: 0 !important;
    border-collapse: separate !important;
}

.table-bordered {
    border-top: none !important;
}

table tr {
    outline: none;
}

thead {
    position: relative;
    /*z-index: 100;*/
    text-align: center;
}

thead th {
    background: white;
    box-shadow: 0 5px 10px -5px grey;
    z-index: 1;

}

.table th {
    border-top: none !important;
    word-break: break-all;
    vertical-align: middle !important;
}

table thead {
    word-break: keep-all !important;
    word-wrap: break-word !important;
}

.table td {
    border-top: none !important;
    vertical-align: middle !important;
}

thead th:not(.exception_th) {
    font-size: 12px !important;
    padding: 0 !important;
}

.homepage_table {
    table-layout: fixed;
    width: 100%;
}

.homepage_table thead th {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 20;
}

th,
td {
    text-align: center;
    /*word-break: break-all;*/
}

/*normally below class comes from download contact details and draft details and*/
/*planned to put every page including table but cancelled because it doesnt work unless*/
/*it is inline css and we made it inline*/
.db_save_td,
.portioned_tbody td,
.portioned_tbody td div:not(.progress):not(.progress-bar):not(.haspadding):not(.with_image_content) {
    word-wrap: break-word !important;
    word-break: break-all !important;
    overflow-wrap: break-word;
    padding: 0.3rem;
    line-height: 1.4;
    font-size: 12px;
    color: #1e293b;
}

.table_with_radio,
.single_display_area {
    /*homepage table fields under display fields with radio btns on top (alltogether 3. contacts sent and received)*/
    overflow: auto;
}

.p_3 {
    padding: 3px;
}

.p_5 {
    padding: 5px !important;
}

.p_10 {
    padding: 10px !important;
}

.p_25 {
    padding: 25px !important;
}

.pb_25 {
    padding-bottom: 25px !important;
}

.pl_25 {
    padding-left: 25px !important;
}

.pr_25 {
    padding-right: 25px !important;
}

.pt_25 {
    padding-top: 25px !important;
}

.checklabel {
    font-size: 12px;
}

.cursorPointer {
    cursor: pointer;
}

/* for all label text sizes especially for sides of the page*/
label {
    font-size: 12px;
    margin-bottom: 0 !important;
}

.chk_size {
    transform: scale(1) !important;
}

.dialog_parag,
.dialog_parag_big {
    text-indent: 10px;
    font-size: 14px;
    padding: 10px;
    margin-bottom: 0;
}

.dialog_parag_big {
    font-size: 16px;
}

.dialog_parag_sm {
    font-size: 12px;
}

.form-control {
    border: 1px solid #ced4da;
    border-radius: 8px;
    padding: 0.375rem 0.75rem;
    /* Bootstrap's default padding */
    transition: all 0.2s ease;
    /* min-height: calc(1.5em + 0.75rem + 2px); */
    /* Bootstrap's default height */
}

.form-control:focus {
    outline: none !important;
    border-color: #80bdff;
    box-shadow: 0 0 0 .15rem rgba(0, 123, 255, .15);
}

.progress-bar {
    background-color: var(--ezinq_theme_color);
    transition: none;
    color: #fff;
}

/*BUTTONS*/
button:focus,
button:active {
    outline: none;
}

button:hover:not(.editable_area_btn):not(.setting_editable_area_btn):not(.history_note_edit):not(.custom_file_note_btn) {
    cursor: pointer;
}

button:disabled,
button[disabled] {
    /* background-color: #cccccc; */
    color: #666666;
}

button:disabled:hover,
button[disabled]:hover {
    background-color: #cccccc !important;
}

.btn {
    outline: none !important;
    box-shadow: none !important;
}

.btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

.btn:focus,
.btn:active {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Navigation: .btn.wrap_text → override Bootstrap's .btn white-space:nowrap
   Purpose: Bootstrap's base .btn sets white-space:nowrap, inherited by all
   descendant text (title/desc spans in icon+stacked-text buttons like the
   share-choice modal), forcing long text (especially CJK, no natural break
   points) to overflow instead of wrap. Apply to any .btn that needs its
   inner text to wrap normally instead of staying on one line. */
.btn.wrap_text {
    white-space: normal;
}

.btn-group .btn:focus,
.btn-group .btn:active {
    outline: none;
    box-shadow: none;
}

.btn_success:hover {
    color: white;
    background-color: var(--ezinq_theme_color) !important;
    /*border:1px solid var(--ezinq_theme_color);*/
    /*border-radius: 20px;*/
}

.btn_success,
.btn_danger {
    background-color: transparent;
    color: black;
    border: 1px solid transparent;
    border-radius: 25px;
    font-size: 16px;
    outline: none !important;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    box-sizing: border-box;
    text-align: left;
    /*transition: transform, background-color;*/
    /*transition-duration: 0.3s;*/
    /*transition-timing-function: ease-out;*/
}

.btn_success.btn:focus,
.btn_success.btn:active {
    outline: none !important;
    /*border:none;*/
    box-shadow: 6px 6px 4px var(--ezinq_theme_color) !important;
}

.btn_danger.btn:focus,
.btn_danger.btn:active {
    outline: none !important;
    /* border: none; */
    box-shadow: 6px 6px 4px red !important;
}

.btn_danger:hover {
    color: white;
    background-color: red !important;
    /* border: 1px solid red;
    border-radius: 20px; */
}

button:not(.side_display_btn, .top_selection_btn, .not_round, .cornered_btn, .ui-datepicker-trigger, .setting_editable_area_btn, .editable_area_btn, .close, .past_detail_btn, .price_info_btn, .box_section_btn, .pack_list_comp_btn, .pack_file_tab) {
    outline: none;
    border-radius: 20px 20px 20px 20px !important;
    border: none;
}

.not_round {
    border: none;
}

.not_round:focus,
.not_round:active {
    border: none;
    outline: none;
    box-shadow: none;
}

.image_upload_btn {
    width: 80%;
    padding: 0.25rem 0.1rem;
    display: inline-block;
    text-align: center;
    font-size: 0.75rem;
    word-wrap: break-word !important;
    -ms-word-break: break-all;
    word-break: break-all;
    white-space: normal !important;
    vertical-align: top;

}

.image_upload_btn_td {
    padding: 0.25rem 0.4rem;
}

/* Core display/file section button base — used across all app sections */
.display_section_btn {
    background-color: transparent;
    border: none !important;
    border-radius: 0;
    font-size: 14px;
    font-weight: normal;
    color: var(--button_text_color);
    outline: none !important;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    box-sizing: border-box;
    text-align: left;
}

.side_display_btn {
    /*special_display btn class is used in admin panel for opening modal before display*/
    /*used to discriminate .display_section_btn effects different from other display section buttons like top selection buttons.*/
    width: 100%;
    text-align: left;
}

.btn_display_arrow {
    border: solid;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.active_top_sel_btn,
.active_child_tab_btn,
.sel_packing_list_btn_active,
.sel_account_btn_active,
.home_display_active,
.pack_error_active_section,
.active_box_section_btn,
.setting_side_active {
    border-bottom: 2px solid var(--ezinq_theme_color) !important;
    outline: none !important;
    font-weight: 500;
    color: black;
}



.display_section_btn:hover {
    color: #FFFFFF;
    background-color: var(--ezinq_theme_color) !important;
    border: none;
}

/*IMAGE DISPLAYING MODAL WINDOW TOP 2 SECTION CHANGING STYLING (THIS FOLDER AND ALL FOLDERS*/
.display_file_section {
    background-color: transparent;
    border: none !important;
    border-radius: 6px !important;
    font-size: 12px;
    font-weight: normal;
    color: var(--fill_color_gray);
    outline: none !important;
    padding: 4px 8px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    box-shadow: none !important;
    margin: 0 2px;
}

.display_file_section:hover {
    color: white;
    background-color: var(--ezinq_theme_color) !important;
    border: none;
}

.active_file_section_btn {
    background-color: var(--ezinq_theme_color) !important;
    color: white !important;
    font-weight: 500;
    border: none !important;
    box-shadow: none !important;
}

/*END OF IMAGE DISPLAYING MODAL WINDOW TOP 2 SECTION CHANGING STYLING (THIS FOLDER AND ALL FOLDERS*/
/*-----------------------------------*/
.home_display_side_btn {
    position: relative;
}


.home_display_side_btn::after {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.home_display_side_btn::after {
    /*homepage display btns for displaying new warning with a dot on the corner..*/
    font-family: Arial;
    font-size: 0.7em;
    font-weight: 700;
    position: absolute;
    width: 15px;
    height: 15px;
    top: 0;
    right: 0;
    border: 1px #fff solid;
    border-radius: 50px;
    background: #3498db;
    opacity: 0;
    content: "";
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    transition: transform, opacity;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}

.home_display_side_btn.display_warning::after {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

/*
 *Class Name: .no-button-effects
 * This class is intended to neutralize styling effects designed for buttons
 * when applied to non-button elements like radio buttons or checkboxes.
 */
.no-button-effects.active_top_sel_btn,
.no-button-effects.sel_packing_list_btn_active,
.no-button-effects.sel_account_btn_active,
.no-button-effects.home_display_active,
.no-button-effects.pack_error_active_section,
.no-button-effects.active_file_section_btn,
.no-button-effects.active_box_section_btn,
.no-button-effects.setting_side_active {
    /* Neutralize the unwanted box shadow */
    box-shadow: none !important;

    /* Neutralize the border-bottom if it looks bad on radio buttons */
    border-bottom: none !important;

    /* Restore or reset other properties to a default radio/input state if needed */
    /* Example: if the background was changed by the original class, you might reset it */
    /* background-color: transparent !important; */

    /* If 'outline' is necessary for accessibility, you might want to reset it
       to a standard focus style instead of removing it, but based on your original
       code, you wanted it removed/neutralized: */
    outline: initial !important;

    /* Reset text-related properties if they interfere with the radio button's appearance */
    font-weight: initial !important;
    color: initial !important;
}

.home_page_field:not(.home_radio_btn, .first_display) {
    /*this class is used in homepage to hide the sections and show after related button click*/
    display: none;
    overflow: auto;
}

/*.top_left_btn class is on some pages to control the height in column style of left btn top height:*/
.top_gap.top_left_btn {
    margin-top: 0;
}

.top_search {
    flex-grow: 2;
    border-radius: 20px 0 0 20px;
}

.top_search.smt_src_fld {
    border-radius: 0 0 0 0;
}

.src_input_btn {
    font: normal 1.0rem sans-serif;
    height: auto;
    border-radius: 0 20px 20px 0;
    border-left: none;
    background-color: #f8f9fb;
    border-color: #dfe0e1;
}

.src_input_btn:hover {
    background-color: var(--background_color_div_light_hover);
}

.src_input_btn:active {
    background-color: var(--background_color_div_light_btn_active);
}

#registration_form div.form-group {
    height: 130px !important;
}

.registration_form_modal div.form-group {
    height: 100px !important;
}

.registration_form_modal label {
    font-weight: bold;
}

.registration_form_modal button:not(.ui-datepicker-trigger):not(.close) {
    border-radius: 20px;
}

/* Below is registration page style */
#registration_form {
    margin: 0 auto;
}

#registration_form label {
    font-weight: bold;
}

.form-label {
    font-weight: 500;
    color: #4a5568;
    margin-bottom: 5px;
}

.btn-primary {
    background-color: var(--background_color_btn_primary) !important;
    border-color: var(--background_color_btn_primary) !important;

}

.btn-primary:hover {
    background-color: var(--ezinq_theme_color) !important;
}

.btn-primary:active {
    background-color: var(--background_color_common_active) !important;
}

.btn-primary a {
    color: white;
    padding: 5px;
    border-left: 2px solid white;
}

.btn-primary:focus {
    background-color: var(--background_color_btn_primary) !important;
    border-color: var(--background_color_btn_primary) !important;
}

.btn-default:hover {
    background-color: var(--background_color_div_light_hover) !important;
}

.btn-default:active {
    background-color: var(--background_color_div_light_btn_active) !important;
}

select {
    outline: none !important;
    box-shadow: none !important;
    font-size: .875rem !important;
    background-color: transparent !important;
}

input {
    outline: none !important;
    box-shadow: none !important;
    border: 1px solid #ced4da;
    border-radius: 8px;
    transition: all 0.2s ease;
}

input:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border: 1px solid var(--top_title_light) !important;
    box-shadow: 0 0 10px #719ECE !important;
    background-color: var(--focus_input_bck_light_blue) !important;
}

select:focus {
    background-color: white !important;
}

/*below .iti is for inttel library to make in registration telephone selectbox get full width. else it is short*/
.iti {
    width: 100%;
}

input:autofill {
    /*this is to remove bothering browser itself autofill color in input fields (index page especiall)*/
    background: #fff;
    /* or any other */
}

/* ez-check-wrap — generic checkbox + label alignment wrapper */
.ez-check-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ez-check-wrap input[type="checkbox"] {
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: #0071e3;
    outline: none;
    margin: 0;
}

.ez-check-wrap label {
    font-size: 14px;
    cursor: pointer;
    margin: 0;
    color: #1d1d1f;
}

/* --- end ez-check-wrap --- */
/* below gap for buttons on the right side on many pages */

.checkbox_alignment {
    /*.checkbox_alignment class is used to add new item modal window for keep it checkboxes*/
    padding-left: 10px;
    margin-top: 5px;
}

.checkbox_alignment label {
    /*.checkbox_alignment class is used to add new item modal window for keep it checkboxes*/
    padding-left: 10px;
    font-size: 14px;
}

.top_gap input {
    vertical-align: middle;
}

.underline {
    text-decoration: underline;
}

.clr_white {
    color: white;
}

a:hover {
    text-decoration: none !important;
}

.db_save {
    width: 10% !important;

}

/*======= END OF GENERAL RULES =======*/
/*======= START OF LANGUAGE SWITCHER STYLES =======*/
.language_dropdown {
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}

.language_ul {
    list-style-type: none;
    z-index: 100;
    padding-bottom: 0;
    margin: 0;
}

.language_ul li {
    border: none;
}

.language_ul a {
    color: black;
}

/*======= START OF PUBLIC RELATED COMMON STYLES =======*/
/* Trigger button inner wrapper - globe + flag + code */
.public_lang_trigger_inner {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Language code text next to flag */
.public_lang_code {
    font-size: 12px;
    font-weight: 600;
    color: inherit;
}

/* Dropdown items - flag + language name alignment */
.language_dropdown .public_language_selection {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #333 !important;
    padding: 6px 16px;
}

.language_dropdown .public_language_selection:hover {
    color: #000 !important;
    background-color: #f5f5f5;
}

/* Flag icon size consistency */
.language_dropdown .flag-icon,
.public_lang_trigger_inner .flag-icon {
    width: 20px;
    height: 15px;
    display: inline-block;
    vertical-align: middle;
}

/* Globe icon size in trigger */
/* Globe icon size and alignment in trigger */
.public_lang_trigger_inner .ezinq-svg-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.public_lang_trigger_inner span[data-icon] {
    display: inline-flex;
    align-items: center;
}

/*======= END OF PUBLIC RELATED COMMON STYLES =======*/
.flagstrap {
    background-color: transparent !important;
    width: 100%;
}

.flagstrap-icon {
    margin-right: 15px !important;
}

.flag-icon-zh {
    content: url(5e50b5373d0c033eea0a.png);
}

.flag-icon-tr {
    content: url(3bcca6977c31fd57b439.png);
}

.flag-icon-en {
    content: url(60a183bb54239b314440.png);
}

.flag-icon-es {
    content: url(29705828f41b3efc6d66.png);
}

.flag-icon-ru {
    content: url(007401099c6b54c61a1b.png);
}

.flag-icon-ar {
    content: url(2e669e1f513e889d639b.png);
}

.flag-icon-de {
    content: url(e1b9a66a7b9bae5dd9ae.png);
}

.flag-icon-hi {
    content: url(e50793f97ff6731df2bc.png);
}

.flag-icon-vi {
    content: url(dc5c89312de010f75d23.png);
}

.flag-icon-ur {
    content: url(e02dfd288b55f4d4f285.png);
}

.flag-icon-it {
    content: url(299d67e8e67cae3f3b9a.png);
}

.flag-icon-pt {
    content: url(924718cc50224a6e75e2.png);
}

.flag-icon-ja {
    content: url(fb7bcf16a27767943a66.png);
}

.flag-icon-ko {
    content: url(e9f727bb1e7b2b4831da.png);
}

.flag-icon-id {
    content: url(5de8a264b1200a418d6d.png);
}

.flag-icon-fr {
    content: url(19559fdecb5c655ff6da.png);
}

/*======= END OF LANGUAGE SWITCHER STYLES =======*/
/*======= START OF SVG ICON STYLES =======*/
/*because some parts it is overridden for giving color and hover is still overriding so we do this to keep them origional with the text next to them when hover*/
a:hover .icon_ezinq svg,
a:hover .icon_usercard svg,
a:hover .icon_draft svg,
a:hover .icon_sent svg,
a:hover .icon_received svg {
    color: inherit;
}

svg.ezinq-svg-icon {
    width: 1em;
    /* Makes size relative to parent font-size */
    height: 1em;
    display: inline-block;
    /* Allows side-by-side display with text */
    vertical-align: -0.125em;
    fill: currentColor;
    /* Ensures icon color matches surrounding text color */
    flex-shrink: 0;
}

.ezinq-svg-icon.icon-small {
    width: 1em;
    height: 1em;
}

svg.ezinq-svg-icon.empty_state_icon {
    width: 100px;
    height: 100px;
    color: #ccc;
}

svg.ezinq-svg-icon.icon-size-18 {
    width: 18px;
    height: 18px;
}

.icon-checkbox-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

svg.ezinq-svg-icon.icon-size-18 {
    width: 18px;
    height: 18px;
}

/*======= END OF SVG ICON STYLES =======*/
/*======= START OF ICON & TEXT ALIGNMENT STYLES =======*/
/* Only apply to data-icon spans that are NOT inside flex containers */
/* Remove the inline-block spacing when inside flex wrapper */
/* .btn_icon_text_wrapper span[data-icon],
.icon_span_text_wrapper span[data-icon],
.icon_text_wrapper_lg span[data-icon],
.icon_text_wrapper_sm span[data-icon],
.icon_text_wrapper_md span[data-icon],
.top_selection_btn span[data-icon] { */
/* display: inline;  /* Reset to inline inside flex - flex handles spacing */
/* margin-right: 0; */
/* } */

/* Small icon wrapper - 12px text */
.icon_text_wrapper_sm {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    /* ADD */
    font-size: 12px !important;
}

/* Medium icon wrapper - 14px text */
.icon_text_wrapper_md {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    /* ADD */
    font-size: 14px !important;
}

/* Large icon wrapper - 16px icons */
.icon_text_wrapper_lg {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

/* Inline icon-text wrapper for links, tables, general inline use to align them both icon and text generally also wrapped with anchor <a> as opposed to 
button svg and text wrappers .btn_icon_text_wrapper etc....*/
.icon_text_inline {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

/* Button icon wrapper - left aligned */
/* 
 * btn_icon_text_wrapper
 * Used for buttons that auto-size to content width.
 * Content is left-aligned within the button, allowing the button 
 * to shrink-wrap naturally around icon and text.
 * Best for: Auto-width buttons, inline buttons, dynamically sized elements
 */
.btn_icon_text_wrapper {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 0.5rem;
}

/* Icon + text wrapper - centered, wrappable */
/* 
 * icon_span_text_wrapper
 * Used for buttons with fixed width (min-width, width, or percentage-based sizing).
 * Content is centered within the button to prevent awkward spacing.
 * Best for: Fixed-width buttons, full-width buttons, buttons with explicit width constraints
 */
.icon_span_text_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    text-align: center;
    gap: 0.5rem;
}

/*======= END OF ICON & TEXT ALIGNMENT STYLES =======*/
/*======= START OF INDEX - REGISTRATION - RESET_PASSWORD SPECIFIC STYLES =======*/
.entry_forms input {
    border-radius: 20px 20px 20px 20px;
}

.entry_forms select {
    border-radius: 20px 20px 20px 20px;
}

.entry_forms button {
    border-radius: 20px 20px 20px 20px;
}

.roundinput {
    border-radius: 20px 20px 20px 20px;
}

.searchbox_wrapper {
    display: flex;
    flex-direction: row;
    position: relative;
}

/*======= END OF INDEX - REGISTRATION - RESET_PASSWORD SPECIFIC STYLES =======*/
/*======= START OF JQUERY UI DIALOG STYLES =======*/
.dialogTitleCls .ui-dialog-titlebar {
    background-color: orange;

}

.confirmDialog .ui-dialog-titlebar-close {
    /*hiding close btn on confirmation dialogs.*/
    display: none;
}

.ui-dialog-buttonset,
.ui-button {
    outline: none !important;
    border: 1px solid transparent !important
}

/*below padding for the button on jquery dialog bottom of the confirmation dialog.*/
.confirmDialog .ui-dialog-buttonpane button {
    padding: 4px 12px !important;
}

/*the section of jquery dialog at the bottom including button*/
.confirmDialog .ui-dialog-buttonpane {
    padding: 0 !important;
}

.confirmDialog .ui-dialog-buttonpane button:hover {
    background-color: var(--fill_color_gray) !important;
    color: white;
}

.ui-button:hover {
    border: 1px solid #B8B8B8 !important
}

/* dialog styles */

.ui-widget-header,
.ui-state-default,
.ui-button {
    border: 1px solid #B8B8B8;
}

/* custom style for modal content*/

.custom-ui-widget-header-warning {
    background: #EBCCCC;
    font-size: 1em;
}

.custom-ui-widget-header-accessible {
    background: #C2D7E9;
    font-size: 1em;
}

.ui-dialog-titlebar {
    background: #337AB7;
}

/*To get rid of bothering dots around dialog close x icon*/
.ui-dialog-titlebar-close {
    outline: none !important;
    color: black !important;
}

.ui-dialog {
    border-radius: 10px;
}

.ui-dialog-titlebar {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: var(--top_title_darkest);
    color: white !important;
}

.ui-dialog-titlebar-close:hover {
    color: black !important;
    background-color: var(--background_color_div_light_hover) !important;
    border: none !important;
}

.ui-dialog-titlebar-close:hover .ui-icon {
    color: white !important;
}

.dialogTitleCls .ui-dialog-titlebar-close {
    outline: none !important;
}

/* below chat window .ui-dialog we set the z-index high otherwise it is behind the
 navigation bar*/
.ui-dialog {
    z-index: 1000 !important;
}

.ui-selectable-helper {
    pointer-events: none
}

.placeholder_class {
    background-color: red;
    border: 2px solid red;
}

.ui-helper {
    width: 50% !important;
}

/*jquery tooltipe*/
.ui-tooltip {
    padding: 10px 20px;
    border-radius: 10px;
    /*font: bold 12px"Helvetica Neue", Sans-Serif;*/
    /*text-transform: uppercase;*/
    box-shadow: 0 0 7px black;
    color: white;
    background-color: black;
    word-wrap: break-word;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
    width: 500px;
    box-sizing: border-box;
    z-index: 20000;
    position: absolute;
    overflow: visible;
    pointer-events: none;
    /*border-color: black transparent transparent transparent;*/
}

.ui-tooltip.warning {
    color: #E3E8F7;
    background: #D94AA4;
}

.ui-tooltip.danger {
    color: #212942;
    background: #CABA75;
}

.ui-datepicker-trigger {
    cursor: pointer;
}

/*======= END OF JQUERY UI DIALOG STYLES =======*/
/*======= START OF CUSTOM CHECKBOX STYLES =======*/
/* below is styling all checkboxes in the program (big size that is for inside td) */
/* Customize the label (the container) */

thead th .checkbox_container {
    display: block;
    position: relative;
    /*padding-left: 25px;*/
    /*margin-bottom: 10px;*/
    cursor: pointer;
    font-size: 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

label.checkbox_container {
    margin-bottom: 0 !important;
}

.checkbox_container {
    /*display: block;*/
    /*position: relative;*/
    /*!*padding-left: 25px;*!*/
    /*margin-bottom: 1px;*/
    /*cursor: pointer;*/
    /*!*font-size: 15px;*!*/
    /*-webkit-user-select: none;*/
    /*-moz-user-select: none;*/
    /*-ms-user-select: none;*/
    /*user-select: none;*/
    display: block;
    position: relative;
    /*padding-left: 15px;*/
    /*margin-bottom: 1px;*/
    cursor: pointer;
    font-size: 13px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox_container input {
    /* position: absolute; causing moving scrollbar*/
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;

}

/* Create a custom checkbox */
.checkbox_span {
    /*position: absolute;*/
    /*left: 50%;*/
    /*!*margin-left: -50px;*!*/
    /*top: 50%;*/
    /*!*margin-top: -50px;*!*/
    /*transform: translate(-50%,-50%);*/
    /*border:1px solid  var(--ezinq_theme_color);*/
    /*border-radius: 50%;*/
    /*height: 20px;*/
    /*width: 20px;*/
    /*background-color: #eee;*/
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid var(--ezinq_theme_color);
    border-radius: 50%;
    height: 17px;
    width: 17px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.checkbox_container:hover input~.checkbox_span {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkbox_container input:checked~.checkbox_span {
    background-color: var(--ezinq_theme_color);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkbox_span:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox_span:before {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkbox_container input:checked~.checkbox_span:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkbox_container .checkbox_span:after {
    /*left: 7px;*/
    /*top: 4px;*/
    /*width: 5px;*/
    /*height: 10px;*/
    /*border: solid white;*/
    /*border-width: 0 2px 2px 0;*/
    /*-webkit-transform: rotate(45deg);*/
    /*-ms-transform: rotate(45deg);*/
    /*transform: rotate(45deg);*/
    left: 5px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* end of styling all checkboxes in the program*/
/*below is styling small size checkboxes for inside th */
.small_size_checkbox.checkbox_container {
    display: block;
    position: relative;
    /*padding-left: 15px;*/
    /*margin-bottom: 1px;*/
    cursor: pointer;
    font-size: 13px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* thead th .small_size_checkbox.checkbox_container {
    margin-bottom: 8px;
} */

/* Hide the browser's default checkbox */
.small_size_checkbox.checkbox_container input {
    /* position: absolute; causing scrollbar move*/
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.small_size_checkbox .checkbox_span {
    position: absolute;
    /*left: 50%;*/
    /*top: 50%;*/
    /*transform: translate(-50%,-50%);*/
    border: 1px solid var(--ezinq_theme_color);
    border-radius: 50%;
    height: 14px;
    width: 14px;
    background-color: #eee;
}


/* Style the checkmark/indicator */
.small_size_checkbox.checkbox_container .checkbox_span:after {
    left: 4px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.small_size_checkbox.checkbox_container .checkbox_span:before {
    left: 4px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);

}

.controller_specs .checkbox_span {
    left: 0;

}

.controller_specs {
    padding: 0 0 10px 8px;
    /* row spacing between checkbox groups */
}

.controller_specs .checkbox_container {
    padding-left: 12px;
    /* clears the absolutely-positioned checkbox circle from label text */
}

.label_with_text .checkbox_span {
    left: 10px;
}

/*======= END OF CUSTOM CHECKBOX STYLES =======*/
/*======= START OF ALERT STYLES =======*/
.top_alert {
    /*almost every page used top dangling warning alert*/
    position: fixed;
    z-index: 13005;
    left: 50%;
    transform: translatex(-50%);
    /* z-index is important here because it must be top of every window*/
    text-align: center !important;

    /* this to force the height to adapt to all content */
    height: auto !important;
}

.center_alert {
    position: fixed;
    text-align: center;
    top: 50%;
    z-index: 13005;

}

.bottom_alert {
    position: fixed;
    z-index: 13005;
    /* z-index is important here because it must be top of every window*/
    text-align: center;
    bottom: 0;

}

.alert_bottom_custom {
    background-color: var(--background_color_dark_blue);
    color: white !important;
}

.alert_bottom_custom a {
    color: white !important;
}

.center_alert_success {
    background-color: black;
    color: white;
    border: 1px solid white;
}

.soft_alert_success {
    position: fixed;
    z-index: 13005;
    left: 50%;
    transform: translateX(-50%);
    top: 35%;
    text-align: center;
    font-size: 0.82rem;
    padding: 6px 14px;
    background-color: rgba(40, 167, 69, 0.55) !important;
    color: white !important;
    border: none;
    height: auto !important;
}

/*======= END OF ALERT STYLES =======*/
/* Completely removes element from DOM — use when layout shift is acceptable */
.hiddenFileInput {
    display: none;
}

/* Hides visually but keeps DOM position — use when layout shift must be avoided */
.hiddenFileInput {
    opacity: 0;
    position: absolute;
    z-index: -1;
}

.file_val {
    width: 100%;
    font-size: 13px;
    text-indent: 10px;
    line-height: 25px;
    pointer-events: none;
    overflow: hidden;
    height: 25px;
}

/*                 table improvements                                       */
.table-striped>tbody>tr:nth-of-type(odd)>td {
    background-color: #fafbfc;
}

/*---------- PRODUCT LIMIT REACHED MODAL--------------*/
/* Product Limit Modal Specific Styles */
#product_limit_modal .modal-body {
    padding: 30px 20px;
}

#product_limit_modal_message {
    font-size: 16px;
    line-height: 1.6;
    color: #92400E;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 500;
}


#trial_button_wrapper {
    margin: 25px 0 !important;
    padding: 0 15px;
    text-align: center;
    /* center text + inline elements */
}

#trial_button_wrapper .trial-start-btn {
    display: inline-flex;
    /* allows perfect centering */
    align-items: center;
    justify-content: center;
    width: 100%;
    /* full modal width — feels intentional */
    max-width: 320px;
    /* prevents giant ugly button */
    margin: 0 auto;
    /* horizontal center */

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 10px;
    color: white;

    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.30);
    transition: all 0.25s ease;
}

#trial_button_wrapper .trial-start-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(102, 126, 234, 0.45);
}

#trial_button_wrapper .text-muted {
    font-size: 13px;
    color: #6b7280 !important;
    margin-top: 12px;
}

/*trial success modal*/
/* Trial Success Modal */
.trial-success-modal .modal-content {
    border-radius: 12px;
    border: none;
}

.trial-success-modal .modal-body {
    padding: 40px;
    text-align: center;
}

.trial-success-emoji {
    font-size: 64px;
    margin-bottom: 20px;
}

.trial-success-title {
    color: #28a745;
    font-weight: 600;
    margin-bottom: 15px;
}

.trial-success-desc {
    font-size: 16px;
    color: #333;
    margin-bottom: 25px;
}

.trial-subdomain-box {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 25px;
}

.trial-subdomain-label {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}

.trial-subdomain-value {
    font-size: 18px;
    font-weight: 600;
    color: #667eea;
}

.trial-success-btn {
    padding: 12px 40px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 8px;
}

/* Sidebar Card Section Titles */
.card-section-title {
    margin-bottom: 0.20rem;
    padding-bottom: 0.2rem;
}

.card-section-title h6 {
    font-size: 0.75rem;
    font-weight: normal;
    letter-spacing: 0.5px;
    /* text-transform: uppercase; */
    margin-bottom: 0;
    color: var(--background_color_div_light_btn_active) !important;
}

.no_scroll_overflow {
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow: auto !important;
}

.no_scroll_overflow::-webkit-scrollbar {
    display: none;
    /* Safari and Chrome */
}

.hidden_section {
    display: none;
}

/*+++++++++++++++++++++++++++++++++++LOding gif+++++++++++++++++++++++++++++++++*/

@keyframes add_loader_middle {
    0% {
        transform: rotate(0deg)
    }

    50% {
        transform: rotate(180deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes loader_middle {
    0% {
        transform: rotate(0deg)
    }

    50% {
        transform: rotate(180deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

#loader_middle div,
.add_loader_middle div {
    position: absolute;
    animation: loader_middle 1.27s linear infinite;
    width: 40px;
    height: 40px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    border-radius: 50%;
    box-shadow: 0 3.7px 0 0 #5baee1;
    transform-origin: 20px 22.85px;
}

#loader_wrapper,
.add_product_loader {
    position: absolute;
    /*overflow: hidden;*/
    background: rgba(255, 255, 255, 0);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transform: scale(1);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

#loader_middle,
.add_loader_middle {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transform: translate(-50%, -50%);
    transform: translateZ(0);
    backface-visibility: hidden;
    transform-origin: 0 0;
    /* see note above */
}

.add_product_loader {
    /* position: fixed; */
    display: none;
}

#loader_wrapper {
    display: none;
}

#loader_middle div,
.add_loader_middle div {
    box-sizing: content-box;
}

#loader_wrapper:hover {
    cursor: progress;
}

/*------------------------------------------------------------*/
.input-group {
    align-self: flex-start;
}

input:disabled:hover,
button:disabled:hover,
textarea:disabled:hover {
    cursor: not-allowed;
    opacity: 0.7;
    background: #f5f5f5;
}

li span {
    white-space: nowrap;
}

.subtle_click_effect {
    border-radius: 4px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}

.subtle_click_effect:hover {
    background-color: var(--list_hover_background_color);
    border-color: #cbd5e1;
    border-radius: 4px;
}

.link_effect,
.link_effect_light,
.link_effect_blue {
    padding: .25rem .4rem;
    font-size: 14px;
    line-height: 1;
    border-radius: .2rem;
    color: black;
    border-color: #0000d8;
    text-decoration: none !important;
}

.link_effect:hover {
    background-color: var(--top_title_darkest);
    color: #fff !important;
    cursor: pointer;
    /* padding: .25rem .4rem; */
}

.link_effect:hover a {
    color: #fff !important;
}

.link_effect_light:hover {
    color: yellow;
}

.link_effect_blue:hover {
    color: dodgerblue;
}

.link_effect_light {
    color: #fff;
}

.image_upload_btn_td a.link_effect {
    display: inline-block;
}

input[type=radio] {
    vertical-align: middle;
    margin: 0;
    cursor: pointer;
}

.file_date_wrapper {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.file_date_time {
    font-size: 0.75em;
    color: var(--text_muted);
    opacity: 0.7;
}

.custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox=%270 0 32 32%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath stroke=%27rgba%28255,255,255, 0.5%29%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-miterlimit=%2710%27 d=%27M4 8h24M4 16h24M4 24h24%27/%3E%3C/svg%3E");
    font-size: 14px;
}

.align_inline_radio_btn {
    vertical-align: middle;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 14px !important;
    height: 14px !important;
    box-sizing: border-box;
    border: 2px solid #0d6efd !important;
    border-radius: 50%;
    background-color: transparent !important;
    position: relative;
    cursor: pointer;
    outline: none !important;
    box-shadow: none !important;
}

.align_inline_radio_btn:focus {
    outline: none !important;
    box-shadow: none !important;
    border: 2px solid #0d6efd !important;
    background-color: transparent !important;
}

.align_inline_radio_btn:checked {
    border: 2px solid #0d6efd !important;
    background-color: transparent !important;
}

.align_inline_radio_btn:checked::before {
    /*inner round circle inside the checked state of radio button.*/
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #0d6efd;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*contenteditable is used in admin and home. nowhere else*/
[contenteditable]:empty:before {
    content: attr(placeholder);
    /*background-color:orange;*/
    /*display: inline-block; !* For Firefox *!*/
    color: grey;
}

[contenteditable]:empty:hover {
    background-color: white;
}

/*=========================================*/
.hrz_align_left {
    text-align: left;
}

.hrz_align_right {
    text-align: right !important;
}

/*==============MEDIA QUERIES==============*/
@media screen and (max-width: 1200px) {
    .modal_large {
        max-width: 60vw;
    }
}

@media screen and (max-width: 991px) {
    .hidden_991 {
        display: none !important;
    }

    /*start of autocomplete related*/
    .search_result_img_div.search_sm {
        /*narrow searchbox search autocomplete window size inner div division for img*/
        width: 30%;
        padding: 10px;
    }

    .search_result_text_div.search_sm {
        /*narrow searchbox search autocomplete window size inner div division for text*/
        /*font-family: "Lucida Sans Unicode","Helvetica Neue", "Arial Unicode MS";*/
        width: 70%;
        padding: 10px;
        /*font-size:12px;*/

    }

    /*end of autocomplete related*/
    .side_display_btn {
        /*used to discriminate .display_section_btn effects different from other display section buttons like top selection buttons.*/
        width: auto;
    }

    .btn_success,
    .btn_danger {
        border-radius: 50%;
    }

    .hrz_align_right {
        text-align: center;
    }

    /*..btn_span on many buttons including some modals and main tables*/
    /* button .btn_span {
        display: none;
    } */

    /* li .btn_span {
        display: none;
    } */

    /* a .btn_span {
        display: none;
    } */

    /* small .btn_span {
        display: none;
    } */

    button .btn_display_arrow {
        display: none;
    }

    .showHideShowSpan {
        /*used especially on navbar home,settings etc btn to hide and show writings again in smallest screen.*/
        display: none;
    }

    /*--------------------------------------*/
    .image_column {
        width: 8% !important;
    }

    .note_column {
        width: 10% !important;
    }
}

@media screen and (max-width: 768px) {

    /*start of autocomplete related*/
    .autocomplete-items {
        left: 0;
        /*this property is changed in collapse navbar size which is 771 back to 0*/
    }

    .search_result_img_div.search_sm {
        width: 20%;
        padding: 10px;
    }

    .search_result_text_div.search_sm {
        /*font-family: "Lucida Sans Unicode","Helvetica Neue", "Arial Unicode MS";*/
        width: 80%;
        padding: 10px;
    }

    /*end of autocomplete related*/
}

@media screen and (max-width: 576px) {

    /* On small screens, prevent #side_details from stretching to match the Bootstrap row height, which was causing a large empty gray gap between the nav buttons and the content section */
    #side_details {
        height: auto;
    }

    /* .image_upload_btn .btn_span {
        display: none;
    } */

    /*below btn_success focus and btn_danger focus are functional btns (not display) and in this vp size we get rid of box shadow and blur effect*/
    .btn_success.btn:focus,
    .btn_success.btn:active {
        outline: none !important;
        border: none;
        box-shadow: 0px 0px 0px var(--ezinq_theme_color) !important;
    }

    .btn_danger.btn:focus,
    .btn_danger.btn:active {
        outline: none !important;
        border: none;
        box-shadow: 0px 0px 0px red !important;
    }

    /* .side_disp_btn_div {
        padding-right: 5px;
    } */
}

@media screen and (max-width: 362px) {
    .image_upload_btn {
        font-size: 0.7rem;
    }
}

/*=============END OF MEDIA QUERIES==========*/
/*=============NOTIFICATION STYLING .JS ADDED CLASS STYLING FOR THOSE NEW CONTACT,INQUIRY,OR WARNING ICONS ON THE NAVBAR*/
.notification {
    display: inline-block;
    position: relative;
    padding: 0.6em 0.6em;
    background: #3498db;
    border-radius: 0.2em;
    font-size: 1em;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    text-decoration: none !important;
}

.notification::before {
    display: block;
    content: "";
    width: 1em;
    height: 1em;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 448 512%27%3E%3Cpath fill=%27white%27 d=%27M208 16c0-8.8 7.2-16 16-16s16 7.2 16 16V32.8c80.9 8 144 76.2 144 159.2v29.1c0 43.7 17.4 85.6 48.3 116.6l2.8 2.8c8.3 8.3 13 19.6 13 31.3c0 24.5-19.8 44.3-44.3 44.3H44.3C19.8 416 0 396.2 0 371.7c0-11.7 4.7-23 13-31.3l2.8-2.8C46.6 306.7 64 264.8 64 221.1V192c0-83 63.1-151.2 144-159.2V16zm16 48C153.3 64 96 121.3 96 192v29.1c0 52.2-20.7 102.3-57.7 139.2L35.6 363c-2.3 2.3-3.6 5.4-3.6 8.7c0 6.8 5.5 12.3 12.3 12.3H403.7c6.8 0 12.3-5.5 12.3-12.3c0-3.3-1.3-6.4-3.6-8.7l-2.8-2.8c-36.9-36.9-57.7-87-57.7-139.2V192c0-70.7-57.3-128-128-128zM193.8 458.7c4.4 12.4 16.3 21.3 30.2 21.3s25.8-8.9 30.2-21.3c2.9-8.3 12.1-12.7 20.4-9.8s12.7 12.1 9.8 20.4C275.6 494.2 251.9 512 224 512s-51.6-17.8-60.4-42.7c-2.9-8.3 1.4-17.5 9.8-20.4s17.5 1.4 20.4 9.8z%27/%3E%3C/svg%3E");
    transform-origin: top center;
}

.notification::after {
    font-size: 0.7em;
    font-weight: 900;
    position: absolute;
    top: -5px;
    right: -8px;
    padding: 8px 8px 8px 8px;
    display: flex;
    justify-content: center;
    align-self: center;
    line-height: 1%;
    border: 2px #fff solid;
    border-radius: 50%;
    background: deepskyblue;
    opacity: 0;
    content: attr(data-count);
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    transition: transform, opacity;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}

.notification.notify::before {
    -webkit-animation: ring 1.5s ease;
    animation: ring 1.5s ease;
}

.notification.show-count::after {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

@-webkit-keyframes ring {
    0% {
        -webkit-transform: rotate(35deg);
    }

    12.5% {
        -webkit-transform: rotate(-30deg);
    }

    25% {
        -webkit-transform: rotate(25deg);
    }

    37.5% {
        -webkit-transform: rotate(-20deg);
    }

    50% {
        -webkit-transform: rotate(15deg);
    }

    62.5% {
        -webkit-transform: rotate(-10deg);
    }

    75% {
        -webkit-transform: rotate(5deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
    }
}

@keyframes ring {
    0% {
        -webkit-transform: rotate(35deg);
        transform: rotate(35deg);
    }

    12.5% {
        -webkit-transform: rotate(-30deg);
        transform: rotate(-30deg);
    }

    25% {
        -webkit-transform: rotate(25deg);
        transform: rotate(25deg);
    }

    37.5% {
        -webkit-transform: rotate(-20deg);
        transform: rotate(-20deg);
    }

    50% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
    }

    62.5% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }

    75% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

/*=============END OF NOTIFICATION STYLING .JS ADDED CLASS STYLING FOR THOSE NEW CONTACT,INQUIRY,OR WARNING ICONS ON THE NAVBAR*/
/* =====================================================
   NAVBAR NOTIFICATION ICONS — common_styles.css
   ===================================================== */

/* Base container styles */
.incoming,
.outgoing,
.status_change_warning,
.contact_person,
.message_warning,
.signout,
#guide_nav_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0.5em;
    background: var(--ezinq_theme_color);
    border-radius: 0.2em;
    font-size: 1.1em;
}

/* Shared pseudo-element color */
.incoming::before,
.incoming::after,
.outgoing::before,
.outgoing::after,
.contact_person::before,
.contact_person::after,
.message_warning::before,
.message_warning::after,
.status_change_warning::before,
.status_change_warning::after,
.signout::before,
.signout::after {
    color: white;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Shared ::before icon base */
.incoming::before,
.outgoing::before,
.contact_person::before,
.message_warning::before,
.status_change_warning::before,
.signout::before {
    display: block;
    content: "";
    width: 1em;
    height: 1em;
    background-size: contain;
    background-repeat: no-repeat;
    transform-origin: bottom center;
    margin-top: 0.1em;
}

/* Wider icon sizes */
/* Navigation: .contact_person/.message_warning ::before → aspect-correct sizing
   Purpose: both icons' source SVGs have a 640x512 viewBox (1.25:1, wider than tall),
   unlike every other icon here which is taller-than-wide or square. Forcing them into
   an equal SQUARE box (old: 1.2em x 1.2em) made `background-size:contain` letterbox
   them — width filled the box, but height shrank to ~0.96em to preserve the SVG's own
   aspect ratio, landing shorter than the other icons despite the bigger box. Matching
   the box's aspect ratio to the SVG's own (1.25:1) removes the letterboxing entirely,
   so the rendered glyph fills the box on both axes — height now matches
   .status_change_warning's rendered ~1em exactly, no wasted space, no top-align artifact. */
.contact_person::before,
.message_warning::before {
    width: 1.25em;
    height: 1em;
}

.incoming::before,
.outgoing::before {
    width: 0.75em;
    height: 1em;
}

/* Individual SVG icons — default (white) */
.status_change_warning::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 448 512%27%3E%3Cpath d=%27M208 16c0-8.8 7.2-16 16-16s16 7.2 16 16V32.8c80.9 8 144 76.2 144 159.2v29.1c0 43.7 17.4 85.6 48.3 116.6l2.8 2.8c8.3 8.3 13 19.6 13 31.3c0 24.5-19.8 44.3-44.3 44.3H44.3C19.8 416 0 396.2 0 371.7c0-11.7 4.7-23 13-31.3l2.8-2.8C46.6 306.7 64 264.8 64 221.1V192c0-83 63.1-151.2 144-159.2V16zm16 48C153.3 64 96 121.3 96 192v29.1c0 52.2-20.7 102.3-57.7 139.2L35.6 363c-2.3 2.3-3.6 5.4-3.6 8.7c0 6.8 5.5 12.3 12.3 12.3H403.7c6.8 0 12.3-5.5 12.3-12.3c0-3.3-1.3-6.4-3.6-8.7l-2.8-2.8c-36.9-36.9-57.7-87-57.7-139.2V192c0-70.7-57.3-128-128-128zM193.8 458.7c4.4 12.4 16.3 21.3 30.2 21.3s25.8-8.9 30.2-21.3c2.9-8.3 12.1-12.7 20.4-9.8s12.7 12.1 9.8 20.4C275.6 494.2 251.9 512 224 512s-51.6-17.8-60.4-42.7c-2.9-8.3 1.4-17.5 9.8-20.4s17.5 1.4 20.4 9.8z%27 fill=%27%23FFFFFF%27/%3E%3C/svg%3E");
}

.incoming::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 384 512%27%3E%3Cpath d=%27M320 480H64c-17.7 0-32-14.3-32-32V64c0-17.7 14.3-32 32-32H192V144c0 26.5 21.5 48 48 48H352V448c0 17.7-14.3 32-32 32zM240 160c-8.8 0-16-7.2-16-16V32.5c2.8 .7 5.4 2.1 7.4 4.2L347.3 152.6c2.1 2.1 3.5 4.6 4.2 7.4H240zM64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V163.9c0-12.7-5.1-24.9-14.1-33.9L254.1 14.1c-9-9-21.2-14.1-33.9-14.1H64zM208 240c0-8.8-7.2-16-16-16s-16 7.2-16 16V361.4l-52.7-52.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l80 80c6.2 6.2 16.4 6.2 22.6 0l80-80c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L208 361.4V240z%27 fill=%27%23FFFFFF%27/%3E%3C/svg%3E");
}

.outgoing::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 384 512%27%3E%3Cpath d=%27M320 480H64c-17.7 0-32-14.3-32-32V64c0-17.7 14.3-32 32-32H192V144c0 26.5 21.5 48 48 48H352V448c0 17.7-14.3 32-32 32zM240 160c-8.8 0-16-7.2-16-16V32.5c2.8 .7 5.4 2.1 7.4 4.2L347.3 152.6c2.1 2.1 3.5 4.6 4.2 7.4H240zM64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V163.9c0-12.7-5.1-24.9-14.1-33.9L254.1 14.1c-9-9-21.2-14.1-33.9-14.1H64zM208 278.6l52.7 52.7c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-80-80c-6.2-6.2-16.4-6.2-22.6 0l-80 80c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L176 278.6V400c0 8.8 7.2 16 16 16s16-7.2 16-16V278.6z%27 fill=%27%23FFFFFF%27/%3E%3C/svg%3E");
}

.contact_person::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 640 512%27%3E%3Cpath d=%27M128 128a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zM269.7 336c80 0 145 64.3 146.3 144H32c1.2-79.7 66.2-144 146.3-144h91.4zM224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3zm457-116.7c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L496 281.4l-52.7-52.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l64 64c6.2 6.2 16.4 6.2 22.6 0l128-128z%27 fill=%27%23FFFFFF%27/%3E%3C/svg%3E");
}

.message_warning::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 640 512%27%3E%3Cpath d=%27M202.7 288H352c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32H64C46.3 32 32 46.3 32 64V256c0 17.7 14.3 32 32 32H96c17.7 0 32 14.3 32 32v16l55.5-41.6c5.5-4.2 12.3-6.4 19.2-6.4zM352 320H202.7l-81.1 60.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3V352 320H64c-35.3 0-64-28.7-64-64V64C0 28.7 28.7 0 64 0H352c35.3 0 64 28.7 64 64V256c0 35.3-28.7 64-64 64zM320 448c-35.3 0-64-28.7-64-64V352h32v32c0 17.7 14.3 32 32 32H437.3c6.9 0 13.7 2.2 19.2 6.4L512 464V448c0-17.7 14.3-32 32-32h32c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32H448V128H576c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H544v32 16c0 6.1-3.4 11.6-8.8 14.3s-11.9 2.1-16.8-1.5L437.3 448H320z%27 fill=%27%23FFFFFF%27/%3E%3C/svg%3E");
}

.signout::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 512 512%27%3E%3Cpath d=%27M479.2 254.2c.5 .5 .8 1.1 .8 1.8s-.3 1.4-.8 1.8L347.3 382.2c-1.2 1.2-2.9 1.8-4.6 1.8c-3.7 0-6.7-3-6.7-6.7l0-57.3c0-8.8-7.2-16-16-16l-120 0c-4.4 0-8-3.6-8-8l0-80c0-4.4 3.6-8 8-8l120 0c8.8 0 16-7.2 16-16l0-57.3c0-3.7 3-6.7 6.7-6.7c1.7 0 3.3 .7 4.6 1.8L479.2 254.2zM512 256c0-9.5-3.9-18.6-10.8-25.1L369.2 106.5C362 99.8 352.5 96 342.7 96c-21.4 0-38.7 17.3-38.7 38.7l0 41.3-104 0c-22.1 0-40 17.9-40 40l0 80c0 22.1 17.9 40 40 40l104 0 0 41.3c0 21.4 17.3 38.7 38.7 38.7c9.9 0 19.4-3.8 26.5-10.5L501.2 281.1c6.9-6.5 10.8-15.6 10.8-25.1zM176 64c8.8 0 16-7.2 16-16s-7.2-16-16-16L80 32C35.8 32 0 67.8 0 112L0 400c0 44.2 35.8 80 80 80l96 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-96 0c-26.5 0-48-21.5-48-48l0-288c0-26.5 21.5-48 48-48l96 0z%27 fill=%27%23FFFFFF%27/%3E%3C/svg%3E");
}

/* guide_nav_btn — separate ::before since it has different base size */
#guide_nav_btn::before {
    display: block;
    content: "";
    width: 1.2em;
    height: 1.2em;
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 0.1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 512 512%27%3E%3Cpath d=%27M256 32a224 224 0 1 1 0 448 224 224 0 1 1 0-448zm0 480A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm72.7-256L208 329.7V182.3L328.7 256zM212.5 147.5c-7.4-4.5-16.7-4.7-24.3-.5s-12.3 12.3-12.3 20.9V344c0 8.7 4.7 16.7 12.3 20.9s16.8 4.1 24.3-.5l144-88c7.1-4.4 11.5-12.1 11.5-20.5s-4.4-16.1-11.5-20.5l-144-88z%27 fill=%27%23FFFFFF%27/%3E%3C/svg%3E");
}

/* Shared ::after badge styles */
.incoming::after,
.outgoing::after,
.contact_person::after,
.message_warning::after,
.status_change_warning::after,
.signout::after {
    font-size: 0.7em;
    font-weight: 900;
    position: absolute;
    top: -3px;
    right: -8px;
    padding: 6px;
    display: flex;
    justify-content: center;
    align-self: center;
    line-height: 1%;
    border: 1px red solid;
    border-radius: 3px;
    background: red;
    opacity: 0;
    content: attr(data-count);
    transform: scale(0.5);
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

/* Combined notify animation — was repeated 5 times separately */
.incoming.notify::before,
.outgoing.notify::before,
.contact_person.notify::before,
.message_warning.notify::before,
.status_change_warning.notify::before {
    animation: ring 1.5s ease;
}

/* Combined show-count badge — was repeated 5 times separately */
.incoming.show-count::after,
.outgoing.show-count::after,
.contact_person.show-count::after,
.message_warning.show-count::after,
.status_change_warning.show-count::after {
    transform: scale(1);
    opacity: 1;
}

/* Hover states — individual SVG color changes */
.status_change_warning:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 448 512%27%3E%3Cpath d=%27M208 16c0-8.8 7.2-16 16-16s16 7.2 16 16V32.8c80.9 8 144 76.2 144 159.2v29.1c0 43.7 17.4 85.6 48.3 116.6l2.8 2.8c8.3 8.3 13 19.6 13 31.3c0 24.5-19.8 44.3-44.3 44.3H44.3C19.8 416 0 396.2 0 371.7c0-11.7 4.7-23 13-31.3l2.8-2.8C46.6 306.7 64 264.8 64 221.1V192c0-83 63.1-151.2 144-159.2V16zm16 48C153.3 64 96 121.3 96 192v29.1c0 52.2-20.7 102.3-57.7 139.2L35.6 363c-2.3 2.3-3.6 5.4-3.6 8.7c0 6.8 5.5 12.3 12.3 12.3H403.7c6.8 0 12.3-5.5 12.3-12.3c0-3.3-1.3-6.4-3.6-8.7l-2.8-2.8c-36.9-36.9-57.7-87-57.7-139.2V192c0-70.7-57.3-128-128-128zM193.8 458.7c4.4 12.4 16.3 21.3 30.2 21.3s25.8-8.9 30.2-21.3c2.9-8.3 12.1-12.7 20.4-9.8s12.7 12.1 9.8 20.4C275.6 494.2 251.9 512 224 512s-51.6-17.8-60.4-42.7c-2.9-8.3 1.4-17.5 9.8-20.4s17.5 1.4 20.4 9.8z%27 fill=%27yellow%27/%3E%3C/svg%3E");
}

.incoming:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 384 512%27%3E%3Cpath d=%27M320 480H64c-17.7 0-32-14.3-32-32V64c0-17.7 14.3-32 32-32H192V144c0 26.5 21.5 48 48 48H352V448c0 17.7-14.3 32-32 32zM240 160c-8.8 0-16-7.2-16-16V32.5c2.8 .7 5.4 2.1 7.4 4.2L347.3 152.6c2.1 2.1 3.5 4.6 4.2 7.4H240zM64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V163.9c0-12.7-5.1-24.9-14.1-33.9L254.1 14.1c-9-9-21.2-14.1-33.9-14.1H64zM208 240c0-8.8-7.2-16-16-16s-16 7.2-16 16V361.4l-52.7-52.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l80 80c6.2 6.2 16.4 6.2 22.6 0l80-80c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L208 361.4V240z%27 fill=%27yellow%27/%3E%3C/svg%3E");
}

.outgoing:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 384 512%27%3E%3Cpath d=%27M320 480H64c-17.7 0-32-14.3-32-32V64c0-17.7 14.3-32 32-32H192V144c0 26.5 21.5 48 48 48H352V448c0 17.7-14.3 32-32 32zM240 160c-8.8 0-16-7.2-16-16V32.5c2.8 .7 5.4 2.1 7.4 4.2L347.3 152.6c2.1 2.1 3.5 4.6 4.2 7.4H240zM64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V163.9c0-12.7-5.1-24.9-14.1-33.9L254.1 14.1c-9-9-21.2-14.1-33.9-14.1H64zM208 278.6l52.7 52.7c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-80-80c-6.2-6.2-16.4-6.2-22.6 0l-80 80c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L176 278.6V400c0 8.8 7.2 16 16 16s16-7.2 16-16V278.6z%27 fill=%27yellow%27/%3E%3C/svg%3E");
}

.contact_person:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 640 512%27%3E%3Cpath d=%27M128 128a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zM269.7 336c80 0 145 64.3 146.3 144H32c1.2-79.7 66.2-144 146.3-144h91.4zM224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3zm457-116.7c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L496 281.4l-52.7-52.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l64 64c6.2 6.2 16.4 6.2 22.6 0l128-128z%27 fill=%27yellow%27/%3E%3C/svg%3E");
}

.message_warning:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 640 512%27%3E%3Cpath d=%27M202.7 288H352c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32H64C46.3 32 32 46.3 32 64V256c0 17.7 14.3 32 32 32H96c17.7 0 32 14.3 32 32v16l55.5-41.6c5.5-4.2 12.3-6.4 19.2-6.4zM352 320H202.7l-81.1 60.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3V352 320H64c-35.3 0-64-28.7-64-64V64C0 28.7 28.7 0 64 0H352c35.3 0 64 28.7 64 64V256c0 35.3-28.7 64-64 64zM320 448c-35.3 0-64-28.7-64-64V352h32v32c0 17.7 14.3 32 32 32H437.3c6.9 0 13.7 2.2 19.2 6.4L512 464V448c0-17.7 14.3-32 32-32h32c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32H448V128H576c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H544v32 16c0 6.1-3.4 11.6-8.8 14.3s-11.9 2.1-16.8-1.5L437.3 448H320z%27 fill=%27yellow%27/%3E%3C/svg%3E");
}

.signout:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 512 512%27%3E%3Cpath d=%27M479.2 254.2c.5 .5 .8 1.1 .8 1.8s-.3 1.4-.8 1.8L347.3 382.2c-1.2 1.2-2.9 1.8-4.6 1.8c-3.7 0-6.7-3-6.7-6.7l0-57.3c0-8.8-7.2-16-16-16l-120 0c-4.4 0-8-3.6-8-8l0-80c0-4.4 3.6-8 8-8l120 0c8.8 0 16-7.2 16-16l0-57.3c0-3.7 3-6.7 6.7-6.7c1.7 0 3.3 .7 4.6 1.8L479.2 254.2zM512 256c0-9.5-3.9-18.6-10.8-25.1L369.2 106.5C362 99.8 352.5 96 342.7 96c-21.4 0-38.7 17.3-38.7 38.7l0 41.3-104 0c-22.1 0-40 17.9-40 40l0 80c0 22.1 17.9 40 40 40l104 0 0 41.3c0 21.4 17.3 38.7 38.7 38.7c9.9 0 19.4-3.8 26.5-10.5L501.2 281.1c6.9-6.5 10.8-15.6 10.8-25.1zM176 64c8.8 0 16-7.2 16-16s-7.2-16-16-16L80 32C35.8 32 0 67.8 0 112L0 400c0 44.2 35.8 80 80 80l96 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-96 0c-26.5 0-48-21.5-48-48l0-288c0-26.5 21.5-48 48-48l96 0z%27 fill=%27red%27/%3E%3C/svg%3E");
}

#guide_nav_btn:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 512 512%27%3E%3Cpath d=%27M256 32a224 224 0 1 1 0 448 224 224 0 1 1 0-448zm0 480A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm72.7-256L208 329.7V182.3L328.7 256zM212.5 147.5c-7.4-4.5-16.7-4.7-24.3-.5s-12.3 12.3-12.3 20.9V344c0 8.7 4.7 16.7 12.3 20.9s16.8 4.1 24.3-.5l144-88c7.1-4.4 11.5-12.1 11.5-20.5s-4.4-16.1-11.5-20.5l-144-88z%27 fill=%27yellow%27/%3E%3C/svg%3E");
}

/* Ring animation — used by .notify::before */
@keyframes ring {
    0% {
        transform: rotate(35deg);
    }

    12.5% {
        transform: rotate(-30deg);
    }

    25% {
        transform: rotate(25deg);
    }

    37.5% {
        transform: rotate(-20deg);
    }

    50% {
        transform: rotate(15deg);
    }

    62.5% {
        transform: rotate(-10deg);
    }

    75% {
        transform: rotate(5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/*help page and home page batch list both are using this*/
.accordion_content,
.accordion_inner_tbl {
    /*display:none;*/
    margin-top: 0;
    width: 100%;
    padding: 0;
    border-bottom: 2px solid var(--top_title_light);
    border-right: 2px solid var(--top_title_light);
    border-left: 2px solid var(--top_title_light);
}

/*below webkit and moz-app pseudo  are for input type=nummber hiding numbers spinbox*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0;
    /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    appearance: textfield;
    -moz-appearance: textfield;
    /* Firefox */
}

/*************************below .image_wrapper class is for the nubmers of gallery imgs*/
/***************************************************************************************/
.image_wrapper {
    position: relative;
}

.image_wrapper::after {
    content: attr(data-gallery_image);
    position: absolute;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px 0 4px 0;
    line-height: 1.4;
}

textarea:not(.homeinput) {
    color: #666;
    font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
    box-shadow: inset 0 0 0.25rem #ddd;
    background-color: #f5f5f5;
    border-radius: 3px;
    border: 1px solid #ddd;
    outline: none !important;
    resize: none;
    padding: 10px;
    width: 100%;
}

.currency_span {
    text-align: center;
    font-size: 14px;
}

#warning_messages .dropdown-menu {
    padding: 0 !important;
}

/*==============.inq_img_td class STYLING */
/*.inq_img_td class and .inq_img_td img are commonly used particularly in homepage different sections like contacts purchases inquiries etc to set img size*/
.inq_img_td {
    padding: .4rem !important;
    position: relative;
    min-height: var(--table_row_height);
}

.inq_img_td div {
    display: flex;
    justify-content: center;
}

.inq_img_td img {
    width: 100%;
    border-radius: 5px;
    display: block;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background-color: var(--skeleton_color, #f0f0f0);
}

/*========== IMAGE LAZY LOAD PLACEHOLDER ==========*/
.wb-card-img-wrap img {
    aspect-ratio: 1 / 1;
    background-color: var(--skeleton_color, #f0f0f0);
    object-fit: cover;
}

/*========== END IMAGE LAZY LOAD PLACEHOLDER ==========*/
/*========== END IMAGE LAZY LOAD PLACEHOLDER ==========*/
.inq_img_td img:hover:not(.missing_img):not(.not_viewable):not(.holdable) {
    cursor: zoom-in;
}

.inq_img_td img.missing_img:hover {
    cursor: copy;
}

.inq_img_td img.holdable:hover {
    cursor: grab;
}

/*===========END OF .inq_img_td class*/


/*=============END OF CODES ARE SHARED BETWEEN MY_PAGE AND ADMIN_HOME AND CAN BE SEPARATED LATER MAYBE*/
/*=========PUBLIC AND APP NAVBAR USED==========*/
.dropdown_common {
    position: absolute !important;
    max-height: 300px;
    overflow-y: auto;
    width: 250px;
    padding: 0 !important;
}

.dropdown_common.single_page {
    width: 250px;
}

/*=========END OF PUBLIC AND APP NAVBAR USED==========*/
/*============SERVICE PAGE CARDS AND ITS IMITATION INSIDE MODAL IN ADMIN PAGE =========*/
.con_card:focus {
    border: 4px solid var(--ezinq_theme_color);
}

.con_card::after {
    position: absolute;
    content: "";
    width: 24px;
    height: 24px;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 448 512%27%3E%3Cpath fill=%27%2303396c%27 d=%27M443.3 100.7c6.2 6.2 6.2 16.4 0 22.6l-272 272c-6.2 6.2-16.4 6.2-22.6 0l-144-144c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0L160 361.4 420.7 100.7c6.2-6.2 16.4-6.2 22.6 0z%27/%3E%3C/svg%3E");
    bottom: 0;
    right: 0;
    border: 3px solid var(--ezinq_theme_color);
    padding: 10px 10px 10px 10px;
}

.con_card::before {
    position: absolute;
    content: attr(data-boughtitem);
    top: 0;
    left: -30px;
    color: gray;
    font-weight: Bold;
    padding: 10px 10px 10px 10px;
    font-size: 14px;
    transform: rotate(-30deg);
    display: none;
}

.con_card.boughtitem::before {
    display: block;
}

.con_card.cancelleditem::before {
    display: block;
}

.con_card.hidePseduo::after {
    display: none;
}

.con_card.boughtitem::before {
    display: block;
}

.con_card.cancelleditem::before {
    display: block;
}

.con_card.hidePseduo::after {
    display: none;
}

.con_card_header {
    font-size: 16px;
    font-weight: normal;
}

.con_card_footer {
    font-size: 12px;
    font-weight: normal;
}

.currency_symbol {
    font-size: 1rem;
}

.per_time {
    display: block;
    font-size: 12px;
}

.bundle_title {
    top: 0;
    left: 50%;
}

.bundle_title label {
    padding: 5px;
    background-color: orange;
    border-radius: 3px;
    font-size: 24px;
}

.bundle_card {
    width: 400px;
}

.con_card {
    position: relative;
    min-width: 100px;
    text-align: center;
    border: 2px solid var(--top_title_light);
    padding: 50px;
    cursor: pointer;
}

/*============END OF SERVICE PAGE CARDS AND ITS IMITATION INSIDE MODAL IN ADMIN PAGE =========*/
.card-body {
    padding-left: 2px !important;
    padding-right: 2px !important;
}

.hr_main_class {
    border: 0;
    clear: both;
    display: block;
    width: 100%;
    margin: 0;
    background-color: var(--ezinq_theme_color);
    height: 1px;
}

.individual_gallery_missing {
    width: 20%;
    float: left;
    padding: 5px;
    max-width: 100%;
    text-align: center;
    cursor: pointer;
}

/*below .currency_title class is for all table titles with price th which includes span element
with this classname to show currency:*/
/* .currency_title {
    font-weight: bolder;
} */

.width_50_percent {
    width: 50%;
}

.width_40_percent {
    width: 40%;
}

/*below hide_at_opening class is used for some left_side btns in some pages like batch_order.php and batch_inquiry_display_all.php to hide some btns on loading*/
/* Navigation: .hide_at_opening → beats same-specificity display rules (e.g.
   .section_row_two_tab_container) via doubled class selector, NOT !important.
   !important was tried and reverted — it also beat jQuery's inline .show()/.hide()
   styles, which are NORMAL-priority declarations and only outrank NORMAL stylesheet
   rules, not !important ones. This doubled-selector trick raises specificity (0,2,0
   vs 0,1,0) enough to win the paint-time tie against other classes, while remaining
   a normal-priority rule that inline styles still override correctly. */
.hide_at_opening {
    display: none !important;
}

.purc_sum_lbl_left {
    float: left;
    font-size: 12px;
}

.purc_sum_lbl_right {
    float: right;
    font-size: 12px;
}

/*===============================*/
.tooltip-inner {
    border-radius: 8px;
    box-shadow: 3px 2px 8px #800000;
    max-width: 500px !important;
}

/*===============================*/
/*.error_title is used both in reset_password.php and error.php*/
.error_title {
    color: var(--ezinq_theme_color)
}

/*===============================*/
/* Public dropdown list — used across search autocomplete and item selection dropdowns */
.public_dropdown_ul {
    list-style-type: none;
    margin: auto;
    padding: 5px;
}

.public_dropdown_ul li {
    margin-bottom: var(--li_bottom_margin);
    border-radius: var(--li_border_radius);
}

.public_dropdown_ul li:not(:has(a)) {
    padding: 8px 12px;
}

.public_dropdown_ul li:hover:not(:has(a.btn_danger)) {
    background-color: var(--ezinq_theme_color);
    cursor: pointer;
    color: white;
}

.public_dropdown_ul li:hover:has(a.btn_danger) {
    background-color: #d93025;
    cursor: pointer;
    color: white;
}

#cat_list.dropdown-menu {
    max-height: 400px;
    overflow-y: auto;
}

/*below rule is for if inside dropdown there is a tab and selected , selected effects with ezinq theme color and if it is with shadow, it touches another one while hovering.*/
.public_dropdown_ul li.active_display_section_btn,
.public_dropdown_ul li .active_display_section_btn {
    background-color: var(--ezinq_theme_color);
    color: white;
    box-shadow: none !important;
    border-bottom: none !important;
    font-weight: normal;
}

.public_dropdown_ul li .display_section_btn {
    border-radius: inherit;
}

.public_dropdown_ul a {
    color: black;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    font-size: 14px;
    text-decoration: none;
    min-width: 0;
    white-space: normal;
    word-break: break-word;
}

.public_dropdown_ul li:hover a {
    color: white;
}

.public_dropdown_ul li:hover a .remove_danger {
    color: red;
}

.public_dropdown_ul li:hover .ezinq-svg-icon.remove_danger {
    color: red;
}

.public_dropdown_ul li:hover .remove_danger .ezinq-svg-icon {
    color: red;
}

.public_dropdown_ul li:hover .ezinq-svg-icon {
    color: white;
}

.public_dropdown_div {
    padding: 5px;
}

/* Danger items inside any dropdown: red text by default (no background), hover
   matches other dropdown items (theme color background + white text) — avoids the
   border-radius/background collision from .btn_danger's own rounded background */
.public_dropdown_ul li a.btn_danger {
    color: #d93025;
    background: transparent !important;
    border: none !important;
    border-radius: var(--li_border_radius);
}

.public_dropdown_ul li:hover a.btn_danger {
    color: white;
}

/*===================================*/
.card {
    background-color: var(--sidebar-surface) !important;
    margin-bottom: 5px !important;
    border: none !important;
    border-right: 1px solid #e5e7eb;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.double_click_select_disable {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
}

/*===========LIGHTBOX OVERRIDE============================*/

.lb-nav a.lb-next,
.lb-nav a.lb-prev {
    /*this is the to show the arrows on lightbox image display always on */
    opacity: 1 !important;
}

.lightbox .lb-image {
    border-radius: 3px;

    /* Image border */
    border: 4px solid white;
}

/*=====================================*/
/* Fixes: Bootstrap .table-striped zebra overriding .selected_tr on odd rows
   Strengthens existing tr.selected_tr td rule to beat Bootstrap striped specificity */
table.table-striped tbody tr.selected_tr td {
    background-color: var(--ezinq_theme_color) !important;
    color: white !important;
}

tr.selected_tr td {
    background-color: var(--ezinq_theme_color);
    color: white;
}

/*settings page product category section hover each li element and display control buttons like delete,move up move down*/
/*
 * CATEGORY CONTROL ICONS - SHARED STRUCTURE (generated by jsonArrayToUllist in utilities.js)
 * Despite the "settings_" prefix in these class names, these rules belong here and not in
 * settings.css because the HTML structure they style is generated by jsonArrayToUllist()
 * which is a shared utility function used across multiple pages.
 * .setting_product_cat_li provides the relative positioning context for the absolutely
 * positioned control icons wrapper. .settings_cat_control_icons_wrapper defines the default
 * hidden state and layout of the control buttons div that jsonArrayToUllist renders in its
 * default branch. The actual show/hide on hover is handled by SettingsProductCategoryManager
 * via JS — that part is settings-specific. But the base structure and default hidden state
 * are concerns of the shared HTML output, so they live here.
 */
.setting_product_cat_li {
    position: relative;
}

.settings_cat_control_icons_wrapper {
    position: absolute;
    display: flex;
    justify-content: center;
    top: 1px;
    left: 100%;
    text-wrap: nowrap;
    background-color: white !important;
    display: none !important;
    border-radius: 5px;
    margin-top: 3px;
    margin-bottom: 3px;
}

@media screen and (max-width: 991px) {

    .link_effect,
    .link_effect_light,
    .link_effect_blue {
        font-size: 12px;
    }

    /*=========================*/
    /* .btn_writing {
        text-align: center;
    } */

    /*below .btn_writing.btn_span and .space_span classes are for empty space and writings
    of side panels not on tables or in modal windows (their space class is
    writings are just .btn_span*/
    .btn_writing span.btn_span {
        /* display: none; */
        font-size: 13px;
    }

    .update_product_image {
        width: 70%;
    }
}

@media screen and (max-width: 768px) {
    .card-body {
        padding: 10px 2px 10px 2px !important;
    }

    /*=========================*/
    .modal-title {
        font-size: 12px;
    }

    .hidden_767 {
        display: none !important;
    }

    .showHideShowSpan {
        /*used especially on navbar home,settings etc btn to hide and show writings again in smallest screen.*/
        display: inline-block;
    }

    .currency_span {
        text-align: center;
        font-size: 0.67rem !important;
    }

    .top_menu li {
        border: none;
    }
}

@media screen and (max-width: 576px) {
    .inq_img_td {
        padding: .1rem !important;
    }

    /*=========================*/
    .btn_writing {
        height: auto;
        margin-top: 0;
    }

    /*=========================*/
    /*=========PUBLIC AND APP NAVBAR USED==========*/
    .dropdown_common {
        width: 50vw;
    }

    /*=========END OF PUBLIC AND APP NAVBAR USED==========*/
    .tooltip {
        /*hiding all tooltips for phone screen which is very disturbing.*/
        display: none;
    }

    /*below .active_display_section_btn.side_display_btn are together active side display btn and we get rid of box shadow and blur effect in small screen*/
    .home_display_active.side_display_btn {
        /*get rid of shadow in small screen when the btns are top as flex column*/
        box-shadow: 0 0 0 var(--ezinq_theme_color), 0 0 0 var(--ezinq_theme_color) !important;
        color: white;
    }

    /*..btn_span on many buttons including some modals and main tables*/
    /* button .btn_span {
        display: none;
    } */

    .side_detail_inner {
        padding: 10px 0;
    }

    .inq_img_td img {
        width: 100%;
    }
}

@media screen and (max-width: 480px) {}
/* Navigation: .page_footer_info → generic bottom-of-page footer wrapper (index.php)
   Purpose: narrow, centered footer holding the ICP link (and room for future
   items — trademark, copyright, etc). margin-top:auto is what actually pins it
   to the bottom of .main-content's new flex column on short content, same
   technique already used for the sidebar's ICP placement — consumes remaining
   flex space so it sits at the bottom without position:fixed/absolute, and
   never overlaps content since flex reserves its own space rather than
   floating over it. */
.page_footer_info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 16px 10px;
    width: 100%;
    margin-top: auto;
}
/* Navigation: common_styles.css → .icp-badge
   Purpose: shared base style for the ICP filing link, used on every page (public +
   app + settings). Positioning is intentionally NOT set here — each context
   (sidebar bottom, index footer, settings-about) applies its own modifier class
   for placement, layering on top of this shared look. */
.icp-badge {
    /* Navigation: display:inline-flex, not flex — flex creates a block-level box
       that stretches to fill its parent's width by default (like a plain div),
       which is what caused the badge to left-align inside a full-width footer on
       registration.php. inline-flex still lays out the icon+text internally via
       flex, but sizes the whole box to its own content, so it can never stretch
       regardless of what container it's placed in — also what correctly lets a
       future second footer item (e.g. trademark) sit beside it without either
       one hogging space. */
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* Navigation: font-size/color tuned to match typical Chinese web/app ICP-filing
       footer convention — small, muted "compliance footnote" styling (10-12px,
       light gray), not a prominent nav-style element competing for attention. */
    font-size: 11px;
    color: #999;
    text-decoration: none;
    white-space: nowrap;
}

.icp-badge:hover {
    color: var(--ezinq_theme_color);
}

.icp-badge:hover {
    color: var(--ezinq_theme_color);
}
/* ===== GUIDE NAV DROPDOWN ===== */
.guide_nav_dropdown {
    min-width: 200px;
    padding: 4px 0;
}

.guide_nav_dropdown .public_dropdown_ul {
    margin: 0;
    padding: 4px;
}

.guide_nav_dropdown .public_dropdown_ul li {
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 13px;
    color: #222;
    margin-bottom: 2px;
}

.guide_nav_dropdown .public_dropdown_ul li:hover {
    background-color: var(--tr_focused_color);
    color: white;
}

.guide_nav_dropdown .public_dropdown_ul li:hover .ezinq-svg-icon {
    color: white;
}

/* Separator before help/more row */
.guide_nav_dropdown .guide_nav_help_item {
    border-top: 1px solid #e0e0e0;
    margin-top: 4px;
    padding-top: 8px !important;
    color: #03396c;
    font-weight: 500;
}

.guide_nav_dropdown .guide_nav_help_item:hover {
    background-color: var(--tr_focused_color);
    color: white;
}
/* Navigation: .guide_nav_dropdown .icon_text_inline → text wrap override
   Purpose: base .icon_text_inline is inline-flex (like public_dropdown_ul a
   elsewhere) — same flex min-width:auto overflow issue, but scoped narrowly
   here rather than touching the generic class, since .icon_text_inline is
   used app-wide for unrelated icon+text alignment with no overflow problem
   there. Only guide dropdown's video-title/help rows need wrapping.
*/
.guide_nav_dropdown .icon_text_inline {
    min-width: 0;
    white-space: normal;
    word-break: break-word;
    align-items: flex-start;
}
/* ===== END OF GUIDE NAV DROPDOWN ===== */
/*display_upload_section_btn - display_match_against_btn - display_upload_preexisting_ord_btn - display_upload_supp_price_btn*/
.tutorial_link {
    color: white;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    transition: all 0.3s ease;
}

.tutorial_link:hover {
    background: rgba(255, 255, 255, 0.3);
    color: white;
    text-decoration: none;
    /* transform: translateY(-2px); */
}

.tutorial_link {
    font-size: 12px;
}

.tutorial_link.index_tut {
    font-size: 14px;
    color: black;
}

.pack_each_data_row:hover td {
    background: var(--tr_focused_color);
}
#cat_list.cat_list_cls {
    z-index: 1050;
}

#cat_list.cat_list_cls a:hover {
    background-color: var(--ezinq_theme_color);
    color: white;
}
/* category list style used both in homepage and settings*/
.cat_list_cls ul {
    margin-top: 0;
    padding-top: 0;
    /* width:100%;
    overflow: auto; */
    font-size: 14px;
    font-weight: normal;
    margin-top: 3px;
}

.cat_list_cls li {
    position: relative;
}

/* UL Layer 3 Rules */
.cat_list_cls ul ul {
    font-size: 12px;
}

/* UL 4 Rules */

.cat_list_cls ul ul ul {
    font-size: 12px;
}

.cat_list_cls ul li:before {
    position: absolute;
    content: '';
    display: inline-block;
    height: 25px;
    width: 35px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: -35px;
}

.cat_list_cls a:not(.settings_control_wrapper_anchor),
#add_item_to_cat_tbl a {
    display: block;
    color: black;
    padding: 10px;
    text-decoration: none;

}

.cat_list_cls,
.cat_list_cls ul,
#add_item_to_cat_tbl,
#add_item_to_cat_tbl ul {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    list-style-type: none;
    margin-left: 0;
    padding-left: 10px;
    text-indent: -4px;

}

.cat_list_cls,
#add_item_to_cat_tbl {
    left: 0;
    z-index: 100;
    background-color: white;
    margin-top: 10px;
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
}
#cat_list.cat_list_cls {
    font-size: 14px;
    font-weight: 500;
}
/* Scoped override: #cat_list is now a real Bootstrap dropdown-menu, whose own
   display:none/show toggle must control visibility — the shared .cat_list_cls
   display:inline-block above was keeping it visible regardless of Bootstrap's state. */
#cat_list.cat_list_cls {
    display: none;
}

#cat_list.cat_list_cls.show {
    display: block;
}
/* Navigation: fillCategories() "All" option → .cat_all_chevron
   Purpose: the "All" row is the only category entry using an inline SVG icon next
   to its text (all other rows use a ::before background-image chevron, positioned
   outside the text flow, so .icon_text_inline's gap never applied to them). Adds a
   small extra nudge so "All" visually matches the spacing the other rows get from
   their absolutely-positioned :before chevron. */
.cat_all_chevron {
    margin-right: 0.15rem;
}
/* End of category list style used both in homepage and settings*/
/* CHAT WINDOW FOR BOTH INQUIRY AND GENERAL CHAT STYLING*/
.item_cvrs_sent {
    display: inline-block;
    position: relative;
}

.select_sent_cvrs_lbl {
    position: absolute;
    top: 2px;
    right: 2px;
    margin: 0 auto;
    opacity: 0;
}

.sent_cvrs_img_display {
    opacity: 0;
}

.sent_cvrs_img_hide {
    opacity: 1;
}
/* Checkmark indicator for hide_existing_radio_div's dropdown items — shows next to
   the currently selected radio (Hide Existing / Show All), hidden otherwise */
#hide_existing_radio_div label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#hide_existing_radio_div .radio_checkmark {
    display: none;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

#hide_existing_radio_div input[type="radio"]:checked + .btn_icon_text_wrapper + .radio_checkmark {
    display: inline-block;
}
/* END OF CHAT WINDOW FOR BOTH INQUIRY AND GENERAL CHAT STYLING*/
/*for the workbench (customfile) detail content display page purpose badge*/
/* File Purpose Badge Styles which are appearing both on home page custom file creation
and on the custom file detail page on top in the breadcrumb */
.file-purpose-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 8px;
    color: #fff;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.general-badge {
    background-color: var(--purpose-general);
}

.purchase-badge {
    background-color: var(--purpose-purchase);
}

.sales-badge {
    background-color: var(--purpose-sale);
}

.trading-badge {
    background-color: var(--purpose-tradesman);
}

/* Optional: Hover effect */
.file-purpose-badge:hover {
    opacity: 0.85;
}

/*home page file purpose on custom file*/
/* Small purpose badge for file list */
.file-purpose-badge-small {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: absolute;
    top: -4px;
    right: -4px;
    z-index: 1;
    line-height: 0;
}

.file-purpose-badge-small>span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.file-purpose-badge-small .ezinq-svg-icon {
    width: 10px;
    height: 10px;
}

.file-purpose-badge-small svg {
    color: #fff;
}

.customfile_initial_badge_wrapper {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    z-index: 0;
}

.customfile_initial_badge_wrapper .file_purpose_badge {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 0.55rem;
    font-weight: bold;
    padding: 1px 4px;
    border-radius: 50%;
    line-height: 1;
    min-width: 14px;
    text-align: center;
    z-index: 1;
}

div[data-hint]:empty:not(:focus):before,
span[data-hint]:empty:not(:focus):before {
    content: attr(data-hint);
    color: var(--hint_color);
}

.top_title_darkest {
    background-color: var(--top_title_darkest)
}

.top_title_dark {
    background-color: var(--top_title_dark);
}

.clr_blue {
    color: blue;
}

.bck_clr_light_blue {
    background-color: var(--section_color_light_blue);
}


.top_title_light {
    background-color: var(--top_title_light);
}

/* Navigation: .top_title_darkest a → excludes dropdown-menu content
   Purpose: this rule was cascading into .dropdown-menu content nested inside
   .con_header_row (which carries .top_title_darkest), forcing white text onto the
   dropdown's normal light background — invisible until hover flipped the background
   color underneath it. Dropdown menus render on their own light background regardless
   of which dark-styled ancestor opened them, so their links should keep their own
   (dark) default color, not inherit the header's white-on-dark styling.
*/
.top_title_darkest a:not(.dropdown-menu a) {
    color: white;
}

.lightbox {
    position: absolute;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
}

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

/* new button design*/
.modern-btn {
    background: linear-gradient(135deg, #4a90e2, #357abd) !important;
    border: none !important;
    color: white !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.modern-btn:hover {
    background: linear-gradient(135deg, #357abd, #2c5282) !important;
    color: white !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.modern-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

/*end of new button design.*/
.display_flex {
    display: flex;
}

.flex_hrz_center {
    justify-content: center;
}

.flex_vrt_center {
    align-items: center;

}

.flex_dir_col {
    flex-direction: column;
}

.flex_equal {
    flex: 1;
}

.flex_wrap {
    flex-wrap: wrap;
}

.flex_row_center {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.flex_column_center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;

}

.flex_column_center_no_dimension {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.w_md_30 {
    width: 30%;
}

.gap_10 {
    gap: 10px;
}

.w_100 {
    width: 100% !important;
}

.cornered_btn {
    cursor: pointer;
    display: inline-block;
    color: white;
    text-align: center;
    -webkit-transition: 500ms all;
    -moz-transition: 500ms all;
    transition: 500ms all;
    vertical-align: top;
    border-radius: .2rem !important;
}

.clr_red {
    color: red !important;
}

.clr_gray {
    color: gray;
}

.clr_light_gray {
    color: var(--light_border_grey);
}

.fnt_size_18 {
    font-size: 18px !important;
}

.fnt_size_12 {
    font-size: 12px !important;
}

.fnt_size_14 {
    font-size: 14px !important;
}

.ezinq-svg-icon.fnt_size_14 {
    font-size: 14px !important;
}

.text_center {
    text-align: center !important;
    text-align: -moz-center;
    text-align: -webkit-center;
}

.mrg_zero {
    margin: 0 !important;
}

.portioned_tbody .badge {
    font-size: 12px;
    padding: .30rem .65rem .30rem .65rem !important;
    font-weight: normal !important;
}

.portioned_tbody td div:not(.haspadding) {
    padding: 0 !important;
}

.portioned_tbody button {
    padding: .30rem .65rem .30rem .65rem;
    font-size: 14px !important;
    line-height: 1 !important;
}

thead.small_sized_head th {
    font-size: 10px !important;
    font-weight: normal !important;
    text-transform: uppercase;
}

.modal_search_div {
    text-align: center;
    display: table;
    width: 100%;
}

/*below two (.top_middle_search_outer and .top_middle_search_inner) classes are used on search boxes to vertical align on top of tables:*/
.top_middle_search_outer {
    display: table;
    width: 100%;
    text-align: left;
    vertical-align: middle;
}

.top_middle_search_inner {
    display: table-cell;
    vertical-align: middle;
    padding: 0 10px 10px 3px;
    text-align: left;


}

.top_middle_search_inner.image_top_middle_search {
    text-align: left;
    padding: 10px 10px 10px 16px;
}

.modal .modal_warning {
    text-indent: 10px !important;
    font-size: 14px !important;
    color: red;
    padding: 10px;
    text-align: left;
    margin-bottom: 0;
}

.haspadding {
    padding: 20px;
    word-wrap: break-word !important;
    word-break: break-all !important;
    overflow-wrap: break-word;
    font-size: 14px;
}

/*even though info_entry_dialog and info_entry_content belongs to app_core_shared_styles.css, to keep three (including info_entry_text_area which is also used in settings
we kept them together. later when have time better organize but now no any little problem*/
.info_entry_dialog {
    min-height: 270px;
    height: 270px;
}

.info_entry_content {
    height: 100%;
}

.info_entry_textarea {
    height: 80%;
    padding: 0.5rem;
}

/*====================*/
.image_select_modal_body {
    height: 100%;
    overflow-y: auto;
    padding: 10px;
}

/*====================*/

/* below top_dropdown_li class is used in every notification items on nav-bar */
.top_dropdown_li {
    padding-right: 3px;
    position: relative;
}

/* below top_title_div class is for nav title to center vertically */
.top_title_div {
    display: flex;
    align-items: center;
    justify-content: end;
    color: white;
}

/*==========USED IN INDIVIDUAL PRODUCT DETAILS PAGE AND SETTINGS FOR ENTERING DATA AND IMMEDIATELY SAVE IN BLUR=============*/
.editable_area_input,
.setting_editable_area_input {
    /*used anywhere in program to activate one click edit*/
    resize: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
    border-radius: 5px;
    border: 1px solid var(--entry_light_grey) !important;
    background-color: transparent !important;
}

.editable_area_input:focus,
.setting_editable_area_input:focus {
    outline: none;
    background-color: white !important;
}

.editable_area_btn,
.setting_editable_area_btn {
    /*used anywhere in program to activate one click edit*/
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    padding: 0;
    border: none;
    outline: none;
    border-radius: 5px;
}

.editable_area_btn:focus,
.setting_editable_area_btn:focus {
    outline: none;
}

.editable_area_btn:hover,
.setting_editable_area_btn:hover {
    cursor: text;
}

.editable_area_wrapper {
    /*used anywhere in program to activate one click edit*/
    position: relative;
    width: 100%;
    height: 35px;
}

.form-control-sm.editable_area_input,
.form-control-sm.setting_editable_area_input {
    font-size: 1rem !important;
}

/*==========END OF USED IN INDIVIDUAL PRODUCT DETAILS PAGE AND SETTINGS FOR ENTERING DATA AND IMMEDIATELY SAVE IN BLUR=============*/
.progress_bar_wrapper {
    padding: 5px 0 5px 0;
}

/*================TABLE ACTIONS WITH EXCEPTIONS=================*/
/*----------------------------*/
table tbody tr:not(.exception_tr) td {
    border-bottom: 1px solid var(--light_border_grey) !important;
    border-top: 1px solid var(--light_border_grey) !important;
    border-right: 1px solid var(--extreme_light_border_grey);
}

table tbody tr:not(.exception_tr) td:first-child {
    border-left: 1px solid var(--light_border_grey) !important;
}

table tbody tr:not(.exception_tr) td:last-child {
    border-right: 1px solid var(--light_border_grey) !important;
}

table tbody tr:hover:not(.exception_tr):not(.pack_each_data_row):not(.pack_outer_wrapper_tr):not(.pack_box_row_tr) td {
    /* background: var(--line_hover_color);  */
    color: black;
    /* box-shadow: 0 5px 10px -10px grey; */
    border-top-color: #C0C0C0 !important;
    border-bottom-color: #C0C0C0 !important;
}

tbody.eachproduct>tr.exception_tr:hover td {
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
}

table tbody tr:hover:not(.exception_tr) td:first-child {
    border-left: thin solid;
}

table tbody tr:hover:not(.exception_tr) td:last-child {
    border-right: thin solid;
}

.exception_tr tr:hover td {
    color: black;
    /* box-shadow: 0 5px 10px -10px grey; */
    /* border-color: gray !important; */
}

/*=============================================================*/
/*DDSLICK LIBRARY OVERRIDE*/
.dd-selected-image,
.dd-option-image {
    /*ddslick is a jquery plugin and we customize its css here. it is used for selecbox with images*/
    max-width: 30px !important;
    border-radius: 1px;
    display: table-cell;
    vertical-align: center;
}

.dd-options {
    display: table;
    padding: 0 !important;
    text-align: left;
    max-height: 200px !important;
    height: 150px !important;
    box-shadow: none !important;
}

.dd-select {
    display: table;
    padding: 0 !important;
    text-align: left;
    border-radius: 10px !important;
    background-color: transparent !important;

}

.dd-selected {
    background-color: transparent !important;
    border-radius: 5px !important;
}

.dd-selected-text,
.dd-option-text {
    color: black;
    font-size: 12px;
    display: table-cell;
    vertical-align: center;

}

.dd-selected-description,
.dd-option-description {
    font-size: 12px;
    display: table-cell;
    vertical-align: center;
}

/*===============================*/
.danger_warning_title {
    color: red !important;
    font-size: 14px;
}

/*===============================*/
.add_item_li_style {
    /*this class is added each time clicked on my_page (control function is in inc_home.js) to add some style the list elements (li) on the modal which opens to add word to a specific item.*/
    background-color: var(--list_hover_background_color);
}

.worddiv,
.supplier_info_wrapper,
.cat_wrapper {
    /* border-bottom:1px solid gray; */
    /* display:list-item; */
    font-size: 12px;
    text-align: left;
    padding: 0 !important;
}

.worddiv {
    padding: 3px;
}

.supplier_info_wrapper,
.cat_wrapper {
    width: 100% !important;
    border-bottom: 1px solid var(--light_border_grey);
}

.supplier_info_wrapper a,
.supplier_info_wrapper span.viewSuppliersReadonly,
.supplier_info_wrapper .supp-entry-wrap {
    display: inline-flex;
    flex-wrap: wrap;
    width: 100%;
    text-decoration: none;
    align-items: center;
    gap: 3px;
    font-size: 0.85em;
}

.supplier_info_wrapper a>span,
.supplier_info_wrapper span.viewSuppliersReadonly>span {
    min-width: 0;
}

.supplier_code_span,
.supplier_price_span {
    overflow: hidden;
}

.supplier_info_wrapper .supplier_code_span {
    display: inline-block;
    word-wrap: normal;
}

/* .supplier_info_wrapper .supplier_price_span{
    display:block;
    float:right;
} */
/* .supplier_info_wrapper .colon{
    display:inline-block;
    width:5%;
} */
.supplier_info_wrapper .icon-verified {
    margin-left: auto;
    order: 2;
}

.supplier_info_entry_wrapper div {
    padding: 10px;
}

.add_supp_existing_wrapper {
    display: flex;
    align-items: center;
    width: 100% !important;
    margin-bottom: 2px;
}

.add_supp_existing_price_span {
    display: inline-block;
    width: 30%;
}

.add_supp_existing_text_span {
    display: inline-block;
    width: 70%;
    font-size: 14px !important;

}

/*===================================*/
.colorlinkblue {
    color: #007bbf;
}

.textarearesizenone {
    resize: none;
}

/* =====================================================
   SECTION ACCENT SYSTEM
   Applied via data-section attribute on #side_details
   Set by assignCommonVariables() in section_navigation.js
   CSS variables defined in common_styles.css :root
   Only affects Level 1 section changes (not home inner)
   ===================================================== */

/* WorkBench — warm amber */
div#details_div[data-section="custom_file"] .card {
    border-left: 3px solid var(--accent-workbench) !important;
    background-color: rgba(232, 168, 56, 0.04) !important;
}

/* Images — cool blue-grey */
div#details_div[data-section="image_page"] .card {
    border-left: 3px solid var(--accent-images) !important;
    background-color: rgba(91, 141, 184, 0.04) !important;
}

/* Contact Catalog — soft purple */
div#details_div[data-section="contact_catalog"] .card {
    border-left: 3px solid var(--accent-partners) !important;
    background-color: rgba(139, 111, 181, 0.04) !important;
}

/* Inquiry Files — teal */
div#details_div[data-section="files"] .card {
    border-left: 3px solid var(--accent-files) !important;
    background-color: rgba(58, 158, 143, 0.04) !important;
}

/* Purchase — green */
div#details_div[data-section="purchase"] .card {
    border-left: 3px solid var(--accent-orders) !important;
    background-color: rgba(74, 158, 92, 0.04) !important;
}

/* Sale — slightly lighter green */
div#details_div[data-section="sale"] .card {
    border-left: 3px solid var(--accent-sale) !important;
    background-color: rgba(92, 158, 74, 0.04) !important;
}

/* Sent Inquiry — blue */
div#details_div[data-section="sent_inquiry"] .card {
    border-left: 3px solid var(--accent-sent-inq) !important;
    background-color: rgba(52, 120, 190, 0.04) !important;
}

/* Received Inquiry — orange */
div#details_div[data-section="received_inquiry"] .card {
    border-left: 3px solid var(--accent-received-inq) !important;
    background-color: rgba(210, 120, 50, 0.04) !important;
}

/* Draft — grey-blue */
div#details_div[data-section="draft"] .card {
    border-left: 3px solid var(--accent-draft) !important;
    background-color: rgba(100, 130, 160, 0.04) !important;
}

/* Batch Inquiry Display All — indigo */
div#details_div[data-section="batch_inquiry_display_all"] .card {
    border-left: 3px solid var(--accent-batch-inq) !important;
    background-color: rgba(90, 80, 180, 0.04) !important;
}

/* Batch Inquiry Single — indigo lighter */
div#details_div[data-section="batch_inquiry_single"] .card {
    border-left: 3px solid var(--accent-batch-inq) !important;
    background-color: rgba(90, 80, 180, 0.04) !important;
}

/* Batch Received Single — coral */
div#details_div[data-section="batch_received_single"] .card {
    border-left: 3px solid var(--accent-received-inq) !important;
    background-color: rgba(210, 120, 50, 0.04) !important;
}

/* Batch Draft All — slate */
div#details_div[data-section="batch_order"] .card {
    border-left: 3px solid var(--accent-draft) !important;
    background-color: rgba(100, 130, 160, 0.04) !important;
}

/* Batch Draft Single — slate */
div#details_div[data-section="batch_single_company"] .card {
    border-left: 3px solid var(--accent-draft) !important;
    background-color: rgba(100, 130, 160, 0.04) !important;
}

/* Batch Purchase All — green */
div#details_div[data-section="batch_purchase_all"] .card {
    border-left: 3px solid var(--accent-orders) !important;
    background-color: rgba(74, 158, 92, 0.04) !important;
}

/* Batch Purchase — green */
div#details_div[data-section="batch_purchase"] .card {
    border-left: 3px solid var(--accent-orders) !important;
    background-color: rgba(74, 158, 92, 0.04) !important;
}

/* Batch Sale — lighter green */
div#details_div[data-section="batch_sale"] .card {
    border-left: 3px solid var(--accent-sale) !important;
    background-color: rgba(92, 158, 74, 0.04) !important;
}

/* Forward Replies — warm rose */
div#details_div[data-section="forward_replies"] .card {
    border-left: 3px solid var(--accent-forward) !important;
    background-color: rgba(190, 80, 100, 0.04) !important;
}

/* Find In Orders — amber */
div#details_div[data-section="findinorders"] .card {
    border-left: 3px solid var(--accent-workbench) !important;
    background-color: rgba(232, 168, 56, 0.04) !important;
}

/* Add Item — teal */
div#details_div[data-section="add_item"] .card {
    border-left: 3px solid var(--accent-files) !important;
    background-color: rgba(58, 158, 143, 0.04) !important;
}

/* Product Details — blue-grey */
div#details_div[data-section="product_details"] .card {
    border-left: 3px solid var(--accent-images) !important;
    background-color: rgba(91, 141, 184, 0.04) !important;
}

/* Personal Order Purchase — green */
div#details_div[data-section="porder_purchase"] .card {
    border-left: 3px solid var(--accent-orders) !important;
    background-color: rgba(74, 158, 92, 0.04) !important;
}

/* Personal Order Sale — lighter green */
div#details_div[data-section="porder_sale"] .card {
    border-left: 3px solid var(--accent-sale) !important;
    background-color: rgba(92, 158, 74, 0.04) !important;
}

/* Connect Item — purple */
div#details_div[data-section="connectitem_page"] .card {
    border-left: 3px solid var(--accent-partners) !important;
    background-color: rgba(139, 111, 181, 0.04) !important;
}

/* Company Detail — teal */
div#details_div[data-section="company_detail"] .card {
    border-left: 3px solid var(--accent-company-detail) !important;
    background-color: rgba(0, 168, 168, 0.07) !important;
}

/* =====================================================
   SECTION BREADCRUMB AREA TINT
   Matches sidebar accent color for visual consistency
   Uses same data-section attribute on #details_div
   ===================================================== */

#details_div[data-section="custom_file"] #display_info_section {
    background-color: rgba(232, 168, 56, 0.06) !important;
    border-bottom: 2px solid rgba(232, 168, 56, 0.2) !important;
}

#details_div[data-section="image_page"] #display_info_section {
    background-color: rgba(91, 141, 184, 0.06) !important;
    border-bottom: 2px solid rgba(91, 141, 184, 0.2) !important;
}

#details_div[data-section="contact_catalog"] #display_info_section {
    background-color: rgba(139, 111, 181, 0.06) !important;
    border-bottom: 2px solid rgba(139, 111, 181, 0.2) !important;
}

#details_div[data-section="sent_inquiry"] #display_info_section,
#details_div[data-section="draft"] #display_info_section {
    background-color: rgba(52, 120, 190, 0.06) !important;
    border-bottom: 2px solid rgba(52, 120, 190, 0.2) !important;
}

#details_div[data-section="received_inquiry"] #display_info_section,
#details_div[data-section="batch_received_single"] #display_info_section {
    background-color: rgba(210, 120, 50, 0.06) !important;
    border-bottom: 2px solid rgba(210, 120, 50, 0.2) !important;
}

#details_div[data-section="purchase"] #display_info_section,
#details_div[data-section="batch_purchase"] #display_info_section,
#details_div[data-section="batch_purchase_all"] #display_info_section,
#details_div[data-section="porder_purchase"] #display_info_section {
    background-color: rgba(74, 158, 92, 0.06) !important;
    border-bottom: 2px solid rgba(74, 158, 92, 0.2) !important;
}

#details_div[data-section="sale"] #display_info_section,
#details_div[data-section="batch_sale"] #display_info_section,
#details_div[data-section="porder_sale"] #display_info_section {
    background-color: rgba(92, 158, 74, 0.06) !important;
    border-bottom: 2px solid rgba(92, 158, 74, 0.2) !important;
}

#details_div[data-section="batch_inquiry_display_all"] #display_info_section,
#details_div[data-section="batch_inquiry_single"] #display_info_section {
    background-color: rgba(90, 80, 180, 0.06) !important;
    border-bottom: 2px solid rgba(90, 80, 180, 0.2) !important;
}

#details_div[data-section="batch_order"] #display_info_section,
#details_div[data-section="batch_single_company"] #display_info_section {
    background-color: rgba(100, 130, 160, 0.06) !important;
    border-bottom: 2px solid rgba(100, 130, 160, 0.2) !important;
}

#details_div[data-section="forward_replies"] #display_info_section {
    background-color: rgba(190, 80, 100, 0.06) !important;
    border-bottom: 2px solid rgba(190, 80, 100, 0.2) !important;
}

#details_div[data-section="findinorders"] #display_info_section,
#details_div[data-section="add_item"] #display_info_section,
#details_div[data-section="product_details"] #display_info_section,
#details_div[data-section="connectitem_page"] #display_info_section {
    background-color: rgba(91, 141, 184, 0.06) !important;
    border-bottom: 2px solid rgba(91, 141, 184, 0.2) !important;
}

#details_div[data-section="company_detail"] #display_info_section {
    background-color: rgba(0, 168, 168, 0.1) !important;
    border-bottom: 2px solid rgba(0, 168, 168, 0.4) !important;
}

/* =====================================================
   END OF SECTION ACCENT SYSTEM
   ===================================================== */
/* ============================================
   WeChat Founder Contact Section
   Used in: services.php, personal_services.php
   ============================================ */

.wechat_founder_section {
    display: flex;
    justify-content: center;
    padding: 30px 15px;
}

.wechat_founder_card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-top: 4px solid #07C160;
    border-radius: 12px;
    padding: 30px 24px;
    max-width: 360px;
    width: 100%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease;
}

.wechat_founder_card:hover {
    box-shadow: 0 8px 30px rgba(7, 193, 96, 0.15);
}

.wechat_founder_headline {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 8px;
    line-height: 1.4;
}

.wechat_founder_subtext {
    font-size: 13px;
    color: #666666;
    margin-bottom: 20px;
    line-height: 1.5;
}

.wechat_qr_wrapper {
    display: inline-block;
    margin-bottom: 12px;
    padding: 6px;
    border: 2px solid #07C160;
    border-radius: 8px;
}


.wechat_qr_img {
    display: block;
    width: 150px;
    height: 150px;
    border-radius: 6px;
    object-fit: contain;
    background: #ffffff;
}

.wechat_id_text {
    font-size: 13px;
    font-weight: 600;
    color: #07C160;
    margin-bottom: 12px;
    letter-spacing: 0.3px;
}

.wechat_founder_note {
    font-size: 12px;
    color: #999999;
    line-height: 1.5;
    margin-bottom: 0;
}

.wechat_pricing_nudge {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #f0f0f0;
    font-size: 12px;
    color: #888888;
    width: 100%;
}

.wechat_pricing_link {
    color: #07C160;
    font-weight: 600;
    text-decoration: none;
}

.wechat_pricing_link:hover {
    text-decoration: underline;
}

@media screen and (max-width: 1024px) {

   
}

@media screen and (max-width: 991px) {
    .w_md_30 {
        width: 60%;
    }

    .top_title_div {
        display: flex;
        align-items: center;
    }
 .db_save_td,
    .portioned_tbody td,
    .portioned_tbody td div:not(.progress):not(.user_card_initial):not(.no_profile_image_cover) {
        font-size: 0.67rem !important;
        line-height: 1.3 !important;
    }
}

@media screen and (max-width: 362px) {
    .top_title_div {
        padding-left: 0;
        justify-content: flex-start;
    }
}
/* Must match BREAKPOINTS.mobile_break_point in const_var.js */
@media screen and (max-width: 768px) {
    .top_btn_cont {
        max-height: 85px;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: none; /* Firefox */
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
    }
    
    .top_btn_cont::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }
}
/*.display_table_section class is used in some pages as class name of top selection button clicked and related div is displayed and default is hide all*/
.display_table_section {
    display: none;
}

/*===========SEARCH BAR ON NAVIGATION==========*/
.searchbox_top_wrapper {
    width: 100%;
}

.reset_search_btn_cls {
    font: normal 1.0rem sans-serif;
    height: auto;
    border-radius: 0 0 0 0;
    border-left: none;
    background-color: #f8f9fb;
    border-color: #dfe0e1;
}

.reset_search_btn_cls:hover {
    background-color: var(--background_color_div_light_hover);
}

.reset_search_btn_cls:active {
    background-color: var(--background_color_div_light_btn_active);
}

.select_search_btn {
    border-radius: 20px 0 0 20px;
    font: normal 1.0rem sans-serif;
    height: auto;
    border-left: none;
    background-color: #f8f9fb;
    border-color: #dfe0e1;
}

.select_search_btn:hover {
    background-color: var(--background_color_div_light_hover);
}

.select_search_btn:active {
    background-color: var(--background_color_div_light_btn_active);
}

/*==========END OF SEARCH BAR ON NAVIGATION===========*/
/* Control colors */
#control_indicator.control-your-turn {
    background-color: #e8f5e8;
    color: #2e7d32;
    border-color: #c8e6c9;
}

#control_indicator.control-awaiting {
    background-color: #fff3e0;
    color: #f57c00;
    border-color: #ffcc02;
}

#control_indicator.control-review {
    background-color: #fce4ec;
    color: #c2185b;
    border-color: #f8bbd9;
}

/*in excel export modal window important warning below for exceeding limits*/
/* Catalog export warning styles */
#catalog_limit_warning {
    border-left: 3px solid #dc3545;
    background-color: #fff3cd;
    color: #dc3545;
    font-weight: 500;
}

#catalog_limit_warning.show {
    display: block !important;
}

#catalog_limit_warning.muted {
    display: block !important;
    border-left-color: #6c757d;
    background-color: #f8f9fa;
    color: #6c757d;
}

/* Phase colors */
#phase_indicator.phase-negotiation {
    background-color: #e3f2fd;
    color: #1976d2;
    border-color: #bbdefb;
}

#phase_indicator.phase-confirmation {
    background-color: #fff3e0;
    color: #f57c00;
    border-color: #ffcc02;
}

#phase_indicator.phase-fulfillment {
    background-color: #e8f5e8;
    color: #2e7d32;
    border-color: #c8e6c9;
}

/* Status indicators - on the breadcrumb */
#status_indicators {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 12px;
    flex-shrink: 1;
    min-width: 0;
}

#status_indicators .status-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    border: 1px solid;
}

/*below bootstrap tagsinput related class for input multiple tags into text input*/
.label-info {
    background-color: var(--ezinq_theme_color);
    padding: 0.2em 0.6em 0.3em 0.6em;
    border-radius: 4px;
    color: white;
    font-size: 75%;
}

.bootstrap-tagsinput {
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    display: block;
    padding: 4px 6px;
    color: #555;
    border-radius: 4px;
    width: 100% !important;
    max-width: 100%;
    line-height: 22px;
    cursor: text;
}

.bootstrap-tagsinput input {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background-color: transparent;
    padding: 0 6px;
    margin: 0;
    width: auto;
    max-width: inherit;
    border-radius: 3px;
}

/* Export Modal Checkbox Sections */
.checkbox-sections {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.checkbox-sections h6 {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 14px;
    font-weight: bold;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-left: 15px;
}

.checkbox-group .form-group {
    margin-bottom: 0 !important;
}

/* REPLACE these sections: */
.checkbox-sections .checkbox-group .checkbox-item.form-inline {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 4px 0 !important;
}

.checkbox-sections .checkbox-group .checkbox-item.form-inline input[type="checkbox"] {
    flex-shrink: 0 !important;
}

.checkbox-sections .checkbox-group .checkbox-item.form-inline label {
    cursor: pointer !important;
    line-height: 1.2 !important;
}

.checkbox-note {
    color: #666;
    font-size: 12px;
}

.icon_span_text_wrapper.hrz_align_left {
    justify-content: left;
}

.current_user_update {
    border: solid steelblue 1px;
}

.h_20 {
    height: 20px !important;
}

.h_25 {
    height: 25px !important;
}

.h_30 {
    height: 30px !important;
}

.b_md_bottom {
    border-bottom: 1px solid var(--light_background_border);
}

.border_none {
    border: none !important;
    outline: none !important;
}

.clean_anchor {
    text-decoration: none !important;

}

.bck_light {
    background-color: var(--lightest_background_gray);
}

.bck_transparent {
    background: transparent;
}

.bck_warning_clr {
    background-color: pink;
}

.clr_black {
    color: black;
}

.italic_style {
    font-style: italic;
}

.item_invb td,
.item_invb .wb-card-field-value,
.item_invb .wb-card-field-label {
    font-style: italic;
    color: gray;
}

.fnt_size_10 {
    font-size: 10px !important;
}

.fnt_weight_thin {
    font-weight: thin;
}

.fnt_weight_normal {
    font-weight: normal;
}

.fnt_weight_bold {
    font-weight: bolder;
}

.p_zero {
    padding: 0 !important;
}

.p_1 {
    padding: 1px !important;
}

.inq_img_td.p_1 {
    padding: 1px !important;
}

.inq_img_td.p_1 img {
    border-radius: 2px;
}

.btn_p_sm {
    padding: 0.10rem 0.3rem !important;
}

.keepWordIntact {
    word-break: keep-all !important;
}

.sticky_title {
    position: sticky;
    Top: 0;
    background-color: var(--lightest_background_gray);
    z-index: 25;
}

.add_item_modal_ul {
    /*uls on the modal window in home page for adding a word to an item on modal from context menu of each item*/
    height: 200px;
    margin: 0;
    padding: 0 5px 0 5px;
    list-style: none;
    font-size: 14px;
    overflow: auto;
    font-weight: normal !important;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, .08);
    background: #fafafa;
}


.add_item_modal_ul li {
    padding: 5px;
    margin-bottom: var(--li_bottom_margin);
    border-radius: var(--li_border_radius);

}

.add_to_custom_line:hover,
.add_item_modal_ul li:hover {
    background-color: var(--tr_focused_color);
    cursor: pointer;
    color: white;
}

.portioned_tbody.display_custom_user_price_tbody td {
    color: black !important;
    font-weight: 500;
}

.dark_contrast_link_effect {
    padding: .15rem .3rem;
    border-radius: .2rem;
}

.dark_contrast_link_effect:hover {
    background-color: white;
    color: black;
}

/*btn_attention_danger and btn_attention_success is used in account section to indicate user to save the changes for payment entries.*/
.btn_attention_danger {
    color: red !important;
}

.btn_attention_success {
    color: #006400 !important;
    font-weight: bold !important;
}

button.btn_attention_danger:hover,
button.btn_attention_success:hover {
    color: white !important;
}

#no_item_td {
    display: table-cell;
    vertical-align: middle;
    padding-top: 10px;
    padding-bottom: 10px;
}

.packlist_section table,
.title_wrapper label,
#no_item_td h6 {
    margin: 0;
}

/* HOME AND OTHER CHAT STYLINGS*/
.chat_history {
    overflow-y: auto;
    padding: 20px;
    height: 200px;
    background-color: #FFFFFF;

}

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

.chat_history::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: rgba(0, 0, 0, .1);
}

.chat_screen_bottom {
    margin-top: 20px;
}

.chat_screen_bottom textarea {
    min-height: 100px;
    padding: 0.5rem;
    box-shadow: inset 0 0 0.25rem #ddd;
}

.chat_screen_bottom textarea::-webkit-scrollbar {
    background: var(--background_color_div_light);
    width: 10px;
}

.chat_screen_bottom textarea::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: var(--background_color_div_light);
}

.chat_dialog {
    background-color: #DCDCDC;
}

.chat_dialog .ui-dialog-titlebar {
    padding: 0 !important;
}

.chat_date_p {
    /*used in both places first: dates in chat history screen and text under textarea which shows character count*/
    font-size: 13px;
    font-style: italic;
}

/*p tag class coming from chat.class.php for chat screen.*/
.chat_message_itself {
    padding: 10px 5px;
    font-size: 0.8rem;
    position: relative;
    display: inline-block;
    margin-bottom: 0;
}

.friend .chat_message_itself {
    background: #1adda4;
    border-radius: 0 5px 5px 5px;

}

.friend .chat_message_itself::after {
    content: "";
    display: inline-block;
    border-width: 7px;
    border-style: solid;
    width: 0;
    height: 0;
    right: 100%;
    top: 0;
    position: absolute;
    z-index: -1;
    border-color: transparent #1adda4 transparent transparent;
}

.yourself .chat_message_column {
    order: -1;
    text-align: right;

}

.yourself .chat_message_itself {
    background: #1ddced;
    border-radius: 5px 0 5px 5px;


}

.yourself .chat_message_itself::after {
    content: "";
    display: inline-block;
    border-width: 7px;
    border-style: solid;
    width: 0;
    height: 0;
    left: 100%;
    top: 0;
    z-index: -1;
    position: absolute;
    border-color: transparent transparent transparent #1ddced;

}

.friend,
.yourself {
    margin-bottom: 10px;
    align-items: flex-start;
    word-break: break-all;
}

.chat_image {
    width: 100%;
    background: #ccc;
    border-radius: 50%;
    overflow: hidden;

}

.chat_content_body {
    word-wrap: break-word;
}

.chat_image_div {
    padding: 0;
    height: 100%;
}

.date_message {
    padding: 10px 5px;
    font-size: 0.8rem;
}

.extra_info p {
    margin: 0 0;
}

/*below is for the modal window content for extra information of each item in sent received etc pages when it is clicked
the button which is under the buyer_notes and remarks during inquiry process*/
.extra_info .chat_message_itself {
    font-size: 0.8rem;
    border-bottom: 1px solid black;
}

.buyer_note_chat_history,
.btw_users_history,
.order_old_detail_history {
    /* desktop max-height: (Total Modal Height) - (Header Height) - (Input Row Height) - (Footer Height) */
    /* Desktop max-height calculation: */
    max-height: calc(65vh - 60px - 0px - 100px - 50px - 30px);
    /* Simplified example: max-height: calc(65vh - 240px); */
    /* Replace 60px, 0px, 100px, 50px, 30px with YOUR ACTUAL MEASUREMENTS */
    min-height: 180px;
    /* Ensure a minimum visible height for chat area, adjust as needed */
    overflow-y: auto;
    /* Makes the content scrollable */
    padding: 0 0 0 15px !important;
    background-color: var(--background_color_div_light);
    border: 3px solid var(--ultra_light_border_grey);
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;

}

.note_inner_div {
    padding: 20px !important;
    height: 100%;
}

#buyer_supplier_chat_note_textarea,
#btw_users_textarea {
    min-height: 50px;
    max-height: 150px;
    overflow-y: auto;
    width: 100%;
}


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

#buyer_supplier_chat_note_textarea::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: rgba(0, 0, 0, .1);
}

/* END OF HOME CHAT STYLINGS*/
#note_text {
    /*notes entered for inquiry files single or batch*/
    width: 100%;
    resize: none;
}

.calculate_table_tbody tr {
    border-bottom: 1px dotted gray;
}

.unvisible_thead th {
    height: 0 !important;
    line-height: 0;
    overflow: hidden;
    padding: 0;
}

.thead_styled_div {
    display: flex;
    align-items: center;
    padding: 0;
    height: 100%;
    color: white;
    font-size: 12px;
    word-break: break-all;
    padding: 5px 0 5px 0;
}

.thead_styled_div.table_top_title {
    justify-content: center;
}

.thead_styled_div.thirytwoheight {
    height: 32px !important;
}

.modal_search_inner_div {
    display: table-cell;
    width: 40%;
    vertical-align: middle;
    padding: 15px 15px;
}

.search_on_modal {
    width: 80%;
}

.btw_modal_title {
    height: 100%;
    display: flex;
    align-items: center;
    width: 100%;
}

.accordion_inner_tbl {
    border-bottom: 1px solid var(--top_title_dark);
    border-right: 1px solid var(--top_title_dark);
    border-left: 1px solid var(--top_title_dark);
}

.classic_des {
    word-wrap: break-word !important;
    word-break: break-all !important;
    overflow-wrap: break-word;
    font-size: 14px;
    line-height: 1;
}

.info_table_row {
    word-wrap: break-word !important;
    word-break: break-all !important;
    overflow-wrap: break-word;
    padding: 0.2rem;
    font-size: 14px !important;
    text-align: left;
}

.info_btn_td {
    position: relative;
    word-wrap: break-word !important;
    word-break: break-all;
    padding: 10px;

}

.gap_zero_td {
    padding: 0 !important;
    border: none !important;
}

/*======supplier view note column when clicked for viewing suppliers for an item price history*/
/*======supplier view note column when clicked for viewing suppliers for an item price history*/
.history_note_wrapper {
    position: relative;
    width: 100%;
    border-radius: 6px !important;
}

.history_note {
    width: 100%;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow: auto !important;
    font-size: 12px;
    border-radius: 5px !important;
    box-sizing: border-box;
    display: block;
    border: none;
    background-color: transparent;
    resize: none;
    cursor: text;
}

textarea.history_note {
    color: black;
}

.history_note_edit:hover {
    cursor: text;
}

/*when clicked edit button , it adds style to editable input in many places*/
.input_edit_active {
    border: 1px solid steelblue !important;
}

.info_entry_modal_body {
    /* max-height: 55%; */
    overflow-y: hidden;
    min-height: 55%;
    padding: 5px 15px 5px 15px !important;
    /*background-color:#f5f5f5*/

}

.small_info_entry_modal_body {
    padding: 5px 15px 5px 15px !important;
}

.qty_div,
.target_price_div,
.price_span,
.qty_text,
.target_prc_text,
.total_price,
.bold_price {
    /*color:black;*/
    font-weight: normal;
    text-align: center;
    word-wrap: break-word !important;
    -ms-word-break: break-all;
    word-break: break-all;
    font-size: 12px;

}

.add_item .checkbox_span {
    left: -10px;

}

.top_selection_btn {
    position: relative;
    padding: 5px 15px 5px 15px;
    margin-right: 3px;
    border-radius: 2px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.top_selection_btn::after {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    font-family: Arial;
    font-size: 0.7em;
    font-weight: 700;
    position: absolute;
    top: 0;
    right: 0;
    width: 15px;
    height: 15px;
    content: "";
    border: 1px #fff solid;
    border-radius: 50px;
    background: #3498db;
    opacity: 0;
    transform: scale(0.5);
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.top_selection_btn.display_warning::after {
    transform: scale(1);
    opacity: 1;
}

.active_success_btn {
    outline: none !important;
    border: none;
    box-shadow: 6px 6px 4px var(--ezinq_theme_color) !important;
}

.active_danger_btn {
    outline: none !important;
    border: none;
    box-shadow: 6px 6px 4px red !important;
}

.info_text {
    padding: 0.3rem !important;
}

.info_text span {
    font-size: 14px;
    display: inline-block;
    word-wrap: break-word;
    word-break: break-word;
}

.prd_ctrl_icons.with_checkbox_text {
    /*on homepage each product control icons activate item or display price checkboxes hiding here*/
    position: relative;
}

.prd_ctrl_icons.with_checkbox_text input[type='checkbox'] {
    /*on homepage each product control icons activate item or display price checkboxes hiding here*/
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
    transition: all .3s linear;
}

/*below a few classes inside li element are for dropdown ul in notification section especially for warning*/
.public_dropdown_ul div.outestlidiv {
    /*the most outest div wrapping inside dropdown li*/
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    padding: 0;
}

.public_dropdown_ul div.outestlidiv img {
    width: 100%;
}

.public_dropdown_ul div.outestlidiv .home_dropdown_comp {
    width: 72%;
    padding: 1px;
    white-space: pre-wrap;
    /* CSS3 */
    white-space: -moz-pre-wrap;
    /* Mozilla, since 1999 */
    white-space: -o-pre-wrap;
    /* Opera 7 */
    word-wrap: break-word;
    /* Internet Explorer 5.5+ */
    text-align: center;
    color: black;
    font-size: 14px;
}

/*========================================START OF HOME AND SOME SPECIFIC SECTIONS DROPDOWN STYLILNG=====================*/
.home_dropdown_comp {
    width: 72%;
    padding: 1px;
    white-space: pre-wrap;
    /* CSS3 */
    white-space: -moz-pre-wrap;
    /* Mozilla, since 1999 */
    white-space: -o-pre-wrap;
    /* Opera 7 */
    word-wrap: break-word;
    /* Internet Explorer 5.5+ */
    text-align: center;
    font-size: 14px;
}

/*below single_page specifically for single display sent received or batch sent and received because there
is button extra in addition to homepage dropdown*/
.home_dropdown_comp.single_page {
    width: 72% !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}

.home_dropdown_comp.with_qty {
    width: 15% !important;
    display: flex;
    justify-content: center;
}

.home_dropitem_img_div {
    width: 13%;
    padding: 1px;
    flex-shrink: 0;
}

.reset_new_added,
.reset_new_notes {
    position: relative;
    background-color: transparent;
}

.reset_new_added::after {
    /*for putting the plus icon as after element on top of notification area img for adding new item to the file*/
    content: "";
    width: 14px;
    height: 14px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 448 512%27%3E%3Cpath fill=%27black%27 d=%27M240 64c0-8.8-7.2-16-16-16s-16 7.2-16 16V240H32c-8.8 0-16 7.2-16 16s7.2 16 16 16H208V448c0 8.8 7.2 16 16 16s16-7.2 16-16V272H416c8.8 0 16-7.2 16-16s-7.2-16-16-16H240V64z%27/%3E%3C/svg%3E");
    position: absolute;
    top: -12px;
    left: -8px;
}

.reset_new_notes::after {
    content: "";
    width: 14px;
    height: 14px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 512 512%27%3E%3Cpath fill=%27black%27 d=%27M454.6 45.3l12.1 12.1c12.5 12.5 12.5 32.8 0 45.3L440 129.4 382.6 72l26.7-26.7c12.5-12.5 32.8-12.5 45.3 0zM189 265.6l171-171L417.4 152l-171 171c-4.2 4.2-9.6 7.2-15.4 8.6l-65.6 15.1L180.5 281c1.3-5.8 4.3-11.2 8.6-15.4zm197.7-243L166.4 243c-8.5 8.5-14.4 19.2-17.1 30.9l-20.9 90.6c-1.2 5.4 .4 11 4.3 14.9s9.5 5.5 14.9 4.3l90.6-20.9c11.7-2.7 22.4-8.6 30.9-17.1L489.4 125.3c25-25 25-65.5 0-90.5L477.3 22.6c-25-25-65.5-25-90.5 0zM80 64C35.8 64 0 99.8 0 144V432c0 44.2 35.8 80 80 80H368c44.2 0 80-35.8 80-80V304c0-8.8-7.2-16-16-16s-16 7.2-16 16V432c0 26.5-21.5 48-48 48H80c-26.5 0-48-21.5-48-48V144c0-26.5 21.5-48 48-48H208c8.8 0 16-7.2 16-16s-7.2-16-16-16H80z%27/%3E%3C/svg%3E");
    position: absolute;
    top: 50%;
    left: -8px;
    transform: translateY(-50%);
}

.reset_notification_icon_span {
    font-size: 16px;
}

.home_dropitem_img_div img {
    width: 100%;
    height: auto;
    max-height: 2.5rem;
    border-radius: 10%;
    display: block;
}

/*======below also dropdown but I don't know difference from above ones :) */
.home_dropitem_stat_img {
    width: 15%;
    font-size: 20px;
    text-align: center;
}

.home_dropitem_stat_img img,
.home_dropitem_stat_img span {
    width: 100%;
    /*border-radius:50%;*/
    padding: 1px;
}

.home_dropitem_stat_img.single_page {
    width: 20% !important;
    display: flex;
    justify-content: center;
}

.home_dropitem_stat_img.single_page span {
    font-size: 14px;
    display: inline-block;
}

.home_dropitem_stat_img.with_qty span,
.home_dropitem_stat_img.with_qty label {
    color: black;
    font-size: 12px;
}

/*=========================*/
/*below single_page specifically for single display sent received or batch sent and received because there
is button extra in addition to homepage dropdown*/
.dropdown_item_btn.single_page {
    width: 15% !important;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

.dropdown_item_btn.single_page span {
    font-size: 16px;
    /*display:inline-block;*/
}

.incanchorlidiv {
    /*including the whole a element section inside dropdown li*/
    width: 87%;
    display: flex;
    padding: 0 !important;
}

.incsecondsectionlidiv {
    /*used in inc_first called from get_item_notifications.js for warning to include the second part after anchor div in li element in dropdown*/
    width: 13% !important;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0;
}
.warning_notf_img {
    /*used in inc_first called from get_item_notifications.js for warning wrapping img inside anchor*/
    width: 20% !important;
    /*padding:5px;*/

}

.warning_notf_img img {
    width: 100%;
    border-radius: 10%;
}

.warning_name_section {
    /*used in inc_first called from get_item_notifications.js for warning wrapping name inside anchor*/
    width: 70% !important;
    padding: 5px;
    /*overflow: hidden;*/
}

.warning_name_section span {
    display: inline-block;
    width: 100%;
    word-break: break-word;
    word-wrap: break-word;
}

.warning_newmsg_section {
    /*used in inc_first called from get_item_notifications.js for warning wrapping last information part inside anchor*/
    width: 15% !important;
    padding: 5px;
}

.warning_newmsg_section span {
    display: block;
    font-size: 12px;
    float: right;
}

body>div>div.dropdown.open:hover {
    position: absolute;
}

/*================================================END OF DROPDOWN IN HOME AND SPECIFIC PAGES FOR WARNINGS WHEN ADDED NEW ITEM OR OTHER REASONS=========================*/
/*Used on: Supplier information display modal*/

/*Used on: END OF Supplier information display modal*/
.hr_btw_comp {
    border: 0;
    clear: both;
    display: block;
    width: 100%;
    background-color: var(--ezinq_theme_color);
    height: 1px;
    margin-top: 0;
    margin-bottom: 0;
}

.modal_checkbox {
    width: 3%;
}

/*below .updated_row class is displaying purchases and sales  pages for those items which
might have been changed and we decide this by checking updated dateds*/

.updated_row {
    position: relative;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.updated_row_icon {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 448 512%27%3E%3Cpath fill=%27%23a9a9a9%27 d=%27M64 64C46.3 64 32 78.3 32 96V416c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32H64zM0 96C0 60.7 28.7 32 64 32H384c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zm200 64a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm-16 64h40c8.8 0 16 7.2 16 16V352h32c8.8 0 16 7.2 16 16s-7.2 16-16 16H176c-8.8 0-16-7.2-16-16s7.2-16 16-16h32V256H184c-8.8 0-16-7.2-16-16s7.2-16 16-16z%27/%3E%3C/svg%3E");
    position: absolute;
    top: 0;
    right: 5px;
    cursor: pointer;
    opacity: 1;
}

.deleted_row {
    border: 2px solid red;
}

/*====================================*/
/* New specific class for breadcrumb status area */
.breadcrumb-status-container {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    padding: 0 4px;
    flex: 0 0 auto;
}

/* When status_reason shows text content */
#status_reason:not(:empty) {
    padding: 4px 8px;
    background: #f1f5f9;
    color: #475569;
    border-radius: 4px;
    font-weight: 500;
}

#edit_status,
#status_reason {
    font-size: 13px;
    color: #64748b;
}

#status_position {
    font-size: 12px;
}

.dropdown-item:hover,
.custom-control-label:hover {
    cursor: pointer;
}

/*DESIGNED FOR PACKING LIST BUT LATER USED IN OTHER PARTS TOO. MIGHT CONSIDER RENAME LATER*/
/*below pack list and pack box classes are used in fetch_packing_list.php for title of each box including box total info and box btn*/
.pack_list_company_title_th {
    /*packing list display packing list most out company table info side width:*/
    height: 32px;
    width: 100%;
    padding: 5px 0 5px 0;
}

/*=========================================*/

.header_division_left {
    /*in the batch_inquiry_display_all.php page coming from batch_inquiry_handle.php the top title of each company*/
    width: 30%;
    height: 100%;
    padding: 3px 5px 5px 10px;
    display: flex;
    align-items: flex-end;
}

.header_division_right {
    /*the place on top of container image with truck icon.*/
    width: 70%;
    height: 100%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px 5px 5px;
}

.title_label_wrapper,
.batch_top_left_label_wrapper {
    /*same task as upper box_total_info_top_label_wrapper_left but height is different since there are 3 labels inside*/
    display: block;
    height: 100%;
    float: left;
    clear: left;
    padding: 5px;
    width: 100px;
    text-align: left;

}

.title_label_wrapper label {
    font-size: 12px !important;
    font-weight: normal !important;
}

/*==============================================*/
.th_higher_z {
    /*used in scrolling nested tables*/
    z-index: 30;
}

.focused_tr:not(#temporary_tr):not(.plain_tr) td {
    /*in pages, focused tr hover effects specs*/
    /*background: #C0C0C0;*/
    background: var(--tr_focused_color);
    color: black;
}

.update_focusin {
    /*in pages when we surf on editable areas the effects*/
    border: 1px solid steelblue;
    background-color: white;
    color: black;
}

/*used in inputs for price qty note in both custom file and inquiries*/
.input_note_div {
    /*input and notes between past_detail_btn and price_info_btn */
    padding-top: 10px;
    padding-bottom: 10px;
}

/*end of .input_note_div classname used in inputs for price qty note in both custom file and inquiries*/

.table_top_title {
    font-weight: bolder;
    color: white;
}

.danger_warning {
    color: red !important;
    font-size: 14px;
}

.danger_warning:hover {
    color: white !important;
}

.mild_attention {
    color: var(--mild_blue);
    font-size: 1rem;
}

.file_list_sections {
    height: 100%;
}

/*===========================*/
.packing_tooltip.tooltip-inner {
    border-radius: 8px;
    box-shadow: 3px 2px 8px #800000;
    max-width: 200px !important;
}

/*===========================*/
.history_sum:hover {
    cursor: pointer;
}

.single_tables_combined .db_save {
    /*draft,sent or received inquiry page tables not including the katalok table since it needs db_save width bigger than this one because it doesn't include columns like qty,target, buyer_note etc*/
    width: 13% !important;
}

/* start of styling percentage and ratio input which are used in inquiries and custom file*/
.btn_percentage {
    cursor: pointer;
    outline: none !important;
}

.btn_percentage:focus {
    outline: none !important;
    box-shadow: none !important;
}

.ratio_input:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* end of styling percentage and ratio input which are used for inquiries and custom file*/
/*homeinput used both in home page products table (catalog) and connectitem */
.homeinput {
    width: 100%;
    height: 100%;
    max-width: 100%;
    padding: 10px !important;

}

.update:not(.homeinput) {
    /* border: 1px solid black; */
    border-radius: 2px;
    border: 0;
    outline: 0;
    background-color: transparent;
    /*transition: all 0.3s ease;*/
}

/*===========UPDATE EFFECTS WHEN ACTIVATED BY ENABLE EDIT==========*/
.update_effects {
    box-shadow: 0 0 5px rgba(0, 0, 0, .05), 2px 2px 5px rgba(0, 0, 0, .1);
    border-radius: 4px;
    overflow-y: auto;
    height: 100%;
    max-height: 100px;
    cursor: text;
    /* Show text cursor when editable */
    transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

.update_effects:hover {
    box-shadow: 0 0 6px rgba(0, 123, 255, .15), 2px 2px 6px rgba(0, 0, 0, .12);
    /* Subtle blue tint on hover */
}

.update_effects:focus {
    box-shadow: 0 0 0 2px rgba(0, 123, 255, .25);
    outline: none;
    background-color: rgba(255, 255, 255, 0.5);
    /* Clear focus indication */
}

/* Better placeholder styling */
.update_effects:empty:before {
    content: attr(placeholder);
    color: #999;
    font-style: italic;
}

/*=================================================*/
/*ON THE MODAL DISPLAY ITEM CATEGORIES. THIS MIGHT BE THOUGHT TO PUT IN COMMON STYLES AND APPLY IN PUBLIC PAGES TOO*/
#display_item_cat,
#display_item_cat_readonly {
    list-style: none;
    width: 100%;
    /* background-color: var(--background_color_div_light); */
    padding: 5px;
}

#display_item_cat li,
#display_item_cat_readonly li {
    border-bottom: 1px solid var(--background_color_div_light_btn_active);
}

#display_item_cat li div:first-of-type,
#display_item_cat_readonly li div:first-of-type {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}

#display_item_cat .item_cat_img_wrapper,
#display_item_cat_readonly .item_cat_img_wrapper {
    width: 50px;
    height: 50px;
    padding: 5px;
    display: inline-block;
    flex-shrink: 0;
}

#display_item_cat img,
#display_item_cat_readonly img {
    width: 100%;
    border-radius: 3px;
}

#display_item_cat button {
    margin-left: auto;
}

#display_item_cat .item_specific_cat,
#display_item_cat_readonly .item_specific_cat {
    display: inline-block;
    padding: 5px;
    flex: 1;           
    min-width: 80px; 
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    font-size: 13px
}

/*=================================================*/
.connect_word_inner_wrapper {
    /*wraps the ul for connection between a word and an item in home page on the modal window which opens when cliced the add word button on context menu under controls*/
    padding: 0 5px 0 5px;
}

.column_match_arrow_wrapper_div {
    /*used in home page upload excel from which excel column to which db column between arrow for visual easiness*/
    /* display: flex; */
    flex-direction: column;
    justify-content: center;
    margin-bottom: 0;
}

.column_match_arrow_label {
    /*used in home page upload excel from which excel column to which db column between arrow for visual easiness*/
    border: none;
    background-color: transparent;
    padding: 4px 8px 4px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(1.5em + 0.5rem + 2px);
    /* Match form-control height */
    margin: 0;
    border: none;
    background: transparent;
}

.column_match_arrow_label .icon-left {
    line-height: 1;
}

.specific_supp {
    color: green;
    font-weight: bold;
}

#back_btn {
    float: none;
    /* Remove float */
    background-color: transparent;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    /* Don't shrink */
    align-self: flex-start;
    /* Stay at top */
}

/*top breadcrumb and its wrapper styling*/
#back_btn:hover {
    background-color: var(--list_hover_background_color);
    border-color: #cbd5e1;
}

#display_info_section {
    display: none;
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    margin-bottom: 4px;
    /* Small gap from content below */
}

#display_info_section>div:first-child {
    display: flex;
    gap: 12px;
    height: 40px;
    flex: 0 0 auto;
}

#inner_return_btn {
    color: var(--background_color_common_hover);
    align-items: center;
    vertical-align: middle;
}

#comp_list_dropdown {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Content area - everything flows to the right of back button */
.breadcrumb-content-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Top content row */
.breadcrumb-top-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    flex-wrap: wrap;
}

.breadcrumbnav {
    list-style: none;
    float: left;
    padding: 10px 10px 3px 10px;
    /*to make the next next push into new line to fit without overlapping out of breadcrumb container*/
    margin: 0;
    clear: right;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.breadcrumbnav li {
    display: inline-block;
    font-weight: normal;
    font-size: 0.80rem;
    word-wrap: break-word !important;
    word-break: break-all !important;
    overflow-wrap: break-word;
    color: #1e293b;
    white-space: nowrap;
}

.breadcrumbnav li::after {
    content: " › ";
    color: #cbd5e1;
    margin-left: 4px;
}

.breadcrumbnav li:last-child:after {
    content: "";
}

.breadcrumbnav a {
    font-weight: normal;
    text-decoration: none;
}

.breadcrumbnav a:hover {
    text-decoration: underline;
}

/*top breadcrumb and its wrapper styling ending*/
.remove_danger {
    color: red;
}

@media (min-width: 1200px) {
    .buyer_note_chat_history {
        max-height: calc(50vh - 180px);
        min-height: 200px;
    }

}

@media screen and (max-width: 991px) {
    .info_text span {
        font-size: 12px;
    }
.info_table_row {
        font-size: 12px !important;
    }
    /*===================================*/
    .title_label_wrapper {
        width: auto;
        padding: 0;
    }

    .header_division_left {
        /*in the batch_inquiry_display_all.php page coming from batch_inquiry_handle.php the top title of each company*/
        flex-direction: column;
        align-items: flex-start;
        height: 60px;
    }

    .header_division_right {
        justify-content: flex-end;
        padding-right: 10px;
    }

    /*====================================*/
    .home_date.purch_tbl {
        width: 25%;
    }

    .space_span {
        display: none;
    }

    .thead_styled_div div.hidden_991 {
        display: none;
    }

    .modal_checkbox {
        width: 8%;
    }
    
}

@media screen and (max-width: 768px) {

    #back_btn {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
    }

    #display_info_section {
        padding: 6px 12px;
        /* Less horizontal padding */
    }

    #display_info_section>div:first-child {
        gap: 8px;
        /* Smaller gaps on mobile */
    }

    #status_indicators {
        gap: 6px;
        margin: 0 8px;
    }

    /* Top row adjustments */
    .breadcrumb-top-row {
        gap: 8px;
        /* Smaller gaps */
        flex-wrap: wrap;
        /* Allow wrapping if needed */
    }

    .breadcrumbnav {
        font-size: 13px;
        gap: 6px;
    }

    .breadcrumbnav li {
        max-width: 120px;
        /* Limit width on mobile */
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .breadcrumb-status-container {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Status area adjustments */
    .breadcrumb-status-container {
        flex-wrap: wrap;
        gap: 8px;
        font-size: 12px;
    }

    #status_indicators .status-badge {
        font-size: 11px;
        padding: 3px 7px;
        gap: 3px;
    }

    /*below in inquiry pages used input fields size is readjusting according to size. because other text (normal product field information is also resizing here by the class portioned_tbody exactly same font-size.)*/
    .qty_div,
    .target_price_div,
    .price_span,
    .qty_text,
    .target_prc_text,
    .total_price,
    .bold_price {
        font-size: 0.67rem !important;
    }
}

small.radio_expl {
    display: block;
    margin-top: 4px;
    margin-bottom: 12px;
}

/* New workbench / subsidiary creation modal — contact row */
.new_cf_contact_label_row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.new_cf_optional_label {
    font-size: 0.75rem;
    color: var(--text-muted, #6e6e73);
    font-style: italic;
}

.new_cf_create_contact_row {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.new_cf_create_contact_link {
    font-size: 11px;
    color: var(--text-muted, #6e6e73);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    text-decoration: none;
}

.new_cf_create_contact_link:hover {
    color: var(--link-color, #5b8dee);
}

.new_cf_create_contact_link .ezinq-svg-icon {
    width: 12px;
    height: 12px;
}

.new_cf_contact_hint {
    font-size: 0.75rem;
    color: var(--text-muted, #6e6e73);
    margin-top: 5px;
    line-height: 1.4;
}

@media screen and (max-width: 576px) {
    .home_dropdown_comp span {
        font-size: 14px;
    }

    .info_table_row {
        font-size: 10px !important;
    }

    /* below .info_text is coming from fetch_files.php for homepage to adjust the font
     and padding in created_at and updated_at columns on inquiry tables on homepage*/
    .info_text span {
        font-size: 10px;
        /*line-height: 10px!important;*/
        display: inline-block;
        word-wrap: break-word;
        word-break: break-word;
    }
}


@media screen and (max-width: 768px) {
    #display_info_section {
        min-height: 80px;
    }
}
@media screen and (max-width: 480px) {
    #display_info_section {
        height: 80px;
        /* Slightly taller on very small screens */
        padding: 4px 10px;
    }

    .breadcrumbnav {
        font-size: 12px;
    }

    .breadcrumbnav li {
        max-width: 100px;
        /* Even smaller on tiny screens */
    }

    #status_indicators span:not([class^="icon-"]) {
        display: none;
    }

    #status_indicators .status-badge {
        min-width: 18px;
        justify-content: center;
        padding: 2px 4px;
    }
}

@media screen and (max-width: 362px) {
    .info_text span {
        font-size: 8px;
    }
}
/*========== ASSIGNED WORDS READONLY MODAL ==========*/
.words_readonly_chip_wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.words_readonly_chip {
    background-color: var(--list_hover_background_color, #f0f0f0);
    border-radius: 16px;
    padding: 6px 14px;
    font-size: 13px;
    color: #333;
}
/*========== END ASSIGNED WORDS READONLY MODAL ==========*/
/*========== TAB ITEM COUNT + ADD FEEDBACK (badge, pulse) ==========
    Purpose : Visual feedback when items are added to a workbench/file tab.
    Usage   : Shared across all sections that use tab-based item lists
              (workbench, and any other section with catalog-to-tab add flow).
              .cf_tab_item_count   — persistent item count shown on each tab
              .cf_tab_add_badge    — temporary +N green badge, fades after 2s
              .cf_tab_pulse        — brief scale pulse on destination tab
==========*/
.cf_tab_add_badge {
    position: absolute;
    top: 2px;
    right: 4px;
    background: var(--success_color, #28a745);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 10px;
    padding: 2px 7px;
    opacity: 1;
    transition: opacity 1.8s ease;
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

.cf_tab_add_badge_fade {
    opacity: 0;
}

@keyframes cf_tab_pulse_anim {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.cf_tab_pulse {
    animation: cf_tab_pulse_anim 300ms ease;
}




#individual_data_table .product_row td div:first-child {
    max-height: 75px !important;
}

/*=======ON THE MODAL WINDOW IN HOMEPAGE AFTER SHARED LAST MODAL WITH QR CODE AT THE BOTTOM CLICKABLE PLACE TO GO TO WORKBENCH*/
.workbench-link {
    color: #7aaaff;
    text-decoration: underline;
    transition: color 0.2s;
}

.workbench-link:hover {
    color: #aaccff;
}

/*=======END OF THE MODAL WINDOW IN HOMEPAGE AFTER SHARED LAST MODAL WITH QR CODE AT THE BOTTOM CLICKABLE PLACE TO GO TO WORKBENCH*/
/* Card selection styling in bulk upload excel image decision modal window*/
.image-source-card {
    transition: all 0.2s ease;
    border: 2px solid #dee2e6 !important;
}

.image-source-card:hover {
    background-color: #f1f3f5 !important;
}

/* Highlight the card when the hidden radio is checked */
.image-source-card:has(input:checked) {
    border-color: #007bff !important;
    background-color: #e7f1ff !important;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
}

/* End of Card selection styling in bulk upload excel image decision modal window*/
.file_input_wrapper .file-upload-icon {
    font-size: 48px;
    color: #43e97b;
    margin-bottom: 15px;
}

.file-upload-icon {
    font-size: 48px;
    color: #43e97b;
    margin-bottom: 15px;
}

/*--------------------------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------BELOW STARTING CSS RULES FOR UPLOAD CUSTOM ORDER FROM EXCEL SECTION IN HOME PAGE-----------------------------------------------*/
/*display_upload_section_btn - display_match_against_btn - display_upload_preexisting_ord_btn - display_upload_supp_price_btn*/
.excel_upload_section {
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 30px;
    margin: 20px 0;
}

.excel_upload_section .row.justify-content-md-end.m-0:first-child {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    border-radius: 15px 15px 0 0;
    margin: -30px -30px 30px -30px;
}

.excel_upload_section .form-control {
    border: 2px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 0.375rem 0.75rem;
    transition: all 0.2s ease;
    min-height: calc(1.5em + 0.75rem + 2px);
}

.excel_upload_section .form-control:focus {
    border-color: #4facfe !important;
    box-shadow: 0 0 0 0.2rem rgba(79, 172, 254, 0.25) !important;
}


.excel_upload_section .btn {
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 13px;
}

.excel_upload_section .btn-primary {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    border: none !important;
    color: white !important;
}

.excel_upload_section .btn-primary:hover {
    background: linear-gradient(135deg, #5a67d8, #6b46c1) !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    color: white !important;
}

/* Make table text smaller and not bold for excel upload tables */
/*match_against_non_existing_tbl - order_non_existing_tbl - supplier_non_existing_tbl*/
.excel_upl_tbl_common_cls td {
    font-size: 13px;
    font-weight: normal;
}

.excel_upl_tbl_common_cls td div {
    font-size: 13px;
    font-weight: normal;
}

/* Make modal table text smaller (order_similar_item_display_modal) */
#similar_item_display_table_order td,
#similar_item_display_table_supplier td,
#similar_item_display_table_match_against td {
    font-size: 13px;
    font-weight: normal;
}

#similar_item_display_table_order td div,
#similar_item_display_table_supplier td div,
#similar_item_display_table_match_against td div {
    font-size: 13px;
    font-weight: normal;
}

/*upl_match_xls_extras - upl_xls_extras - upl_supp_xls_extras*/

.extras_dropdown_menu {
    color: white;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    transition: all 0.3s ease;
    cursor: pointer;
    /* ✅ Added for clickable look */
}

.extras_dropdown_menu:hover {
    background: rgba(255, 255, 255, 0.3);
    color: white;
    text-decoration: none;
    /* transform: translateY(-2px); */
}

.step-container {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 20px;
    margin-bottom: 30px;
}

/*Make cards in step-container flex properly */
.step-container .card {
    flex: 1;
    transition: all 0.3s ease;
}

/* Subtle hover effect (matching supplier section) */
.step-container .card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.step-header {
    padding: 20px 20px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.step-number {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
}

.step-1 .step-number {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.step-2 .step-number {
    background: linear-gradient(135deg, #43e97b, #38f9d7);
}

.step-3 .step-number {
    background: linear-gradient(135deg, #fa709a, #fee140);
}

.step-title {
    font-size: 18px;
    font-weight: 600;
    color: #2d3748;
    margin: 0;
}

.step-body {
    padding: 20px;
}

.excel_upload_section .radio-group,
#upload_supp_price_excel_controls .radio-group,
#upload_match_excel_controls .radio-group {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.excel_upload_section .custom-radio,
#upload_supp_price_excel_controls .custom-radio,
#upload_match_excel_controls .custom-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
    border: 1px solid #ced4da;
}

.excel_upload_section .custom-radio:hover,
#upload_supp_price_excel_controls .custom-radio:hover,
#upload_match_excel_controls .custom-radio:hover {
    background: #f7fafc;
    border-color: #4facfe;
}

.excel_upload_section .custom-radio input[type="radio"],
#upload_supp_price_excel_controls .custom-radio input[type="radio"],
#upload_match_excel_controls .custom-radio input[type="radio"] {
    margin: 0;
}

.file-upload-area {
    border: 2px dashed #cbd5e0;
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    transition: all 0.3s ease;
    background: #f7fafc;
}



.mapping-section {
    background: #f8fafc;
    border-radius: 8px;
    padding: 20px;
}

.mapping-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

/* Default state - hide supplier info sections (radio button 1 behavior) */
.existing_order_supplier_info {
    display: none;
}

/* Show buyer info sections by default */
.existing_order_buyer_info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.column_match_arrow_wrapper_div.existing_order_buyer_info,
.column_match_arrow_wrapper_div.existing_order_supplier_info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
}

/* When elements are explicitly shown/hidden by JavaScript */
.existing_order_buyer_info[style*="display: block"],
.existing_order_supplier_info[style*="display: block"],
.order_upl_custom_supp_name[style*="display: block"] {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.existing_order_buyer_info[style*="display: none"],
.existing_order_supplier_info[style*="display: none"],
.order_upl_custom_supp_name[style*="display: none"] {
    display: none !important;
}

#existing_order_xls_selectboxes select {
    height: auto;
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
}

/* Default state - hide multiple customer import sections (radio button 3 behavior) */
.existing_order_multiple_customer_info {
    display: none;
}

.existing_order_multiple_customer_supplier_info {
    display: none;
}

/* When elements are explicitly shown/hidden by JavaScript */
.existing_order_multiple_customer_info[style*="display: block"],
.existing_order_multiple_customer_supplier_info[style*="display: block"] {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.existing_order_multiple_customer_info[style*="display: none"],
.existing_order_multiple_customer_supplier_info[style*="display: none"] {
    display: none !important;
}

.mapping-label {
    flex: 1;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
    color: #4a5568;
}

.mapping-arrow {
    color: #fa709a;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mapping-select {
    flex: 1;
}

.collapse-btn {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    border: none;
    border-radius: 25px;
    color: white;
    padding: 8px 16px;
    font-weight: 500;
    margin-top: 20px;
    transition: all 0.3s ease;
}

.collapse-btn:hover {
    background: linear-gradient(135deg, #3182ce, #00b4d8);
}

/* Product upload section - give more space to mapping step */
#import_item_excel_div .step-container .step-1 {
    flex: 1;
}

#import_item_excel_div .step-container .step-2 {
    flex: 2;
}

@media (max-width: 768px) {
    .step-container {
        flex-direction: column;
    }

    .radio-group {
        flex-direction: column;
    }

    /* On smaller screens keep equal width */
    #import_item_excel_div .step-container {
        flex-direction: column;
    }

    #import_item_excel_div .step-container .step-1,
    #import_item_excel_div .step-container .step-2 {
        flex: 1;
    }
}

/*--------------------------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------END OF CSS RULES FOR UPLOAD CUSTOM ORDER FROM EXCEL SECTION IN HOME PAGE-----------------------------------------------*/
/****************************************************************************************************************************************************/
/* BELOW ARE SUPPLIER INFO EXCEL UPLOAD HOME PAGE SPECIFIC CSS BESIDE THOSE SHARED ABOVE*/
/* Target the supplier structure specifically */

/* Fix date input width and padding */
#upload_supp_price_excel_controls .col-12 {
    padding: 15px !important;
}

#upload_supp_price_excel_controls input[type="date"] {
    width: 100% !important;
    max-width: none !important;
}

/* Fix file upload section padding */
#upload_supp_price_excel_controls .file_input_wrapper {
    margin: 0 !important;
    padding: 40px 20px !important;
}

/* Ensure card body has proper padding */
#upload_supp_price_excel_controls .card-body {
    padding: 1.25rem !important;
}

/* Fix button positioning */
#upload_supp_price_excel_controls .btn {
    margin: 5px 0 !important;
}

#fold_unfold_supp_excel {
    background: linear-gradient(135deg, #4facfe, #00f2fe) !important;
    border: none !important;
    border-radius: 25px !important;
    color: white !important;
    padding: 8px 16px !important;
    font-weight: 500;
    margin-top: 20px;
    font-size: 14px !important;
}

#fold_unfold_supp_excel:hover {
    background: linear-gradient(135deg, #3182ce, #00b4d8) !important;
    color: white !important;
}

/* FOR DRAG AND DROP VISUAL FEEDBACK*/
.file-upload-area {
    transition: all 0.3s ease;
}

.file-upload-area.drag-active {
    background-color: #e3f2fd;
    border: 2px dashed #2196f3;
    transform: scale(1.02);
}

/*********************************************************************************************/
/**************************END OF SUPPLIER SECTION UPLOAD EXCEL STYLING FROM HOME PAGE*/

/**********************************************************************************************/
/**********************************************************************************************
/************************BELOW MATCH AGAINST UPLOAD EXCEL FROM HOME PAGE*********************************************/
#fold_unfold_match_excel {
    background: linear-gradient(135deg, #4facfe, #00f2fe) !important;
    border: none !important;
    border-radius: 25px !important;
    color: white !important;
    padding: 8px 16px;
    font-weight: 500;
    margin-top: 20px;
    font-size: 14px;
    outline: none !important;
    cursor: pointer;
}

#fold_unfold_match_excel:hover {
    background: linear-gradient(135deg, #3182ce, #00b4d8) !important;
    color: white !important;
}

#match_non_exist_list {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

/* Fix mapping section flex layout */
#upload_match_excel_controls .row.main_page_bulk_upload_height {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 0;
    background: #f8fafc;
    border-radius: 8px;
    padding: 20px;
}

#upload_match_excel_controls .col-5 {
    flex: 1;
    max-width: 40%;
}

#upload_match_excel_controls .col-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: none;
    width: 50px;
}

#upload_match_excel_controls .col-1 label {
    background: transparent !important;
    border: none !important;
    margin: 0;
}

/* Common tooltip styles for all Excel upload buttons */
.excel_btn_with_tooltip {
    border-radius: 6px !important;
    padding: 6px 10px !important;
    display: inline-flex;
    /* Changed from flex to inline-flex */
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 auto;
    /* Center the button */
}

.excel_btn_with_tooltip::before {
    content: attr(data-hover_display);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0s;
    /* ✅ Immediate hide */
    pointer-events: none;
    z-index: 1000;
}

.excel_btn_with_tooltip:hover::before {
    opacity: 1;
    transition: opacity 0.3s 0.7s;
    /* ✅ 0.7s delay before showing */
}

/* Hide text spans inside buttons */
.excel_btn_with_tooltip .btn_span,
.excel_btn_with_tooltip .space_span {
    display: none;
}

@media (max-width: 768px) {
    #upload_match_excel_controls.row {
        flex-direction: column;
    }
}

/******************************END OF MATCH AGAINST UPLOAD EXCEL STYLING**************************/
/************************************************************************************************/
/****************************************************************************************************
/*-------------------------------btn on modal when uploading excel from home page*/
/*----------------------no file warning text dynamically displaying--------------------------*/
#no_file_warning {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
    /* or min-height: 200px */
    text-align: center;
}

.hidden_cat_list {
    display: none;
}

#add_item_to_cat_tbl {
    padding: 10px;
}

/* ============================================================
   Product Excel Upload — Repeated Models Warning Modal
   Target: #import_xls_repeated_modal
   ============================================================ */

#import_xls_repeated_modal #repeated_models_card {
    background-color: rgba(255, 193, 7, 0.08);
}

#import_xls_repeated_modal #repeated_models_card .scrollable_body {
    max-height: 260px;
    overflow-y: auto;
}

#import_xls_repeated_modal .repeated_model_badge {
    display: inline-block;
    padding: 0.35em 0.75em;
    font-size: 0.85rem;
    font-weight: 500;
    color: #856404;
    background-color: rgba(255, 193, 7, 0.15);
    border: 1px solid rgba(255, 193, 7, 0.45);
    border-radius: 0.375rem;
    letter-spacing: 0.01em;
    margin: 0 4px 4px 0;
}

/* ===== CF Admin Share Control Modal =====
which is on the modal opened when clicked on the 
main list of custom files and let admin to share a file
with a colleague all controls modal */
#cf_admin_share_control_modal .modal-body {
    max-height: 70vh;
    overflow-y: auto;
    padding: 1.5rem;
}

#cf_admin_owner_section,
#cf_admin_shared_section,
#cf_admin_new_action_section {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

#cf_admin_owner_section h6,
#cf_admin_shared_section h6,
#cf_admin_new_action_section h6 {
    color: #555;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e0e0e0;
}

#cf_admin_owner_display {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
}

#cf_admin_shared_list .d-flex {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
}

#cf_admin_new_action_section .d-flex {
    flex-wrap: wrap;
    gap: 0.5rem;
}

#cf_admin_new_action_section select {
    flex: 1;
    min-width: 150px;
}

#cf_admin_share_control_modal hr {
    display: none;
}

/*file owner for custom file list*/
/* Owner display styles 
on the home page custom file list column for
file owner history for colleague-shared files*/
.owner-info-cell {
    font-size: 12px;
}

.owner-chain {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.owner-original {
    color: #6c757d;
    font-style: italic;
}

.owner-arrow {
    color: #007bff;
    font-weight: bold;
}

.owner-current {
    color: #28a745;
    font-weight: 600;
}

.owner-normal {
    color: #333;
}

/*Create custom file entering name and making file purpose selection css*/
.file-purpose-section {
    margin-top: 15px;
    margin-bottom: 15px;
}

.file-purpose-label {
    display: block;
    margin-bottom: 10px;
    font-weight: 400;
}

.file-purpose-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.file-purpose-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px;
    cursor: pointer;
}

.file-purpose-option input[type="radio"] {
    margin: 0;
    cursor: pointer;
}

.purpose-color-box {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    flex-shrink: 0;
}

.purpose-color-box svg {
    color: #fff;
    width: 12px;
    height: 12px;
}

.purpose-color-box.general-list {
    background-color: var(--purpose-general);
}

.purpose-color-box.purchase-list {
    background-color: var(--purpose-purchase);
}

.purpose-color-box.sales-list {
    background-color: var(--purpose-sale);
}

.purpose-color-box.trading-list {
    background-color: var(--purpose-tradesman);
}

.purpose-color-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.purpose-color-box svg {
    color: #fff;
}

.purpose-text {
    cursor: pointer;
    font-size: 14px !important;
}

/*currently used only on connect_items_modal*/
.search_input_width {
    max-width: 400px;
    width: 100%;
}

/*currently used only on connect_items_modal*/
/*modal window specs with search functinality at top*/
.modal_search_bar {
    padding: 15px 20px;
    background-color: var(--lightest_background_gray);
    border-bottom: 1px solid var(--light_border_grey);
}

/* Elegant styling for category name in confirmation modal */
#cat_name_for_adding {
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    font-style: italic;
    letter-spacing: 0.3px;
}

/*Inquiry status warnings*/
.tick_green {
    color: green;
}

.tick_grey {
    color: grey;
}

.tick_black {
    color: black;
}

.inner_text_holder {
    padding-right: 10px;
    text-align: center;
    word-wrap: break-word;
}

small.drop_menu:hover {
    cursor: pointer;
}

.bck_light_gray {
    background-color: var(--light_background_gray);
}

.public_dropdown_ul li:hover div.bck_light_gray {
    background-color: var(--tr_focused_color);
}

.bck_selected_active {
    background-color: var(--list_hover_background_color) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.overflow_y_auto {
    overflow-y: auto;
}

.fnt_size_24 {
    font-size: 24px !important;
}

.fnt_size_16 {
    font-size: 16px !important;
}

.mrg_btm_zero {
    margin-bottom: 0 !important;
}

/* the initials part for those who has no image*/
.contact_profile_no_image {
    position: relative;
}

/*custom file initials wrappers (colorful first letter)*/
.customfile_initial_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    padding: 5px;
    text-align: center;
    font-size: 1em !important;
    /*background-color: #00b0eb !important;*/
    /*now it is handled by random color in html_rendered module with our utilities generic function:getInitialColor. uncomment if you want same color always*/
    border-color: var(--entry_light_grey);
    color: white;
    border-radius: 50%;
    margin-right: 5px;
    min-width: 40px;
    min-height: 40px;
    vertical-align: middle;
}

/*for the dropdown of shared file inform in home page custom created initials (colorful first letter)*/
.customfile_initial_wrapper_sm {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    text-align: center;
    font-size: 0.75em;
    background-color: #00b0eb;
    color: white;
    border-radius: 50%;
    min-width: 26px;
    min-height: 26px;
}

/*below those profile images in contact list without image with initials*/
.no_profile_image_cover {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 2px;
    border-radius: 5px;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 2em !important;
    background-color: #00b0eb !important;
    border-color: var(--entry_light_grey);
}

/*homepage user cards initials styling.*/
.user_card_initial {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 2px;
    border-radius: 5px;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 1.5em !important;
    background-color: #7c5cbf;
    border-color: var(--entry_light_grey);
}

/*---------------------------*/
.small_avatar {
    border-radius: 5px;
    width: 42px;
    height: auto;
    align-self: center;
}

/*----------------------END OF CONTACT RATING STYLING-------------------------- */
.contact_profile {
    position: relative;
}

/* Base badge — shared unchanging properties declared once */
.contact_profile::after {
    content: attr(data-unread);
    position: absolute;
    top: 2px;
    right: 2px;
    height: 10px;
    width: 5px;
    font-size: 8px;
    padding: 5px 10px 6px 1px;
    line-height: 10%;
    border: 1px #fff solid;
    border-bottom-left-radius: 12px;
    background: var(--ezinq_theme_color);
    opacity: 1;
    color: white;
}

/* Status color overrides */
.contact_profile[data-status="Online"]::after {
    background: green;
}

.contact_profile[data-status="Offline"]::after {
    background: grey;
}

/*Right side on home page show hide column buttons size*/
#show_hide_columns button {
    font-size: 0.8rem;
    padding: 0.1rem 0.25rem;

}

/*=============RATINGS FOR CONTACT=============*/
.ratings {
    font-size: 0;
    white-space: nowrap;
    display: inline-block;
    height: 20px;
    overflow: hidden;
    position: relative;
    /*background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');*/
    background-image: url(df004b070e2a936fb6f1.svg);
    background-size: contain;
}

.ratings i {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 1;
    /*background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjRkZERjg4IiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');*/
    background-image: url(e8b297f50001051f8f7f.svg);
    background-size: contain;
}

.ratings input {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    opacity: 0;
    display: inline-block;
    height: 100%;
    margin: 0;
    padding: 0;
    z-index: 2;
    position: relative;
}

.ratings input:hover+i,
.ratings input:checked+i {
    opacity: 1;
}

.ratings {
    width: 100px;
}

.ratings input,
.ratings i {
    width: 20%;
}

.ratings i~i {
    width: 40%;
}

.ratings i~i~i {
    width: 60%;
}

.ratings i~i~i~i {
    width: 80%;
}

.ratings i~i~i~i~i {
    width: 100%;
}

/*===============END OF RATINGS FOR CONTACT==========*/
.top_btn_cont,#top_button_section {
    background-color: var(--lightest_background_gray);
    border: 1px solid var(--lightest_background_gray);
    border-radius: 2px;
}

/*below is errors hightlight on modal window which is shown while uploading xls or csv file*/
.error_highlight {
    background-color: black;
    color: white;
}

#bought_stat_table span,
#sold_stat_table span {
    font-size: 16px;
    display: inline-block;
    word-wrap: break-word;
    word-break: break-word;
}

/*=========FILES AND PURCHASES SALES LIST AT HOME PAGE==========*/
.status_image {
    padding: 0 !important;
}

.status_image img {
    width: 60%;
}

/*==========PRODUCT CONTROL BUTTONS ON CATALOG IN HOME PAGE (TABLE VIEW)*/
.control_icons_wrapper {
    position: absolute;
    bottom: 0;
    text-wrap: nowrap;
    background-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    display: flex !important;
    align-items: center;
    border-radius: 5px;
}

.control_icons_wrapper .table_kebab_trigger {
    opacity: 0.3;
    transition: opacity 0.15s ease;
}

.control_icons_wrapper:hover .table_kebab_trigger {
    opacity: 1;
}

.control_icons_wrapper .table_quick_action {
    display: inline-flex;
    align-items: center;
    width: 0;
    opacity: 0;
    overflow: hidden;
    transition: width 0.15s ease, opacity 0.15s ease;
    box-sizing: border-box;
}

.control_icons_wrapper:hover .table_quick_action {
    width: 1.5em;
    opacity: 1;
}

.control_icons_wrapper a:first-child {
    padding-left: 5px;
}

.control_icons_wrapper a:last-child {
    padding-right: 5px;
}

/*======================================*/
.dropdown_exception {
    position: absolute !important;
    max-height: 300px;
    overflow-y: auto;
    width: 250px;
    padding: 0 !important;
}

/*==========MULTIPLE SHEET PRODUCT EXCEL UPLOAD============================*/
#sheets_table {
    width: 100%;
}

#sheets_table td:first-child,
#sheets_table th:first-child {
    width: 30px;
}

/*========================================*/
/*start of bought item statistics columns*/
.stat_check_col {
    width: 7%;
}

.stat_item_img_col {
    width: 7%;
}

.stat_item_name_col {
    width: 28%;
}

.stat_item_model_col {
    width: 15%;
}

.stat_item_price_col {
    width: 10%;
}

.stat_item_qty_col {
    width: 10%;
}

.stat_comp_col {
    width: 7%;
}

.stat_date_col {
    width: 16%;
}

/*end of bought item statistics columns*/
.copy_progress_wrapper {
    position: absolute;
    bottom: 0;
    width: 95%;
    padding: 5px 0;
}

.uploadxlsselectboxdiv {
    /*homepage upload multiple item with excel, selectbox wrapper divs for size*/
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

/*=================================================*/
.connect_element {
    /*connect icon on model in homepage showing connected icons*/
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
    margin: 0 auto;
    /* color: var(--icon_colors); */
    font: normal 1rem sans-serif;
    padding: 3px;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    /*background-color:transparent;*/
    /*height:15px;*/
    /*display: inline-flex;*/
    /*align-items: center;*/
    /*justify-content: center;*/
    /*transition:0.3s;*/
}

.connect_element {
    top: 2px;
}

.connect_element:hover {
    text-decoration: none !important;
    color: var(--icon_hover);
}

.connection_dropdown {
    min-width: 15rem !important;
}

/*====================================*/
#product_detail_table tr div {
    font-size: 14px;
    word-break: break-all;
}

#num_of_connected_items_div {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: var(--background_color_div_light);
    border-radius: 5px;
}

/*===================================*/
.copy_row_img_wrapper {
    padding: 5px;
}

.copy_row_img_btns {
    font-size: 14px;
    display: inline;
    outline: none;
    border: none;
    min-width: 45%;
    padding-right: 5px;
    padding-left: 5px;
    white-space: normal;
}

/*==================================*/
.control_menu_checkbox_text {
    /*in homepage under the control menu, there are two checkboxes and this is the text span next to checkboxes with width so that it pushes the checkbox to right side*/
    display: inline-block;
    width: 150px;
}

/*================================*/
#move_word_up {
    /*button on top of word add modal to switch sequence of words to display*/
    min-height: calc(1.5em + 0.75rem + 2px);
}

/*=========================================*/
.mrg_right_10 {
    margin-right: 10px;
}

/*comes from product.class.php for similar items for either match_against or custom order*/
.similar_item_btn_text_span {
    font-size: 12px;
}

.each_custom_file {
    display: inline-block;
    border-radius: 3px;
    border: 1px solid transparent;
}

.each_custom_file:hover {
    border: 1px solid grey;
}

.cf_tab_item {
    display: inline-flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    padding: 1px 1px;
    margin: 2px 3px;
}

.cf_tab_usercard_icon {
    color: #5b8dee;
}

.cf_tab_file_icon {
    color: inherit;
}

.cf_tab_item:hover .cf_tab_usercard_icon {
    color: inherit;
}

/*IN HOMEPAGE ALL ITEMS IN EACH LIST ALMOST GET THIS CLASS*/
.home_page_clickable_item_text {
    word-wrap: break-word !important;
    word-break: break-all !important;
    overflow-wrap: break-word;
    padding: 1.25rem !important;
    font-size: 14px !important;

}

.home_page_clickable_item_text a {
    cursor: pointer;
    text-decoration: none;
}

.file_company_td a.link_effect {
    display: inline-block;
    /* width: 100%;
    box-sizing: border-box; */
}

/* =====================================================
   DEMO NUDGE ROW
   Shown in product table when demo items exist
   Encourages user to create first WorkBench file
   ===================================================== */
.demo_nudge_card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background-color: rgba(232, 168, 56, 0.08);
    border-left: 3px solid var(--accent-workbench);
    border-radius: 4px;
    margin: 4px 0;
    flex-wrap: wrap;
}

.demo_nudge_icon {
    font-size: 20px;
    color: var(--accent-workbench);
    flex-shrink: 0;
}

.demo_nudge_text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 150px;
}

.demo_nudge_text strong {
    font-size: 13px;
    color: #333;
}

.demo_nudge_text span {
    font-size: 12px;
    color: #666;
}

.demo_nudge_inline_btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--accent-workbench);
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
    display: inline;
    margin-left: 4px;
}

.demo_nudge_inline_btn:hover {
    color: #c17d1a;
}

/* .icon_draft svg { */
/*color: #F5CBA7; /* coffee */
/* } */
.icon_sent svg {
    color: #e67e22;
    /* orange */
}

.icon_received svg {
    color: #8db600;
    /* yellowish green */
}

.badge_ezinq [data-icon="ez-card-outline"] .ezinq-svg-icon {
    color: #e67e22;
}

.icon_ezinq svg {
    color: var(--ezinq_theme_color);
}

.icon_usercard svg {
    color: #888888;
    /* muted gray — subtle, neutral */
}

/* Company section search results extra — EZINQ network + create card */
#company_search_results_extra {
    padding: 8px 12px;
}

.company_search_network_section {
    padding: 8px 0 6px 0;
    border-top: 1px solid var(--border-color, #e0e0e0);
    margin-top: 6px;
}

.company_search_section_label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted, #6e6e73);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Updated 2026-07-21: original selectors never matched rendered markup (table
   <tr>/card <div> used different classnames). Renamed to what's actually output
   by buildEzinqNetworkRow()/buildEzinqNetworkCard() in html_renderer.js. */

/* Shared text sizing — applies to both table row and card, since both spans
   now carry this class */
.company_search_network_name {
    font-size: 14px;
}

.ezinq_network_row .badge_label {
    font-size: 14px;
}

/* Card view only — display:flex would break a real <tr> in table view, so this
   layout is scoped to .wb-ezinq-network-card, not shared with the table row */
.wb-ezinq-network-card {
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color-light, #f0f0f0);
}

.wb-ezinq-network-card .wb-inq-card-top-row,
.wb-ezinq-network-card .wb-inq-card-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.wb-ezinq-network-card .wb-inq-card-bottom-row {
    margin-top: 6px;
}

.company_search_empty_state {
    padding: 16px 0;
    font-size: 0.85rem;
    color: var(--text-muted, #6e6e73);
    text-align: center;
}

.company_search_create_row {
    padding: 10px 0 4px 0;
    border-top: 1px solid var(--border-color, #e0e0e0);
    margin-top: 6px;
}

.company_search_create_card_btn {
    font-size: 0.82rem;
    color: var(--text-muted, #6e6e73);
}

.company_search_create_card_btn:hover {
    color: var(--link-color, #5b8dee);
}

.trial_navigation_icon:hover {
    color: #1a6fa3;
}
/* Navigation: cat_section_btn_div → .dynm_cat_img sizing
   Purpose: category image (inserted by handleCatAnchorClick) was using its raw
   40x40 inline width/height, overflowing the button's icon-sized space in both
   desktop and mobile drawer toggles. Constrains it to match the icon footprint
   instead, so selecting a category never grows the button's height. */
#cat_wrapper_span .dynm_cat_img {
    width: 18px;
    height: 18px;
    object-fit: cover;
    border-radius: 3px;
    vertical-align: middle;
}
@media (max-width: 767px) {
    .demo_nudge_card {
        flex-direction: column;
        align-items: flex-start;
    }
}
.mapping-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-left: auto;
    flex-shrink: 0;
    box-shadow: inset 0 -2px 3px rgba(0,0,0,0.2), inset 0 1px 2px rgba(255,255,255,0.4);
}
.mapping-indicator.green { background-color: #28a745; }
.mapping-indicator.yellow { background-color: #ffc107; }
.mapping-indicator.red { background-color: #dc3545; }
/*=====================================*/
.sidebar_drawer_separator {
    color: white;
}
/* Only what actually changes per breakpoint */
@media screen and (max-width: 991px) {
    .contact_profile::after {
        top: 8px;
        right: 8px;
        border-width: 2px;
    }

    .status_image img {
        width: 70% !important;
    }

    /*======================================*/
    /*start of bought item statistics columns*/
    /*below are homepage statistics table*/
    .stat_check_col {
        width: 7%;
    }

    .stat_item_img_col {
        width: 10%;
    }

    .stat_item_name_col {
        width: 20%;
    }

    .stat_item_model_col {
        width: 15%;
    }

    .stat_item_price_col {
        width: 13%;
    }

    .stat_item_qty_col {
        width: 13%;
    }

    .stat_comp_col {
        width: 10%;
    }

    .stat_date_col {
        width: 12%;
    }

    /*end of bought item statistics columns*/
    .home_page_clickable_item_text {
        padding: 0.3rem !important;
    }
    /*below .home_sent_comp_td comes from fetch_files for sent and received inquiry
    under a is for company name and span is for status information*/
    .home_page_clickable_item_text a,
    .home_page_clickable_item_text div,
    .home_page_clickable_item_text span {
        font-size: 12px !important;
    }

    #bought_stat_table span,
    #sold_stat_table span {
        font-size: 12px;
    }

    .home_radio_btn label {
        font-size: 12px;
    }

}

@media screen and (max-width: 768px) {
    .contact_profile::after {
        top: 0;
        right: 0;
    }

    /*=====================================*/

    
}

@media screen and (max-width: 576px) {

    .user_card_initial,
    .no_profile_image_cover {
        font-size: 0.67rem !important;
    }

    .status_image {
        padding: .1em !important;
    }

    .dropdown_exception {
        width: 50vw;
    }

    .uploadxlsselectboxdiv {
        /*homepage upload multiple item with excel, selectbox wrapper divs for size*/
        width: 90%;
    }

    /*==================================*/
    /*.home_sent_comp_td is coming from fetch_files.php to adjust company and
     status writings in inquiry tables on homepages*/
    .home_page_clickable_item_text {
        font-size: 10px !important;
    }

    .home_page_clickable_item_text a,
    .home_page_clickable_item_text div,
    .home_page_clickable_item_text span {
        font-size: 10px !important;
    }

    /*phidden is hiding the rankings in home page for contacts*/
    .phidden {
        display: none;
    }
}

@media screen and (max-width: 509px) {
    .contact_profile::after {
        top: 0;
        right: 0;
        width: 2px;
        font-size: 10px;
        padding: 8px 12px 10px 3px;
    }
}

@media screen and (max-width: 480px) {
    .contact_profile::after {
        top: 0;
        right: 0;
        height: 7px;
        width: 2px;
        font-size: 8px;
        padding: 6px 10px 8px 3px;
    }

    /*======== above classes used only on a modal , later might think of removing by finding a solution*/
}

@media screen and (max-width: 362px) {

    .home_page_clickable_item_text a,
    .home_page_clickable_item_text div,
    .home_page_clickable_item_text span {
        font-size: 8px !important;
    }
}
/*TABLE COLUMN WIDTHS*/
.custom_file_table .standard_col {
    width: auto !important;
}

.custom_file_table .inq_img_td {
    padding: 0.25rem !important;
}

.custom_file_table .inq_img_td {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

@media screen and (max-width: 576px) {
    .custom_file_table .inq_img_td {
        padding: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

/*END OF TABLE COLUMN WIDTH*/
/* Custom file table - numeric input cells */
.custom_file_table .info_btn_td {
    position: relative;
    overflow: visible !important;
    padding: 3px !important;
}

.custom_file_table .info_btn_td input {
    padding: 2px 4px !important;
}

.custom_file_table .info_btn_td input,
.custom_file_table .info_btn_td .classic_des {
    font-variant-numeric: tabular-nums;
}

/*.publicinnertbl {border-collapse:collapse;}*/
/*.publicinnertbl .first {border-bottom:1px solid #EEE;}*/
/*.publicinnertbl .second {border-top:1px solid #CCC;box-shadow: inset 0 1px 0 #CCC;}​*/
/* Added 2026-04-03: guest share functionality */
.cf_tab_share_indicator {
    margin-left: 4px;
    opacity: 0.5;
    font-size: 11px;
    vertical-align: middle;
}

.cf_tab_share_indicator .ezinq-svg-icon {
    width: 11px;
    height: 11px;
}

/* Added 2026-04-03: guest share functionality */
.cf_tab_inform_dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #ff3b30;
    border-radius: 50%;
    margin-left: 3px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ===== GUEST ADJUSTMENT INDICATORS ===== */
/* Added 2026-04-03: guest share functionality */

.guest-adj-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
    margin-left: 3px;
    vertical-align: middle;
    flex-shrink: 0;
}

.guest-adj-price-indicator,
.guest-adj-qty-indicator {
    color: var(--guest_adjustment_color);
}

.guest-adj-popover-content {
    min-width: 160px;
}

.guest-adj-popover-label {
    font-size: 11px;
    color: #6e6e73;
    margin-bottom: 4px;
}

.guest-adj-popover-value {
    font-size: 15px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 8px;
}

.guest-adj-popover-actions {
    display: flex;
    gap: 6px;
}

.guest-adj-rejected {
    text-decoration: line-through;
    opacity: 0.5;
}

.guest-adj-added {
    border-left: 3px solid #34c759;
    background: rgba(52, 199, 89, 0.05);
}

/* Changed: moved from inline-with-name-text to a thin banner pinned to the
   top of the image wrapper (.inq_img_td), same positioning context as
   .control_icons_wrapper (bottom:0) — no overlap, no longer competes with
   product name text for space. */
.guest-added-badge {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: var(--guest_adjustment_color);
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    text-align: center;
    padding: 2px 4px;
    line-height: 1.3;
    border-radius: 5px 5px 0 0;
    z-index: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Guest adjustment indicators — custom file table only */
/* Added 2026-04-03: guest share functionality */
/* Changed: added background using the new --guest_adjustment_bck_color
   variable + shadow, matching the note indicator's treatment for
   consistency — position kept identical to original. */
.custom_file_table .guest-adj-price-indicator,
.custom_file_table .guest-adj-qty-indicator {
    position: absolute;
    bottom: 2px;
    left: 2px;
    z-index: 10;
    color: var(--guest_adjustment_color);
    cursor: pointer;
    background: var(--guest_adjustment_bck_color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.custom_file_table td.hidden_767 {
    position: relative;
    overflow: visible !important;
}

/* Changed: added white background + shadow so the indicator stays visually
   distinct from note text underneath regardless of note length — position
   (bottom-left) kept identical to original. */
.custom_file_table .guest-adj-note-indicator {
    position: absolute;
    bottom: 2px;
    left: 2px;
    z-index: 10;
    color: var(--guest_adjustment_color);
    cursor: pointer;
    background: var(--guest_adjustment_bck_color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.guest-adj-popover-converted {
    font-size: 11px;
    color: #6e6e73;
    margin-top: 2px;
    margin-bottom: 4px;
}
.guest-adj-popover-dismiss-wrap {
    text-align: center;
    margin-top: 6px;
}

.guest-adj-dismiss-link {
    font-size: 11px;
    color: var(--color_light_text, #6e6e73);
    text-decoration: underline;
}

.guest-adj-dismiss-link:hover {
    color: var(--text_color_primary, #1d1d1f);
}
/* ===== END GUEST ADJUSTMENT INDICATORS ===== */
/* --- BREADCRUMB ENHANCEMENTS --- */

/* Parent list item */
.breadcrumbnav li.breadcrumb_wrapper {
    display: flex;
    align-items: center;
    list-style: none;
}

/* The new wrapper for Currency + Name */
.breadcrumb_content_area {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background 0.2s;
}

/* Currency "Pill" Styling */
.current_breadcrumb_currency {
    background: #f1f3f5;
    color: #2b2d42;
    font-weight: 800;
    font-family: monospace;
    /* Makes symbols look consistent */
    padding: 2px 10px;
    border-radius: 4px;
    border: 1px solid #ced4da;
    margin-right: 10px;
    font-size: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* File Name Styling */
.breadcrumb_file_name {
    font-weight: 600;
    color: #495057;
    font-size: 15px;
    margin-right: 8px;
}

/* Hover effect only for the clickable area */
a.breadcrumb_content_area:hover {
    background: #f8f9fa;
}

a.breadcrumb_content_area:hover .breadcrumb_file_name {
    color: #007bff;
    text-decoration: underline;
}

/* Added 2026-04-21: workbench rate info strip in breadcrumb for shared files for showing rate info.*/
#workbench_rate_info_strip {
    display: inline-flex;
    align-items: center;
    align-self: center;
    font-size: 11px;
    color: #6e6e73;
    background: #f5f5f7;
    border-radius: 4px;
    padding: 2px 8px;
    gap: 4px;
    flex-shrink: 0;
    white-space: nowrap;
    margin-top: 2px;
    margin-bottom: 2px;
    line-height: 1.2;
}

/*End of workbench rate info strip in breadcrumb for shared files for showing rate info.*/
/* END OF STYLING CUSTOM BREADCRUMBS */
/*=======CUSTOM FILE NOTE INPUT TEXTAREA STYLING =========*/
.note_cell_td {
    padding: 0 !important;
    vertical-align: top;
}

.note_cell_td .custom_file_note_wrapper {
    height: 100%;
    background-color: transparent;
    border-radius: 0 !important;
    padding: 0 !important;
    border: none;
    box-shadow: none;
}

.note_cell_td .custom_file_note_text {
    border-radius: 0 !important;
    background-color: var(--bs-light, #f8f9fa);
    color: #555;
    border: none;
    cursor: default;
    box-shadow: none;
}

.note_cell_td .custom_file_note_text:not([readonly]) {
    background-color: #fff !important;
    color: #000;
    cursor: text;
    box-shadow: inset 0 0 0 1.5px #ccc;
}

.note_cell_td.hidden_767 {
    position: relative;
    padding: 0 !important;
}

.note_cell_td .custom_file_note_wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
}

.fixed_height_row .note_cell_td .custom_file_note_wrapper {
    max-height: none !important;
}

.note_cell_td[id$="2"] .custom_file_note_text {
    background-color: #f7f9ff;
    /* lighter blue - supplier */
}

.note_cell_td[id$="1"] .custom_file_note_text {
    background-color: #f7fff9;
    /* lighter green - buyer */
}

.note_cell_td[id$="2"] .custom_file_note_text:not([readonly]) {
    background-color: #fff;
}

.note_cell_td[id$="1"] .custom_file_note_text:not([readonly]) {
    background-color: #fff;
}

/*=======END OF CUSTOM FILE NOTE INPUT TEXTAREA STYLING =========*/
/* ____________________ custom file note entry area_______________________________________*/
/* Note History Modal Styling */
/* Note History Modal Styling */
.custom-file-note-item {
    margin-bottom: 15px;
    padding: 12px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: none;
    position: relative;
    /* For positioning remove button */
}

.custom-file-note-item.existing-note {
    border-left: none;
    /* Only left border */
    border-right: none;
    border-top: none;
    border-bottom: none;
    background: linear-gradient(to right, #f8f9fa, #ffffff);
}

.custom-file-note-item.new-note {
    border-left: none;
    /* Only left border */
    border-right: none;
    border-top: none;
    border-bottom: none;
    background: linear-gradient(to right, #f8fff9, #ffffff);
    animation: slideIn 0.3s ease-out;
}

.custom-file-note-item .note-date {
    color: #6c757d;
    font-size: 0.85rem;
    margin-bottom: 8px;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.custom-file-note-item.new-note .note-date {
    color: #28a745;
}

.custom-file-note-textarea {
    width: 100%;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 8px;
    font-size: 0.9rem;
    background: #ffffff;
    transition: border-color 0.2s ease;
}

.custom-file-note-item.new-note .custom-file-note-textarea {
    border: 2px solid #28a745;
    min-height: 60px;
}

.custom-file-note-textarea:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.custom-file-note-item.new-note .custom-file-note-textarea:focus {
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.note-remove-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.note-remove-btn:hover {
    opacity: 1;
    background: #c82333;
}

.custom-file-note-item.new-note .note-remove-btn {
    background: #6c757d;
    /* Gray for new unsaved notes */
}

.custom-file-note-item.new-note .note-remove-btn:hover {
    background: #5a6268;
}

/* ===== SHARE WORKBENCH MODAL ===== */
#share_result_section {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 0;
}

#share_existing_links_section {
    margin-top: 4px;
}

#share_existing_links_section h6 {
    font-weight: 600;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #dee2e6;
}

/* ===== END SHARE WORKBENCH MODAL ===== */
.hr-slim {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.top_selection_btn.with_file_id span:first-child {
    font-size: 13px !important;
}

.top_selection_btn.with_file_id {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.content_distinguisher {
    background-color: var(--entry_light_grey);
    border-radius: 0.25rem;
    box-shadow: 2px 2px 2px rgb(211, 211, 211, .4);
}

.b_md_right {
    border-right: 1px solid var(--light_background_border);
}

/*==========ON THE BREADCRUMB==========*/
#random_inq_cust_email {
    height: 16px;
    /* Small height for email */
    font-size: 12px;
    margin-top: 2px;
    flex: 0 0 auto;
}

/*==================================*/
.custom_file_note_wrapper {
    position: relative;
    width: 100%;
    height: 100px;
    padding: 5px !important;
    background-color: black;
    border-radius: 6px !important;
}

.custom_file_note_text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow: auto !important;
    font-size: 12px;
    border-radius: 5px !important;
}

.custom_file_note_btn {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    padding: 0;
    outline: none;
    border-radius: 0 !important;
    border: 1px solid #ddd;
}

.custom_file_note_btn:hover {
    cursor: text;
}

/*==============================*/
tr.selected_supplier td.selected_supplier {
    background-color: green !important;
    color: white !important;
}

tr.customfilegrouptitle h5 {
    text-decoration: underline;
    font-weight: bold;
    color: var(--background_color_common_active);
}

.top_fixed_btn_wrapper .fixed_btn,
.top_fixed_btn_wrapper .icon {
    font-size: 14px !important;
    white-space: nowrap;
}

/*===================================================*/
/* =====================================================
   SHARE BUTTON BADGE
   Green counter showing number of active share links
   Shown/hidden by CustomFilesManager.updateShareBadge()
   ===================================================== */
#share_info_btn_badge {
    background-color: #28a745;
    color: #fff;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    font-size: 9px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* =====================================================
   WORKBENCH FILE TAB BUTTONS
   Prevents tabs from stretching to fill full width
   cf_file_tab class added only to dynamically created
   WorkBench file tabs in createNewPageButton()
   ===================================================== */
.cf_file_tab {
    flex: 0 0 auto !important;
    width: auto !important;
    white-space: nowrap;
    border: 2px solid transparent;
}

.cf_tab_context_bar {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: var(--text-muted, #6e6e73);
    margin-top: 4px;
}

.cf_tab_context_code {
    font-weight: 600;
}

.cf_tab_context_company {
    font-weight: 400;
    opacity: 0.8;
}

.cf_tab_context_tabname {
    opacity: 0.7;
}

.cf_tab_context_label {
    font-weight: 400;
}

@media (max-width: 991px) {
    .cf_tab_context_bar {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: 3px;
        font-size: 0.74rem;
    }
}

/*===================================*/
@media screen and (max-width: 991px) {
    .b_md_right {
        border-right: none;
    }

    .b_sm_bottom {
        border-bottom: 1px solid var(--light_background_border);
    }
}

@media screen and (max-width: 768px) {

    /* Email area smaller */
    #random_inq_cust_email {
        font-size: 11px;
        padding: 3px 6px;
    }

    /* 2. Shrink the currency tag slightly for mobile so it takes less space */
    .current_breadcrumb_currency {
        padding: 1px 6px;
        font-size: 11px;
        margin-right: 5px;
    }

    /* --- MOBILE BREADCRUMB RESCUE --- */
    /* 1. Remove the strict width limit so our new wrapper can breathe */
    .breadcrumbnav li.breadcrumb_wrapper {
        max-width: none !important;
        width: 100%;
        overflow: visible !important;
        flex-wrap: wrap;
        /* Allows badge to move to next line if screen is tiny */
    }

    .breadcrumb_file_name {
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 150px;
        /* More generous than 120px */
        display: inline-block;
        vertical-align: middle;
    }

    /* 4. Make the clickable area flex to keep pill and name together */
    .breadcrumb_content_area {
        display: inline-flex;
        align-items: center;
        max-width: calc(100vw - 100px);
        /* Dynamic width based on screen */
    }


}

/* ================================================================
   SHARE WORKBENCH MODAL — existing links card layout
   Replaces legacy table structure in #share_existing_links_list
   ================================================================ */

#share_existing_links_list .share-link-card {
    background-color: var(--background_color_div_light);
    border-radius: var(--li_border_radius);
    padding: 10px 12px;
    margin-bottom: 6px;
}

#share_existing_links_list .share-link-card:last-child {
    margin-bottom: 0;
}

#share_existing_links_list .share-link-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

#share_existing_links_list .share-link-card-name {
    font-weight: 500;
    font-size: 13px;
}

#share_existing_links_list .share-link-card-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

#share_existing_links_list .share-link-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: var(--color_light_text);
    padding-top: 6px;
}

#share_existing_links_list .share-link-kebab-btn {
    padding: 4px 6px;
    display: inline-flex;
    align-items: center;
}

@media screen and (max-width: 768px) {
    #share_existing_links_list .share-link-card-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    #share_existing_links_list .share-link-card-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ================================================================
   SHARE WORKBENCH MODAL — manage tabs expandable panel
   ================================================================ */

.share-link-manage-tabs-panel {
    margin-top: 8px;
    padding: 8px 10px;
    background-color: var(--background_color_div_light_btn_active);
    border-radius: var(--li_border_radius);
}

.share-link-manage-tabs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.share-link-manage-tabs-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--color_light_text);
}

.share-link-manage-tabs-close {
    display: inline-flex;
    align-items: center;
    color: var(--color_light_text);
}

.share-manage-tab-label {
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.share-manage-tab-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.share-manage-already {
    font-size: 10px;
    color: var(--color_light_text);
}

/*formatting number of items in a specific tab dislay on the tab*/
.cf_tab_item_count {
    font-size: 11px;
    color: var(--muted_text_color, #888);
    margin-left: 4px;
    opacity: 0.65;
    transition: opacity 0.15s ease;
}

.top_selection_btn:hover .cf_tab_item_count,
.active_top_sel_btn .cf_tab_item_count {
    opacity: 0.75;
    color: inherit;
}

#top_button_section {
    background-color: #f9f6f0;
    /* Added: workbench tab overflow — see custom-files-manager.js _layoutTabs() */
    flex-wrap: nowrap !important;
    /* justify-content: flex-start (not center, inherited from .flex_row_center) —
       flexbox has a long-standing bug where container padding is ignored on the
       overflowing side(s) when justify-content isn't flex-start. Only matters once
       nowrap + overflow is active (see _layoutTabs()) — before that, content fit
       and centering looked fine either way. */
    justify-content: flex-start !important;
}
.rsi_info_header {
    background-color: var(--background_color_div_light, #f8f9fa);
    padding-top: 14px;
    padding-bottom: 14px;
}

.rsi_info_wrapper {
    width: 100%;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
}

/* connected-state paragraph, injected as #rsi_c_user_connected_info.dialog_parag */
.rsi_info_wrapper .dialog_parag {
    margin: 0;
    color: var(--text_color_muted, #666);
}

.rsi_info_wrapper .dialog_parag strong,
.rsi_info_wrapper .dialog_parag b {
    color: var(--text_color_primary, #222);
}

/* not-connected-state: selectbox + connect button row */
.rsi_info_wrapper select {
    max-width: 220px;
}
/* ================================================================
   WORKBENCH TAB OVERFLOW — "MORE" DROPDOWN
   #top_button_section switches from flex-wrap (old: tabs wrap to a
   second line) to a single non-wrapping row. CustomFilesManager's
   new _layoutTabs() measures available width and moves whatever
   doesn't fit into a "N More" dropdown instead of letting it wrap.
   ================================================================ */
   /* ================================================================
   WORKBENCH TAB OVERFLOW — "MORE" DROPDOWN
   #top_button_section switches from flex-wrap (old: tabs wrap to a
   second line) to a single non-wrapping row. CustomFilesManager's
   new _layoutTabs() measures available width and moves whatever
   doesn't fit into a "N More" dropdown instead of letting it wrap.
   ================================================================ */

/* Fade-out truncation for long tab names — replaces the old flat
   text-overflow:ellipsis with a gradient fade (browser-tab style)
   so long names trail off instead of being hard-cut with "...".
   Targets only the name span, not the count badge/share icon/dot
   that ride alongside it inside the same button. */
/* .cf_file_tab .custom_file_name_wrapper {
    display: inline-block;
    max-width: 120px;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%);
    mask-image: linear-gradient(to right, #000 85%, transparent 100%);
} */

/* "N More" toggle button — sits at the end of the tab row, same
   visual language as the tabs themselves (built dynamically in JS
   with the live overflow count as its label). */
#cf_tabs_more_toggle {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Dropdown menu holding overflowed tabs — reuses the existing
   .public_dropdown_ul.dropdown-menu pattern (see container actions
   dropdown above) rather than inventing a new menu style. */
#cf_tabs_more_menu {
    min-width: 180px;
    overflow-y: auto;
    padding: 4px;
    /* max-height is set dynamically in JS on show.bs.dropdown — see
       initializeEventHandlers() — using the toggle's real measured position,
       not a CSS guess. Bootstrap's default .dropdown-menu positioning (top:100%,
       left:0) plus data-display="static" on the toggle already keeps it directly
       below without overlap; this rule only handles internal scroll once content
       exceeds the JS-computed cap. */
}

/* Inside the dropdown, tabs render as full-width stacked rows
   instead of pill-shaped inline tabs — no max-width clamp and no
   fade mask here, since the dropdown has room to show full names. */
#cf_tabs_more_menu .cf_file_tab {
    display: flex;
    align-items: center;
    /* !important needed here: base .cf_file_tab rule sets width:auto !important
       for row tabs — a plain (non-important) width here would silently lose to
       that rule regardless of this selector's higher specificity, leaving the
       button narrower than its <li>, which is why clicks outside the button's
       own (narrow) box but still inside the <li>'s hover-highlighted area were
       not registering. */
    width: 100% !important;
    max-width: none !important;
    margin: 0;
    text-align: left;
    border-radius: 4px;
}

/* The <li> wrapper itself must have zero padding/margin of its own — any space it
   owns outside the button is a dead click zone (clicking there hits the <li>, not
   the button inside it, so nothing fires). The button already fills 100% width
   above; this makes it fill the full <li> box too, so the entire visible row is
   one continuous clickable/hoverable surface with no gap. */
#cf_tabs_more_menu > li {
    padding: 0;
    margin: 0;
    list-style: none;
}

#cf_tabs_more_menu .cf_file_tab .custom_file_name_wrapper {
    max-width: none;
    flex: 1 1 auto;
    -webkit-mask-image: none;
    mask-image: none;
}
/* ================================================================
   WORKBENCH CHANGE LOG — negotiation history modal (chat bubble view)
   Rendered by CustomFilesManager._renderChangeLogTimeline() into
   #wb_change_log_list. Factory (self) aligns right, guest (other)
   aligns left — mirrors standard messaging app convention.
   ================================================================ */

#wb_change_log_list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wb-changelog-entry {
    width: 100%;
}

.wb-changelog-sender-label {
    font-size: 10px;
    font-weight: 600;
    color: #6e6e73;
    text-align: center;
    width: 100%;
    margin-bottom: 3px;
}

.wb-changelog-bubble-col {
    display: flex;
    width: 100%;
}

.wb-changelog-bubble-col.wb-changelog-self {
    justify-content: flex-end;
}

.wb-changelog-bubble-col.wb-changelog-other {
    justify-content: flex-start;
}

.wb-changelog-bubble {
    max-width: 78%;
    background-color: var(--background_color_div_light, #f8f9fa);
    border-radius: var(--li_border_radius, 10px);
    padding: 8px 12px;
}

.wb-changelog-self .wb-changelog-bubble {
    background-color: rgba(52, 199, 89, 0.08);
    border: 1px solid rgba(52, 199, 89, 0.15);
}

.wb-changelog-other .wb-changelog-bubble {
    background-color: var(--background_color_div_light, #f8f9fa);
}

.wb-changelog-bubble-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color_light_text, #6e6e73);
    margin-bottom: 4px;
}

.wb-changelog-bubble-label .ezinq-svg-icon {
    width: 12px;
    height: 12px;
}

.wb-changelog-bubble-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--text_color_primary, #1d1d1f);
}

.wb-changelog-context {
    font-size: 14px;
    font-weight: 500;
    color: var(--text_color_primary, #1d1d1f);
    margin-top: 2px;
}

.wb-changelog-bubble-date {
    font-size: 10px;
    color: var(--color_light_text, #6e6e73);
    margin-top: 4px;
    text-align: right;
}
/* ============================================================
   SHARE WORKBENCH — VIEW DETAILS MODAL
   Added: view-details feature (geo + unique view tracking)
   ============================================================ */

.wb-view-details-summary-line {
    font-size: 14px;
    color: var(--text_muted_color);
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--light_border_grey);
}

.wb-view-details-day-label {
    font-size: 12px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin: 14px 0 6px 0;
}

.wb-view-details-day-label:first-child {
    margin-top: 0;
}

.wb-view-details-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
}

.wb-view-details-time {
    color: #999;
    min-width: 40px;
    font-variant-numeric: tabular-nums;
}

.wb-view-details-flag {
    width: 18px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

.wb-view-details-country {
    color: inherit;
}
.share-link-card-view-details-row {
    margin-top: 6px;
    font-size: 12px;
}
/* Note conversation visibility icon — shown on buyer_note only, only when
   the displayed text came from conversation history (guest or factory-sent),
   not for plain internal notes. Means "the other side can see this." */
.conversation-visible-icon {
    position: absolute;
    top: 3px;
    right: 3px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--note_history_source_indicator);
    background: var(--guest_adjustment_bck_color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    width: 16px;
    height: 16px;
}

.conversation-visible-icon .ezinq-svg-icon {
    width: 10px;
    height: 10px;
}
/* Card-view note visibility icon variant — sits inline next to the field
   label instead of absolutely positioned, since the card layout has no
   spare corner space over the textarea the way table view does. */
.conversation-visible-icon-card {
    position: static;
    display: inline-flex;
    margin-left: 4px;
    width: 14px;
    height: 14px;
    box-shadow: none;
    background: transparent;
}
/* Conversation-sourced note content is not directly editable — clicking
   opens the reply modal instead. pointer cursor + hidden caret reinforce
   that this isn't a normal text field, on top of the mousedown JS guard
   that actually prevents focus. */
.custom_file_note_text[data-from_history="1"] {
    cursor: pointer;
    caret-color: transparent;
}
.single_page_right_side {
    padding-right: 200px;
    padding-left: 5px;
}

/* General (except homepage) Status Switch:*/
.active_switch {
    position: relative;
    display: inline-block;
    width: 70px;
    height: 20px;
    margin: 0 auto;
}

.active_switch input {
    display: none;
}

.active_slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: grey;
    transition: .4s;
    border-radius: 34px;
    box-shadow: inset 0 5px 4px rgba(0, 0, 0, 13);
}



.active_slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 66px;
    left: 2px;
    bottom: 2px;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 34px;
}

.active_slider:after {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
    box-shadow: 0 2px 5px black;
}

input:checked+.active_slider:before {
    background-color: cornflowerblue;
}

input:checked+.active_slider:after {
    transform: translateX(50px);
}

/* show hide switch button:*/
.show_hide_switch {
    position: relative;
    display: inline-block;
    width: 70px;
    height: 20px;
    margin: 0 auto;

}

.show_hide_slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: grey;
    transition: .4s;
    border-radius: 34px;
    box-shadow: inset 0 5px 4px rgba(0, 0, 0, 13);
}

.show_hide_switch input {
    display: none;
}

.show_hide_slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 66px;
    left: 2px;
    bottom: 2px;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 34px;
}

.show_hide_slider:after {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
    box-shadow: 0 2px 5px black;
}

input:checked+.show_hide_slider:before {
    background-color: #ff278c;
}

input:checked+.show_hide_slider:after {
    transform: translateX(50px);
}

.table_title_col {
    font-size: 0.75rem !important;
}

.table_title_col div {
    float: left;
}

.editable_area_wrapper.textareaincluded {
    height: 50px;
}

.editable_wrapper_td {
    height: 50px;
    padding: 8px 12px 8px 12px !important;
}

.detail_wrap_selectbox {
    /* border: 1px solid black; */
    text-align: center;
    padding: 5px 0 5px 0;
}

/*below title detail and edit column classes are coming from download_individual_product_detail for
individual_product_details.php table for product details next to product image columns*/
.title_column {
    width: 20%;
}

.detail_column {
    width: 65%;
}

.edit_column {
    width: 15%;
}

/*=====================================================*/
#image_side {
    padding: 20px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.detail_page_main_img_lbl {
    height: 50vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product_detail_select {
    /*4 selectboxes in individual_product_detail page*/
    /* margin: 0 auto; */
    width: 80%;
}

.individual_scroll {
    height: calc(100vh - var(--home_page_lg_side_panel) - var(--display_info_section));
    overflow-y: auto;
    overflow-x: hidden;
}

@media screen and (max-width: 991px) {
    .individual_scroll {
        height: auto;
    }
     .single_page_right_side {
        padding-right: 15px;
        padding-left: 15px;
    }
}

@media screen and (max-width: 768px) {
    #image_side {
        /*public_model.php image side (left of the page)*/
        padding: 10px !important;
    }
}
.hr_display_all {
    margin-left: 0;
    margin-right: 0;
    border: 0;
    display: block;
    width: 96%;
    background-color: var(--ezinq_theme_color);
    min-height: 1px;
}

.wb-findinorders-type-badge {
    position: absolute;
    bottom: 2px;
    left: 2px;
    line-height: 0;
}
/*
    Navigation: find_in_orders_filter_modal (Step 2 markup) → layout
    Purpose: lays out the filter fields inside the modal body as a 2-column grid
    (date pickers and company filters pair horizontally), radio sets stack as
    distinct rows via .filter_radio_set, matching the old drawer's grouping logic
    but scoped to this modal so it can't collide with other modals' .form-group
    or .modal-footer rules.
*/
#find_in_orders_filter_modal .modal-body#find_in_orders_filter_modal_body,
#find_in_orders_filter_modal #find_in_orders_filter_modal_body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    width: 100%;
}

/*
    Navigation: find_in_orders_filter_modal → #radio_sets_row (revised)
    Purpose: three radio groups (total/criteria/squence) sit in one row, each
    vertically centered and evenly spaced, separated by a thin vertical divider
    instead of asymmetric first/last padding overrides — divider applies to every
    group after the first via adjacent-sibling selector, so adding/removing a
    group later needs no first-child/last-child bookkeeping.
*/
#find_in_orders_filter_modal #radio_sets_row {
    grid-column: 1 / -1;
    display: flex;
    align-items: stretch;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    padding: 14px 0;
}

#find_in_orders_filter_modal #radio_sets_row .filter_radio_set {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
}

#find_in_orders_filter_modal #radio_sets_row .filter_radio_set + .filter_radio_set {
    border-left: 1px solid #dcdcdc;
}

/*
    Navigation: find_in_orders_filter_modal → modal-footer layout
    Purpose: footer now holds two buttons (Search + Close) instead of the default
    single dismiss button — spaces them apart instead of Bootstrap's default
    right-aligned stacking, so Search reads as the primary action.
*/
#find_in_orders_filter_modal .modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#find_in_orders_filter_modal #select_go_div {
    margin: 0;
}
.p_r_10 {
    padding-right: 10px;
}

#inquiry_details_history {
    display: inline-block;
    overflow-x: hidden;
    white-space: nowrap;
    padding: 5px;
    box-sizing: border-box;
}

.price_info_btn,
.past_detail_btn {
    position: absolute;
    top: -5px;
    right: -10px;
    margin: 0 auto;
    color: var(--icon_colors);
    text-align: center;
    text-decoration: none;
    background-color: transparent;
    transition: 0.3s;
    border:none;
}

.price_info_btn:hover,
.past_detail_btn:hover {
    text-decoration: none;
    color: var(--icon_hover);
}

.price_info_btn:focus,
.past_detail_btn:focus {
    outline: none !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Notification badge on past_detail_btn — chat history indicator */
.past_detail_btn::before,
.past_detail_btn::after {
    color: red;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.past_detail_btn::before {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8rem;
    font-weight: normal;
    position: absolute;
    left: 0;
    top: 5px;
    /* padding: 0 5px 3px 3px; */
    border-radius: 50%;
    background: transparent;
    opacity: 0;
    content: attr(data-count);
    transform: scale(0.5);
    transform-origin: bottom center;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.past_detail_btn.notify::before {
    animation: ring 1.5s ease;
}

.past_detail_btn.show-count::before {
    transform: scale(1);
    opacity: 1;
}

/* end of past detail button */
.btw_modal_title_content {
    margin-left: auto;
    outline: none !important;
    cursor: pointer;
    padding: 0 10px;
    font-size: 14px;
    overflow-x: hidden;
    white-space: nowrap;
}

input.qty_text,
input.target_prc_text::-webkit-input-placeholder {
    font-size: 12px;
    font-weight: bold;
    color: black;

}

input.qty_text,
input.target_prc_text::-moz-placeholder {
    font-size: 12px;
    font-weight: bold;
    color: black;
}

input.qty_text,
input.target_prc_text::-ms-input-placeholder {
    font-size: 12px;
    font-weight: bold;
    color: black;
}

input.qty_text,
input.target_prc_text:-moz-placeholder {
    font-size: 12px;
    font-weight: bold;
    color: black;
}

input.qty_text::-webkit-input-placeholder {
    font-size: 12px;
    font-weight: bold;
    color: black;
}

input.qty_text::-moz-placeholder {
    font-size: 12px;
    font-weight: bold;
    color: black;
}

input.qty_text::-ms-input-placeholder {
    font-size: 12px;
    font-weight: bold;
    color: black;
}

input.qty_text:-moz-placeholder {
    font-size: 12px;
    font-weight: bold;
    color: black;
}

input.qty_text,
input.target_prc_text {
    font-size: 12px;
}

.changed_item {
    color: white!important;
    background-color: red;
    position: relative;
    cursor: pointer;
    user-select: none;
    /* standard syntax */
    -webkit-user-select: none;
    /* webkit (safari, chrome) browsers */
    -moz-user-select: none;
    /* mozilla browsers */
    -ms-user-select: none;
    /* IE10+ */
    border-radius: 20px;

}

.changed_item>div {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-self: center;

}

.table_note_wrapper_td {
    position: relative;
    vertical-align: middle;
}
.table_note_wrapper_td .chat_img_wrapper_anchor {
    display: block!important;
    width: 100%!important;
}

.table_note_wrapper_td .chat_img_wrapper_anchor .inquiry_note_img {
    width: 100%;
    height: auto;
    object-fit: contain;
}
.note_div::-webkit-scrollbar {
    display: none;
}

.inquiry_note_img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}
.table_note_wrapper_td .inquiry_note_img {
    padding-left: 0;
    padding-right: 0;
}
textarea.note_div::-webkit-scrollbar {
    display: none;
}

textarea.note_div {
    -ms-overflow-style: none;
    scrollbar-width: none;
    resize: none;
    color: black;
    font-weight: bold;
    text-align: center;
    border-radius: 2px !important;
    overflow: auto !important;
    height: 100px !important;
}

.remarks_div::-webkit-scrollbar {
    display: none;
}

.display_short_colspan {
    display: none;
}

.modal_image {
    width: 13%;
}

.modal_info {
    width: 9%;
}

/*below #display_deleted_item_modal is coming from fetch_process_extra.php for received
and sent_inquiries.php pages to show deleted items and classes under them for width of
columns*****************************************************************************/
#display_deleted_item_modal .modal_checkbox {
    width: 4%;
}

#display_deleted_item_modal .modal_image {
    width: 12%;
}

#display_deleted_item_modal .modal_info {
    width: 12%;
}

/*========used in sent and received inquiries===========*/
/* New item notifications on the inquiry files (for other party and own added with different icons and colors 20250816*/
/* Replace background color with icon for own new items */
.marking_color {
    background-color: transparent !important;
    position: relative;
}

.marking_color::before {
    content: "";
    width: 14px;
    height: 14px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 384 512%27%3E%3Cpath fill=%27%232196F3%27 d=%27M16 512c-8.8 0-16-7.2-16-16s7.2-16 16-16H32l0-44.7c0-31.6 10.4-62.4 29.6-87.5L131.9 256 61.6 164.1C42.4 139 32 108.3 32 76.7V32H16C7.2 32 0 24.8 0 16S7.2 0 16 0H368c8.8 0 16 7.2 16 16s-7.2 16-16 16H352V76.7c0 31.6-10.4 62.4-29.6 87.5L252.1 256l70.2 91.9C341.6 373 352 403.7 352 435.3V480h16c8.8 0 16 7.2 16 16s-7.2 16-16 16H16zm304-32V435.3c0-24.6-8.1-48.5-23-68L219.3 265.7c-4.4-5.7-4.4-13.7 0-19.4L297 144.7c14.9-19.5 23-43.4 23-68V32H64l0 44.7c0 24.6 8.1 48.5 23 68l77.7 101.6c4.4 5.7 4.4 13.7 0 19.4L87 367.3c-14.9 19.5-23 43.4-23 68L64 480H320zM192 208c-4.9 0-9.5-2.2-12.5-6l-64-80c-3.8-4.8-4.6-11.4-1.9-16.9s8.3-9.1 14.4-9.1h64 64c6.2 0 11.8 3.5 14.4 9.1s1.9 12.1-1.9 16.9l-64 80c-3 3.8-7.6 6-12.5 6zm-30.7-80L192 166.4 222.7 128H192 161.3zM144 352h96c6.1 0 11.6 3.4 14.3 8.8l32 64c2.5 5 2.2 10.9-.7 15.6s-8.1 7.6-13.6 7.6H192 112c-5.5 0-10.7-2.9-13.6-7.6s-3.2-10.6-.7-15.6l32-64c2.7-5.4 8.3-8.8 14.3-8.8zm-6.1 64H192h54.1l-16-32H153.9l-16 32z%27/%3E%3C/svg%3E");
    position: absolute;
    top: 2px;
    right: 5px;
    transform: none;
    animation: fadeInSlow 0.8s ease-in;
    z-index: -1;
}

/*===========================================*/
/*supplier new added item*/
/* Replace background color with icon for other party new items */
.new_item {
    background-color: transparent !important;
    position: relative;
}

.new_item::before {
    content: "";
    width: 14px;
    height: 14px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 448 512%27%3E%3Cpath fill=%27%233b5998%27 d=%27M64 64C46.3 64 32 78.3 32 96V416c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32H64zM0 96C0 60.7 28.7 32 64 32H384c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM208 352V272H128c-8.8 0-16-7.2-16-16s7.2-16 16-16h80V160c0-8.8 7.2-16 16-16s16 7.2 16 16v80h80c8.8 0 16 7.2 16 16s-7.2 16-16 16H240v80c0 8.8-7.2 16-16 16s-16-7.2-16-16z%27/%3E%3C/svg%3E");
    position: absolute;
    top: 2px;
    right: 5px;
    transform: none;
    animation: fadeInSlow 0.8s ease-in;
}

/*==================================*/
/*below .history_result_title class is for many pages modal window which is opened by clicking price_detail_btn
 on the button with text history*/
.history_result_title {
    font-size: 16px;
    color: var(--ezinq_theme_color);
}

/*=============================*/
/* Subtle fade animation */
@keyframes fadeInSlow {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/*=======================================*/
/*==========START OF BTW USERS (COLLEAGUES) MESSAGE STYLING=============*/
.btw_users_dropdown_ul {
    list-style-type: none;
    padding: 5px;
    margin: 0;
}

.btw_users_anchor {
    text-decoration: none;
    color: var(--icon_colors);
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translatex(-50%);
    margin: 0 auto;
    min-width: 30%;
    font: normal 1rem sans-serif;
    height: 15px;
    transition: 0.3s;

}

.btw_users_anchor:hover {
    text-decoration: none;
    color: var(--icon_hover);
    /* font-size: 1.2rem; */
}

.btw_users_dropdown_ul li {
    display: block;
}

.btw_users_dropdown_ul li:hover {
    background-color: var(--tr_focused_color);
    cursor: pointer;
}

.btw_users_dropdown_ul a {
    color: black;
    /*display:flex;!*this is for centeralize the icomoon icon next to text*!*/
    /*align-items: center;*/
    display: block;
    padding: 10px;
    font-size: 14px;
    text-decoration: none;
}

.btw_msg_num {
    display: block;
    float: right;
}

.anchor_msg {
    font: normal 1rem sans-serif;
    color: white;
}

.btw_users_anchor::before,
.btw_users_anchor::after {
    color: var(--icon_colors);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.btw_users_anchor::before {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8rem;
    position: absolute;
    font-weight: bold;
    bottom: -13px;
    /*right: 0;*/
    padding: 0 5px 3px 3px;
    /*line-height: 10%;*/
    /*border: 2px black solid;*/
    border-radius: 20%;
    background: transparent;
    opacity: 0;
    content: attr(data-count);
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    transition: transform, opacity;
    transform-origin: bottom center;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}

.btw_users_anchor.notify::before {
    -webkit-animation: ring 1.5s ease;
    animation: ring 1.5s ease;
}

.btw_users_anchor.show-count::before {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

/*==========END OF BTW USERS (COLLEAGUES) MESSAGE STYLING=============*/
@media screen and (max-width: 991px) {
    .past_detail_btn::after {
        font-size: 0.8em;
        font-weight: 200;
        top: -2px;
        right: -7px;
    }

    .modal_image {
        width: 20%;
    }

    .modal_info {
        width: 22%;
    }

    .display_short_colspan {
        display: table-row !important;
    }
}

@media screen and (max-width: 768px) {
    .btw_modal_title_content {
        font-size: 12px;
    }

    /*note area in inquiry files. so its font-size resize according to other fields (product normal fields which are using portioned_tbody to resize and input fields like qty target_price and price and currency using .qty_div,.target_price_div etc.)*/
    .note_div {
        height: 60px;
        max-height: 60px;
        font-size: 0.67 rem !important;
    }

    .table_note_wrapper_td {
        min-height: 100px;
    }

    .sub_user_enter_info,
    .price_info_btn {
        min-width: 50%;
    }

    .qty_text,
    .target_prc_text {
        color: black;
        font-weight: bold;
        text-align: left;
        padding: 0;

    }
}

.tr_line_marker {
    /*used to mark some specific trs for emphasising for the user*/
    background-color: #e3f2fd;
    color: black;
    transition: all 0.2s ease;
}

.tr_line_marker:hover {
    background-color: #bbdefb;
}

.top_middle_search_inner.modal_vertical_middle {
    /*without any padding to vertically centerized*/
    text-align: center;
    padding: 10px 5px 5px 10px;
}

.con_list_view_col {
    width: var(--con_list_view_col_lg);
}

.con_list_view_stretched_col {
    width: var(--con_list_view_stretched_col_lg);
}

.con_tbl_col {
    width: var(--con_other_col_lg) !important;
}

.con_visual_col {
    width: var(--con_visual_col_lg) !important;
}

.pack_checkbox_col {
    width: var(--pack_checkbox_col_lg) !important;
}

.pack_img_col {
    width: var(--pack_img_col_lg) !important;
}

.pack_other_col {
    width: var(--pack_other_col_lg) !important;
}

.pack_other_stretched_col {
    width: var(--pack_stretched_col_lg) !important;
}

/*==================================*/
.thead_styled_div.single_title {
    color: #555;
    font-weight: normal;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: #eef0f2;
    border-top: 1px solid #dcdfe3;
    border-bottom: 1px solid #dcdfe3;
}

.remove_modal {
    z-index: 12006;
}

/* Excel-style compact packing list */
.portioned_tbody.excel-compact td {
    padding: 0 !important;
}

/* Excel-style compact packing list 2*/
.portioned_tbody.excel-compact td input,
.portioned_tbody.excel-compact td select,
.portioned_tbody.excel-compact td textarea {
    width: 100%;
    border-radius: 2px;
    padding: 0.25rem 0.35rem;
    font-size: 13px !important;
}

.portioned_tbody.excel-compact td div:not(.progress):not(.haspadding) {
    font-size: 12px !important;
}

/*====================================*/
.pack_error_modal_sections {
    display: none;
}

/* Image wrapper container */
.account_img_td .file_image_wrapper {
    padding: 0.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
    /* Fixed height for consistency */
}

/* Keep your existing image styling but make it fixed size */
.account_img_td img {
    width: 80px !important;
    /* Fixed width - no more resizing */
    height: auto;
    /* Maintain aspect ratio */
    max-height: 80px;
    /* Prevent tall images from breaking layout */
    border-radius: 5px;
    object-fit: contain;
    /* Ensures image fits without distortion */
}

/* Button wrapper */
.account_img_td .file_action_wrapper {
    padding: 0.2rem;
    text-align: center;
}

.pack_box_row_tr:hover td {
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
}

.pack_outer_wrapper_tr:hover td {
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
}

/*to override jquery sortable when drag and drop*/
.ui-sortable-helper {
    display: table;
}

/*=============================*/
.zero_height {
    height: 0;
    padding: 0 !important;
    border-top: 0;
    overflow: hidden;
    line-height: 0;
    font-size: 0;
    border: none !important;
    border-width: 0 !important;
    outline: none !important;
    border: hidden !important;
    border-color: white !important;
}

.add_box_packed,
.add_box_total_qty,
.add_box_occurance {
    width: 8%;
}

.box_section_btn,
.pack_list_comp_btn {
    border: none;
    outline: none;
}

/*====================*/
.include_multi_sec_body {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.first-column {
    background: white;
    box-sizing: border-box;
    overflow: auto;
    align-self: stretch;
    min-height: 0;
    width: 45%;
    text-align: center;
}

.second-column {
    display: block;
    /*this is because in small screen for load container page this column is set to display:none*/
    align-self: stretch;
    min-height: 0;
    width: 45% !important;
    overflow: auto;
    text-align: center;
    padding-right: 10px;
}

.second-column.fill_box_table {
    width: 60% !important;
}

.first-column.container_side {
    width: 50% !important;
}

.second-column.table_side {
    width: 50% !important;
}

.display_box_section {
    text-align: center;
    box-shadow: 0 0 0 var(--ezinq_theme_color), 0 0 0 var(--ezinq_theme_color) !important;

}

.display_box_section:hover {
    color: #FFFFFF;
    background-color: var(--ezinq_theme_color) !important;

}

/* Packing add item modal box section toggle buttons */
#pack_add_item_modal .display_box_section {
    font-size: 12px;
    font-weight: normal;
    border-radius: 6px;
    border: 1px solid var(--light_border_grey);
    background-color: var(--lightest_background_gray);
    color: var(--fill_color_gray);
    padding: 4px 8px;
}

#pack_add_item_modal .display_box_section.active_box_section_btn {
    background-color: var(--ezinq_theme_color);
    color: white;
    font-weight: 500;
    border-color: var(--ezinq_theme_color);
    box-shadow: none !important;
}

#pack_add_item_modal .display_box_section:hover:not(.active_box_section_btn) {
    background-color: var(--button_hover_color);
    color: white;
}

.label_row_wrapper {
    padding: 0;
    height: 100%;
    font-size: 8px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
}

.label_row_wrapper div {
    align-self: flex-start;
}

.label_row_wrapper label {
    display: inline-block;
    margin: 0;
}

/* Fixed: previous rule targeted .icon-plus, a legacy icon-font class no longer
   used anywhere — these links now render real SVG sprites, so that selector
   never matched anything. Hover now targets the anchor + its svg directly. */
.pl_add_new_box:hover,
.box_add_new_item:hover {
    color: #ffd700 !important;
    text-decoration: none !important;
}

.pl_add_new_box:hover svg,
.box_add_new_item:hover svg {
    fill: #ffd700 !important;
}

.small_table_header {
    height: 40px;
    width: 100%;
    color: white;
    font-size: 0.8rem;
}

.medium_table_header {
    height: 60px;
    width: 100%;
    color: white;
    font-size: 0.8rem;
}

.container_stuff_wrapper,
.move_division_wrapper_wrapper,
.add_single_division_wrapper_wrapper {

    width: 100%;
    padding-bottom: 42%;
    box-sizing: border-box;

    position: relative;

}

.container_stuff,
.move_division_wrapper_div,
.add_single_division_wrapper_div {
    background-image: url(8e6e2a7c776e49e869bd.png);
    background-size: 100% auto;
    background-repeat: repeat-y;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-wrap: wrap;
    /*justify-content: space-between;*/
    color: white;
    /*text-align:left;*/
    box-sizing: border-box;
    background-position: 50% 50%;
}

.container_division,
.move_item_modal_division,
.add_single_modal_division {
    width: 20%;
    height: 33.33%;
    box-sizing: border-box;
    padding: 3px;
}

.container_division {
    border: 1px solid #fc8604;
}

.move_item_modal_division,
.add_single_modal_division {
    position: relative;
}

input[name="move_div_radio"],
input[name="add_single_div_radio"] {
    /*move_item_modal window container division radio box (invisible)*/
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
    transition: all .3s linear;
}

.container_stuff_info {
    width: 100%;
    text-align: left;
}

.con_info_title_label {
    font-size: 14px;
    font-weight: bold;
}

.loaded_box {
    /*box that is either by dragging or selecting added to container in packing list page in container stuff*/
    float: left;
    border-radius: 2px;
    border: 1px solid white;
    /*text-align: left;*/
    cursor: pointer;
    /*overflow:auto;*/
    /* position:relative; */


}

.loaded_box_checkbox {
    /*checkbox behind the loaded box div to select either to move or remove*/
    position: absolute;
    top: 0;
    left: 0;
    /* right: 0;
    bottom: 0; */
    /*width:100%;*/
    /*height:100%;*/
    cursor: pointer;
    opacity: 0;
    transition: all .3s linear;
}

.image_wrapper_label {
    width: 100%;
    height: 100%;
    padding: 0 !important;
    display: block;
}

.image_wrapper_label:hover {
    cursor: grab;
}

.loaded_info_label {
    /*when we hover on boxes loaded on container,tooltip shows info included in these labels*/
    display: block;
    font-size: 12px;
}

.item_img_div {
    padding: 0 !important;
}

/*============================*/
/*below transfer_th classes are for account page transfer table th*/
.transfer_th_checkbox {
    width: 3%;
}

.transfer_th_sent {
    width: 14%;
}

.transfer_th_received {
    width: 14%;
}

.transfer_th_info {
    width: 24%;
}

.transfer_th_rate {
    width: 10%;
}

.transfer_th_exc {
    width: 15%;
}

.transfer_th_date {
    width: 10%;
}

.transfer_th_doc {
    width: 120px;
    min-width: 120px;
    /* width: 6%; */
}

/*============================*/
/*below are payment detail table classes for account page*/
.payment_detail_th_checkbox {
    width: 5%;
}

.payment_detail_th_company {
    width: 22%;
}

.payment_detail_th_amount {
    width: 20%;
}

.payment_detail_th_info {
    width: 27%;
}

.payment_detail_th_date {
    width: 20%;
}

.payment_detail_th_file {
    width: 120px;
    min-width: 120px;
}

/*end of payment detail table in account section*/
/*===========================*/
/*below are expense detail table classes for account page*/
.expense_detail_th_checkbox {
    width: 5%;
}

.expense_detail_th_title {
    width: 22%;
}

.expense_detail_th_amount {
    width: 20%;
}

.expense_detail_th_info {
    width: 23%;
}

.expense_detail_th_date {
    width: 10%;
}

.expense_detail_th_addedby {
    width: 15%;
}

.expense_detail_th_file {
    width: 120px;
    min-width: 120px;
}

/*===========================*/
.display_small_size {
    /*first time used in packing page load container modal window btn which is hidden in big screen and visible in small.*/
    display: none;
}

.th_lower_z {
    /*used in scrolling nested tables*/
    z-index: 20;
}

.box_table,
.pack_list_inner_tbl {
    margin-bottom: 0;
}

.error_display_middle {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
}

.budget_total_tr {
    font-weight: bold;
}

/* Navigation: #pack_file_tab_row → tab-strip replacement for #pack_company_select
   Purpose: shown only while Packing (or later, Container List) is active, in the
   same visual slot as #top_button_section's user-created file tabs. Distinct
   background signals "different kind of tab strip" — these only scroll to an
   already-rendered section, they don't fetch/switch content like real file tabs. */
.pack_con_file_tab_row {
    display: flex;
    /* Changed: was wrap — tabs now overflow into a "More" dropdown instead of
       wrapping to a second line. See PackingManager._layoutFileTabRow(). */
    flex-wrap: nowrap;
    /* Changed: was center — flexbox ignores container padding on the overflowing
       side(s) when justify-content isn't flex-start (browser quirk), which is
       exactly what caused the edge-touching look once overflow triggered. */
    justify-content: flex-start;
    gap: 6px;
    padding: 8px 12px;
    background: #f4ede0;
    border-radius: 4px;
}

.pack_file_tab_row_empty {
    color: #999;
    font-size: 12px;
    font-style: italic;
    text-align: center;
    width: 100%;
}

.pack_con_file_tab_row .pack_file_tab {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 2px;
    padding: 5px 15px;
    font-size: 14px;
    color: #444;
    transition: background-color 0.2s ease, color 0.2s ease;
    /* Prevents flexbox from shrinking tabs to fit — our JS decides what overflows
       into "More", not the browser's default flex-shrink behavior. */
    flex: 0 0 auto;
}

.pack_con_file_tab_row .pack_file_tab:hover {
    background-color: #e4d5bd;
    color: #1f1a12;
}

/* ================================================================
   PACK/CONTAINER TAB OVERFLOW — "MORE" DROPDOWN
   Shared by #pack_file_tab_row and #con_file_tab_row (both can exist
   in the DOM at once — only one visible per _updateFileContextRow()).
   Same visual language as workbench's #cf_tabs_more_* — classes here
   instead of ids since two independent instances share these rules.
   ================================================================ */
.pcf_tabs_more_wrapper {
    flex: 0 0 auto;
}

.pcf_tabs_more_toggle {
    white-space: nowrap;
}

.pcf_tabs_more_menu {
    min-width: 180px;
    overflow-y: auto;
    padding: 4px;
    /* max-height set dynamically in JS on show.bs.dropdown, same pattern as
       workbench's #cf_tabs_more_menu — real measured space, not a CSS guess. */
}

.pcf_tabs_more_menu>li {
    padding: 0;
    margin: 0;
    list-style: none;
}

.pcf_tabs_more_menu .pack_file_tab {
    display: flex;
    align-items: center;
    width: 100% !important;
    max-width: none !important;
    margin: 0;
    text-align: left;
    border-radius: 4px;
}

/* Navigation: .pcf_tabs_more_menu li:hover override
   Purpose: .public_dropdown_ul li:hover (common_styles.css) paints the ezinq theme
   color as background on the <li> itself — since the button sits on top with
   background:transparent (its own resting style), that theme color shows straight
   through on hover instead of the button's own hover style. These tabs are a
   "scroll to" jump list, not a themed action menu, so they keep their own visible-row
   hover style (see .pack_con_file_tab_row .pack_file_tab:hover) instead. */
.pcf_tabs_more_menu li:hover {
    background-color: transparent !important;
}

.pcf_tabs_more_menu li:hover .pack_file_tab {
    background-color: #e4d5bd;
    color: #1f1a12;
}

@media screen and (max-width: 991px) {

    .first-column.container_side {
        width: 100% !important;
    }

    .second-column.table_side {
        display: none !important;
    }

    /*below transfer_th classes are for account page transfer table th*/
    .transfer_th_rate {
        width: 18%;
    }

    .transfer_th_exc {
        width: 24%;
    }

    .transfer_th_doc {
        width: 100px;
        min-width: 100px;
        /* width: 20%; */
    }

    /*end of transfer table in account section*/
    /*==============================*/
    /*below are payment detail table classes for account page*/
    .payment_detail_th_checkbox {
        width: 10%;
    }

    .payment_detail_th_company {
        width: 15%;
    }

    .payment_detail_th_amount {
        width: 15%;
    }

    .payment_detail_th_info {
        width: 20%;
    }

    .payment_detail_th_date {
        width: 20%;
    }

    .payment_detail_th_file {
        width: 100px;
        min-width: 100px;
        /* width: 20%; */
    }

    /*end of payment detail table in account section*/
    /*below are expense detail table classes for account page*/
    .expense_detail_th_checkbox {
        width: 15%;
    }

    .expense_detail_th_title {
        width: 35%;
    }

    .expense_detail_th_amount {
        width: 30%;
    }

    .expense_detail_th_file {
        width: 100px;
        min-width: 100px;
        /* width: 20%; */
    }

    /*================================*/
    .con_list_view_col {
        width: var(--con_list_view_col_sm);
    }

    .con_list_view_stretched_col {
        width: var(--con_list_view_stretched_col_sm);
    }

    .pack_img_col {
        width: var(--pack_img_col_sm) !important;
    }

    .pack_other_col {
        width: var(--pack_other_col_sm) !important;
    }

    .pack_other_stretched_col {
        width: var(--pack_stretched_col_sm) !important;
    }

}

@media screen and (max-width: 768px) {
    .con_info_title_label {
        font-size: 12px;
    }
}

/* ============================================================
   Packing Share Modal (#share_packing_modal)
   Admin-side "generate link per supplier tab" modal — styled to match
   existing app modal/button conventions, not the guest-page kraft theme.
   ============================================================ */

.share-packing-tab-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--public_border);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
    background: var(--background_color_div_light);
}

.share-packing-tab-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.share-packing-tab-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--top_title_darkest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.share-packing-badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    width: fit-content;
}

.share-packing-badge-none {
    background: var(--dark_content_bck);
    color: var(--text_muted_color);
}

.share-packing-badge-active {
    background: rgba(40, 167, 69, 0.12);
    color: var(--purpose-purchase);
}

.share-packing-badge-inactive {
    background: rgba(220, 53, 69, 0.1);
    color: var(--purpose-sale);
}

.share-packing-tab-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
}

.share-packing-tab-actions button,
.share-packing-tab-row>button {
    flex: none;
    white-space: nowrap;
}

/* Icon-only buttons (copy / QR) inside the actions cluster — square, compact */
.share-packing-tab-actions .share-packing-copy-btn,
.share-packing-tab-actions .share-packing-qr-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Responsive: stack info above actions on narrow viewports rather than
   letting the row squeeze horizontally */
@media (max-width: 480px) {
    .share-packing-tab-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .share-packing-tab-actions,
    .share-packing-tab-row>button {
        align-self: flex-end;
    }
}

/* ================================================================
   Footer layout fix — see pack_add_box_modal_footer edit
   ================================================================ */
/* pack_add_box_modal footer — aux button needs its own space, not full-width,
   so it doesn't push the box-qty input into a collapsed sliver. */
.pack_add_box_modal_footer {
    flex-wrap: wrap;
}

.pack_add_item_modal_footer {
    justify-content: flex-end;
    align-items: center;
}

.pack_aux_add_btn_wrapper {
    flex: 0 0 auto;
    margin-right: auto;
}

.pack_box_qty_input_group {
    width: 220px !important;
    flex: 0 0 auto;
}

/* "NEW" badge for inline-created auxiliary items — used by the existing-box
   modal's table-row picker (_renderExistingBoxAuxiliaryPicker()), not tiles.
   Plain inline badge, no absolute positioning, since a <td> has no positioned
   ancestor context. */
.pack_aux_row_new_badge {
    display: inline-block;
    font-size: 8px;
    font-weight: 700;
    color: #fff;
    background-color: #B7833A;
    padding: 2px 5px;
    border-radius: 3px;
    letter-spacing: 0.04em;
}



/* ================================================================
   Admin packing list table — auxiliary item rows (getBox() output)
   ================================================================ */
.pack_aux_item_row {
    background-color: #FCF3E3;
}

.pack_aux_item_row:hover {
    background-color: #FBE8C8;
}

/*new box adding relevant css 20260818*/

/* ================================================================
   UNIFIED PICKER ROWS — new-box / add-item modals (replaces the old
   drag/drop two-column layout). Shared between both modals: rows for
   real products, auxiliary items (reusing the amber tint already
   defined on .pack_aux_item_row), the "add new auxiliary item" entry
   row, and the "how many of each" qty section that appears below for
   whatever is currently selected.
   ================================================================ */

.pack_picker_modal_body {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.pack_picker_search {
    position: sticky;
    top: 0;
    z-index: 5;
    margin-bottom: 8px;
}

.pack_picker_list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
}

.pack_picker_row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 6px;
    border: 1px solid var(--light_border_grey);
    background-color: var(--lightest_background_gray);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pack_picker_row:hover {
    border-color: var(--ezinq_theme_color);
}

.pack_picker_row.selected {
    border-color: var(--ezinq_theme_color);
    background-color: rgba(0, 0, 0, 0.03);
}

.pack_picker_check {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1.5px solid var(--light_border_grey);
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-sizing: border-box;
}

.pack_picker_row.selected .pack_picker_check {
    background-color: var(--ezinq_theme_color);
    border-color: var(--ezinq_theme_color);
}

.pack_picker_check svg {
    width: 10px;
    height: 10px;
    display: block;
}

.pack_picker_check svg path,
.pack_picker_check svg polyline {
    stroke-width: 3;
}

.pack_picker_thumb_link {
    flex: 0 0 auto;
    display: block;
}

.pack_picker_thumb_link .image_wrapper,
.pack_picker_thumb_link .no_gal_image {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    overflow: hidden;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pack_picker_thumb_link .image_wrapper img,
.pack_picker_thumb_link .no_gal_image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* .pack_picker_thumb stays defined for every OTHER use (aux rows, qty-section
   rows, box selector rows/preview) — only the real-product picker row swapped
   to the lightbox-wrapped .pack_picker_thumb_link above. */
.pack_picker_thumb {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    overflow: hidden;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pack_picker_thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pack_picker_info {
    flex: 1;
    min-width: 0;
}

.pack_picker_name {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pack_picker_model {
    font-size: 11px;
    color: var(--fill_color_gray);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pack_picker_remaining {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--fill_color_gray);
    text-align: right;
}

.pack_picker_secondary {
    font-size: 10.5px;
    color: var(--fill_color_gray);
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.pack_picker_row.sold_out {
    opacity: 0.55;
    cursor: not-allowed;
}

.pack_picker_row.sold_out:hover {
    border-color: var(--light_border_grey);
}

.pack_picker_row.aux_row {
    background-color: #FCF3E3;
    border-color: #E9D3A3;
}

.pack_picker_row.aux_row.selected {
    background-color: #FBE8C8;
    border-color: #B7833A;
}

.pack_picker_row.aux_row .pack_picker_thumb {
    background-color: #F4DBA6;
    color: #B7833A;
}

.pack_picker_row.aux_row.selected .pack_picker_check {
    background-color: #B7833A;
    border-color: #B7833A;
}

.pack_picker_row.aux_row .pack_picker_name {
    color: #6B4E1E;
}

.pack_picker_row.aux_row .pack_picker_model,
.pack_picker_row.aux_row .pack_picker_remaining {
    color: #9C7A3C;
}

.pack_picker_divider {
    border-top: 1px dashed var(--light_border_grey);
    margin: 4px 0 2px;
}

.pack_picker_add_aux_row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    color: #B7833A;
    font-size: 13px;
    cursor: pointer;
}

.pack_picker_add_aux_row:hover {
    color: #6B4E1E;
}

.pack_picker_add_aux_row svg {
    width: 14px;
    height: 14px;
}

.pack_qty_section_label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fill_color_gray);
    font-weight: 600;
    padding: 8px 2px 4px;
    border-top: 1px solid var(--light_border_grey);
    margin-top: 6px;
}

.pack_qty_row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    background-color: var(--lightest_background_gray);
    margin-bottom: 6px;
}

.pack_qty_row .pack_picker_thumb {
    width: 36px;
    height: 36px;
}

.pack_qty_row .pack_picker_info {
    flex: 1;
    min-width: 0;
}

.pack_qty_stepper {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
    background-color: #fff;
    border: 1px solid var(--light_border_grey);
    border-radius: 6px;
    padding: 2px;
}

.pack_qty_stepper button {
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    font-size: 14px;
    color: var(--fill_color_gray);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.pack_qty_stepper button:hover {
    color: var(--ezinq_theme_color);
}

.pack_qty_stepper input {
    width: 36px;
    text-align: center;
    border: none;
    background: transparent;
    padding: 0;
    font-size: 13px;
}

.new_box_aux_qty_remove,
.existing_aux_qty_remove {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fill_color_gray);
    cursor: pointer;
}

.new_box_aux_qty_remove svg,
.existing_aux_qty_remove svg {
    width: 12px;
    height: 12px;
}

.new_box_aux_qty_remove:hover,
.existing_aux_qty_remove:hover {
    background-color: rgba(0, 0, 0, 0.06);
    color: #C0392B;
}

.pack_picker_empty_msg {
    text-align: center;
    padding: 24px 12px;
    color: var(--fill_color_gray);
    font-size: 13px;
}

/* ================================================================
   EXISTING-BOX SELECTOR — radio-select box list + collapsible content
   preview, replaces the old single/all toggle in #pack_add_item_modal.
   ================================================================ */

.pack_box_selector_label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fill_color_gray);
    font-weight: 600;
    margin-bottom: 6px;
}

.pack_box_selector_list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 180px;
    overflow-y: auto;
    margin-bottom: 10px;
}

.pack_box_select_row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--light_border_grey);
    background-color: var(--lightest_background_gray);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pack_box_select_row:hover {
    border-color: var(--ezinq_theme_color);
}

.pack_box_select_row.selected {
    border-color: var(--ezinq_theme_color);
    background-color: rgba(0, 0, 0, 0.03);
}

.pack_box_select_radio {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--light_border_grey);
    box-sizing: border-box;
    position: relative;
}

.pack_box_select_row.selected .pack_box_select_radio {
    border-color: var(--ezinq_theme_color);
}

.pack_box_select_row.selected .pack_box_select_radio::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--ezinq_theme_color);
    transform: translate(-50%, -50%);
}

.pack_box_select_company {
    color: var(--fill_color_gray);
    font-weight: normal;
}

.pack_box_select_chevron {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: var(--fill_color_gray);
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.pack_box_select_chevron:hover {
    background-color: rgba(0, 0, 0, 0.06);
}

.pack_box_select_chevron svg {
    width: 12px;
    height: 12px;
}

.pack_box_select_chevron.open {
    transform: rotate(180deg);
}

.pack_box_select_preview {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 8px 8px 38px;
    border-left: 2px solid var(--light_border_grey);
    margin: -2px 0 4px 10px;
}

.pack_box_preview_item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.pack_box_preview_item .pack_picker_thumb {
    width: 26px;
    height: 26px;
}

.pack_box_preview_item .pack_picker_thumb.aux_thumb {
    background-color: #F4DBA6;
    color: #B7833A;
}

.pack_add_action_label {
    font-size: 11px;
    margin-left: 4px;
    white-space: nowrap;
}

/* Edit/delete icons inline after an auxiliary item's name — used by both the
   new-box and existing-box pickers via _auxRowActionsHtml(). Previously only
   existed in the guest-share stylesheet; needed here now that these icons
   render inside .pack_picker_row.aux_row too. */
.pack_aux_row_actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 6px;
    vertical-align: middle;
}

.pack_aux_row_edit_icon,
.pack_aux_row_delete_icon {
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fill_color_gray);
    cursor: pointer;
    padding: 0;
}

.pack_aux_row_edit_icon svg,
.pack_aux_row_delete_icon svg {
    width: 12px;
    height: 12px;
}

.pack_aux_row_edit_icon:hover {
    background-color: rgba(0, 0, 0, 0.06);
    color: var(--ezinq_theme_color);
}

.pack_aux_row_delete_icon:hover {
    background-color: rgba(0, 0, 0, 0.06);
    color: #C0392B;
}

/* Modal body sizing — now a single scrollable column (unified picker) instead
   of the old fixed-height two-column drag/drop layout. Applies to both the
   new-box modal now and the existing-box modal in the next task, since both
   share .pack_picker_modal_body. */
#pack_add_box_modal .pack_picker_modal_body,
#pack_add_item_modal .pack_picker_modal_body {
    max-height: 60vh;
    padding: 12px 16px;
}

#pack_add_box_modal .pack_picker_list,
#pack_add_item_modal .pack_picker_list {
    max-height: calc(60vh - 60px);
}

@media screen and (max-width: 768px) {

    #pack_add_box_modal .pack_picker_modal_body,
    #pack_add_item_modal .pack_picker_modal_body {
        max-height: 70vh;
    }

    #pack_add_box_modal .pack_picker_list,
    #pack_add_item_modal .pack_picker_list {
        max-height: calc(70vh - 60px);
    }
}

/* ===== Packing list — box card layout ===== */

.pl-file-wrapper {
    background: var(--background_color_div_light);
    border: 1px solid var(--light_border_grey);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 20px;
}

.pl-file-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 6px 6px 14px;
    border-bottom: 1px solid var(--light_border_grey);
    margin-bottom: 14px;
}

.pl-file-add-box a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ezinq_theme_color);
    color: #fff;
    padding: 5px 12px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
}

.pl-file-add-box a:hover {
    background: var(--background_color_common_hover);
    color: #fff;
}

.pl-file-totals {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
}

.pl-file-total-stat span {
    color: #fff;
    font-weight: 500;
}

.pl-file-boxes {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ---- Box card ---- */

.pl-box-wrapper {
    background: #ffffff;
    border: 1px solid var(--light_border_grey);
    border-radius: 12px;
    overflow: hidden;
}

.pl-box-summary-counts {
    font-size: 12px;
    color: var(--fill_color_gray);
    white-space: nowrap;
}

.pl-box-body {
    border-top: 1px solid var(--ultra_light_border_grey);
    padding: 14px 16px;
}

/* collapsed state — JS toggles this class on .pl-box-wrapper */
.pl-box-wrapper.pl-box-collapsed .pl-box-body {
    display: none;
}

/* ---- Section labels (Configuration / Products / Auxiliary items) ---- */

.pl-box-section-label {
    display: block;
    text-align: left;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--fill_color_gray);
    font-weight: 500;
    margin-bottom: 6px;
}

/* ---- Configuration ---- */

.pl-field-label {
    font-size: 11px;
    color: var(--fill_color_gray);
}

.pl-field-readonly {
    font-size: 13px;
    color: var(--top_title_darkest);
    padding-top: 4px;
}

/* ---- Auxiliary items ----
   Background/hover reuse .pack_aux_item_row (already applied as a second class
   in the markup) rather than redefining a new color here — same amber tint as
   the picker modals' aux rows, kept consistent app-wide. */

.pl-box-aux {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pl-aux-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 13px;
}

.pl-aux-badge {
    font-size: 11px;
    font-weight: 600;
    color: #B7833A;
    background: #fff;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

.pl-aux-name {
    flex: 1;
    color: #6B4E1E;
}

.pl-aux-model,
.pl-aux-related {
    color: #9C7A3C;
    font-size: 12px;
}

.pl-aux-qty {
    font-weight: 500;
    color: #6B4E1E;
    white-space: nowrap;
}

.pl-aux-row input.editable_pack_field {
    width: 56px;
    text-align: right;
}

/*pack file scroll adding css to the one which is in view */
.pack_con_file_tab_row .pack_file_tab.pl-tab-active {
    background-color: var(--ezinq_theme_color);
    color: #fff;
    border-color: var(--ezinq_theme_color);
}

/*calculation hint*/
.pack_qty_split_hint {
    font-size: 11px;
    color: var(--fill_color_gray);
    margin-top: 2px;
}

.pl-box-checkbox-wrap {
    margin-right: 2px;
}

/*fast scroll button on modal window for new box and editing existing box*/
.pack_scroll_to_selection_btn {
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: none;
    background: var(--ezinq_theme_color);
    color: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* .pack_picker_search itself is position:sticky with z-index:5 — button
       needs to sit above that stacking context, not just above its own
       parent, to avoid being visually overlapped by the search bar. */
    z-index: 6;
}

.pack_scroll_to_selection_btn:hover {
    background: var(--background_color_common_hover);
}

.pack_picker_search {
    position: relative;
}

/*existing box modal window boxes in the list ctn_no css*/
.pack_box_select_label {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--ezinq_theme_color);
    background: var(--section_color_light_blue);
    padding: 3px 8px;
    border-radius: 6px;
    margin-right: 4px;
    white-space: nowrap;
}

/*existing box new item addition qty is not evenly fitting into ctns css*/
.pack_qty_uneven_hint {
    color: #B7833A;
    display: flex;
    align-items: center;
    gap: 4px;
}

.pack_qty_uneven_hint svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}

/* ============================================================
   PACKING LIST — MOBILE CARD VIEW & SLIDE-UP EDIT SHEET
   ============================================================ */

.wb-packing-box-card-mobile-wrapper {
    margin-bottom: 8px;
}

.wb-packing-box-card-mobile {
    width: 100%;
    text-align: left;
    background: var(--section_color_light_blue);
    border: 1px solid var(--light_border_grey);
    border-radius: 12px 12px 0 0;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.wb-packing-box-card-mobile-wrapper:has(.wb-packing-box-card-mobile-expand:not(.expanded)) .wb-packing-box-card-mobile {
    border-radius: 12px;
}

.wb-packing-box-card-mobile-chevron {
    display: flex;
    align-items: center;
    transition: transform 0.2s ease;
}

.wb-packing-box-card-mobile-chevron.expanded {
    transform: rotate(90deg);
}

.wb-packing-box-card-mobile-expand {
    display: none;
    background: #fff;
    border: 1px solid var(--light_border_grey);
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 14px 12px;
}

.wb-packing-box-card-mobile-expand.expanded {
    display: block;
}

.wb-packing-box-card-mobile-body {
    flex: 1;
    min-width: 0;
}

.wb-packing-box-card-mobile-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--ezinq_theme_color);
}

.wb-packing-box-card-mobile-stats {
    font-size: 12px;
    color: var(--fill_color_gray);
    margin-top: 2px;
}

.wb-packing-box-card-mobile-counts {
    font-size: 11px;
    color: var(--fill_color_gray);
    margin-top: 4px;
}

.pack_qty_row_fields {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

.pack_qty_row_field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pack_qty_row_field .pl-field-label {
    font-size: 11px;
    color: var(--fill_color_gray);
    flex-shrink: 0;
}

.pack_qty_row_field input.editable_pack_field {
    width: 72px;
    text-align: right;
}

.pack_qty_row_list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pack_sheet_content {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.pack_sheet_header {
    padding-bottom: 4px;
}

.pack_sheet_header_label {
    font-size: 17px;
    font-weight: 700;
    color: var(--ezinq_theme_color);
}

.pack_sheet_header_stats {
    font-size: 13px;
    color: var(--fill_color_gray);
    margin-top: 2px;
}

.pack_sheet_section_label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--fill_color_gray);
    font-weight: 500;
    margin-bottom: 8px;
}

.pack_sheet_config_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
}

.pack_sheet_config_field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pack_sheet_config_field input.editable_pack_field,
.pack_sheet_config_field select.pack_unit_select {
    width: 100%;
}

.pack_sheet_aux_model {
    font-size: 11px;
    color: var(--fill_color_gray);
}

.pack_sheet_aux_related {
    font-size: 11px;
    color: var(--fill_color_gray);
}

.pack_sheet_aux_qty {
    font-weight: 500;
    color: #6B4E1E;
    white-space: nowrap;
    flex-shrink: 0;
}

.wb-packing-box-card-mobile-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
}

.wb-packing-box-card-mobile-row .wb-packing-box-card-mobile {
    flex: 1;
    min-width: 0;
}

.wb-packing-box-card-mobile-additem {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: var(--ezinq_theme_color);
    color: #fff;
    border-radius: 12px 12px 0 0;
    text-decoration: none;
    width: 36px;
}

.wb-packing-box-card-mobile-additem .pack_add_action_label {
    display: none;
}

.wb-packing-box-card-mobile-additem .pack_add_action_label {
    font-size: 10px;
}

.wb-packing-box-card-mobile-wrapper:has(.wb-packing-box-card-mobile-expand:not(.expanded)) .wb-packing-box-card-mobile-additem {
    border-radius: 12px;
}

.pack_qty_row_list .pack_qty_row {
    background: var(--surface_light_color, #fff);
    border: 1px solid var(--light_border_grey);
    border-radius: 12px;
    padding: 12px;
    display: block;
}

.pack_qty_row_top {
    display: flex;
    gap: 12px;
}

.pack_qty_row_img_wrap {
    position: relative;
    flex-shrink: 0;
    width: 72px;
    height: 72px;
}

.pack_qty_row_img_wrap .image_wrapper,
.pack_qty_row_img_wrap img {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    object-fit: cover;
}

.pack_qty_row_checkbox_overlay {
    position: absolute;
    top: -4px;
    left: -4px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid var(--light_border_grey);
    padding: 2px;
    margin: 0;
}

.pack_qty_row_top .pack_picker_info {
    flex: 1;
    min-width: 0;
    padding-top: 2px;
}

.pack_qty_row_top .pack_picker_name {
    font-size: 14px;
    font-weight: 500;
}

.pack_qty_row_top .pack_picker_model {
    font-size: 12px;
    color: var(--fill_color_gray);
    margin-top: 2px;
}

.pack_qty_row_fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--ultra_light_border_grey);
}

.pack_qty_row_field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.pack_qty_row_field .pl-field-label {
    font-size: 12px;
    color: var(--fill_color_gray);
    flex-shrink: 0;
}

.pack_qty_row_field input.editable_pack_field {
    width: 110px;
    flex-shrink: 0;
}

.pack_qty_row_field .pl-field-readonly {
    font-size: 12px;
    color: var(--fill_color_gray);
}

/* ===== Packing box redesign — simple vs combined layout ===== */

.pl-box-wrapper {
    border: 0.5px solid var(--border, #ddd);
    border-radius: 12px;
    margin-bottom: 10px;
    overflow: hidden;
    background: var(--surface-2, #fff);
}

.pack_box_accent_simple {
    border-left: 3px solid var(--gray-400, #B4B2A9);
    border-radius: 0 12px 12px 0;
}

.pack_box_accent_combined {
    border-left: 3px solid var(--purple-400, #7F77DD);
    border-radius: 0 12px 12px 0;
}

/* Simple box — one-line row */
/* Changed: was flex-wrap:nowrap with a fixed 850px breakpoint switching it
   to wrap — that forced content to stay squeezed onto one line at any
   width above 850px even once it no longer fit, causing overlap during
   resize instead of wrapping the moment it actually ran out of room.
   Always-wrap lets flexbox reflow naturally and immediately whenever
   content doesn't fit, regardless of viewport width — no arbitrary number
   to get wrong. */
.pack_simple_box_row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 16px;
}

.pack_simple_box_label {
    font-size: 12px;
    white-space: nowrap;
    flex: 0 0 auto;
}

.pack_simple_box_fields {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

/* Changed: removed height/padding — .form-control-sm (already on every
   editable_pack_field input via _buildPackFieldControl()) already handles
   that correctly. Width follows the same convention used for this kind of
   field elsewhere in the app (68px, matching the desktop config-grid style). */
.pack_box_field_inline input,
.pack_box_field_inline select {
    width: 68px;
    font-size: 13px;
}

.pack_box_field_inline .pl-field-label {
    font-size: 10px;
    color: var(--text-muted, #999);
    white-space: nowrap;
}

.pack_simple_divider {
    width: 0.5px;
    align-self: stretch;
    background: var(--border, #ddd);
    flex: 0 0 auto;
}

/* Added: light neutral tint — distinguishes this read-only/computed cluster
   from the editable box-fields and product-inputs zones next to it, which
   stay on the plain background since both are equally "things you edit,"
   not two different categories. Subtle padding + radius so the tint reads
   as a soft grouping, not a harsh block. */
.pack_simple_stats {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex: 0 0 auto;
    flex-wrap: wrap;
    background: var(--surface-1, #f7f7f5);
    border-radius: 8px;
    padding: 6px 10px;
}

.pack_stat_chip .pl-field-label {
    font-size: 10px;
    color: var(--text-muted, #999);
    white-space: nowrap;
}

.pack_stat_chip_value {
    height: 26px;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--text-secondary, #555);
    white-space: nowrap;
}

.pack_simple_box_label_wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 0 0 auto;
}

.pack_simple_add_item {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
}

.pack_simple_add_item:hover {
    background: var(--surface-1, #f5f5f5);
}

.pack_simple_add_item .ezinq-svg-icon {
    width: 13px;
    height: 13px;
}

.pack_simple_product {
    flex: 1 1 auto;
    min-width: 0;
}

/* Combined box — merged header line */
/* Changed: same fix as .pack_simple_box_row above — always wrap instead of
   a fixed-breakpoint nowrap/wrap switch. */
.pl-box-header-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
}

.pl-box-chevron {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.pl-box-wrapper.pl-box-collapsed .pl-box-chevron {
    transform: rotate(-90deg);
}

.pl-box-header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.pl-box-summary-counts {
    font-size: 12px;
    background: var(--bg-pro, #EEEDFE);
    color: var(--purple-800, #3C3489);
    padding: 2px 8px;
    border-radius: 99px;
    white-space: nowrap;
}

.pl-box-body {
    border-top: 0.5px solid var(--border, #ddd);
    padding: 12px 16px;
}

.pl-box-wrapper.pl-box-collapsed .pl-box-body {
    display: none;
}

/* Compact product row — shared by simple box's single product and
   combined box's product list */
.pack_product_compact_row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Combined box only — matches .pl-box-header-line's own gap (12px) so the
   fields cluster lands exactly under box_fields. Scoped separately so
   simple box's row (8px gap) is unaffected. */
.pl-box-products-compact .pack_product_compact_row {
    gap: 12px;
}

.pack_product_compact_row_wrap {
    padding-bottom: 10px;
}

.pack_product_row_divider {
    border-bottom: 0.5px solid var(--border, #ddd);
    margin-bottom: 10px;
}

/* Changed: previous align-self:stretch + aspect-ratio with no bounding
   caused a circular sizing blow-up (row height depends on content, content
   here tried to depend on row height, with nothing capping it). Using a
   fixed, comfortable size instead — close to the row's typical content
   height (label+input pair, roughly 40px) without the instability. */
.pack_product_thumb {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

/* Added: this is the first place a checkbox shares a row with the row's
   own flex `gap` (simple box's product row never had a checkbox) —
   explicit margin as a safety net in case checkbox_container's own CSS
   (not shown to me) interferes with the parent row's gap spacing. */
.pack_product_compact_row>label.checkbox_container {
    margin-right: 4px;
}

.pack_product_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.pack_product_identity {
    min-width: 0;
    flex: 1 1 160px;
    max-height: 32px;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    text-align: left;
}

.pack_product_identity::-webkit-scrollbar {
    display: none;
}

/* Changed: font-size reduced + explicit line-height added on both lines.
   Root cause of the unwanted scroll was default line-height inflating the
   two lines' combined height past the .pack_product_identity clamp (32px)
   even when the text itself fit on one line each — not padding, since
   none is set here. */
.pack_product_name {
    font-size: 12px;
    line-height: 1.3;
    overflow-wrap: break-word;
}

.pack_product_model {
    font-size: 11px;
    line-height: 1.3;
    color: var(--text-muted, #999);
    overflow-wrap: break-word;
}

.pack_product_fields_cluster {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.pack_product_field_inline .pl-field-label {
    font-size: 10px;
    color: var(--text-muted, #999);
    white-space: nowrap;
}

/* Changed: removed height/padding — .form-control-sm already handles it.
   Width matches the compact product-row field convention used throughout
   this layout (64px). */
.pack_product_field_inline input {
    width: 64px;
    font-size: 13px;
}

/* pl-field-readonly is a plain div, not a Bootstrap .form-control — it has
   no built-in sizing, so it still needs explicit padding to visually align
   with its input siblings. Approximated from Bootstrap's small-control
   convention; flag this to me once you see it live if it doesn't quite
   line up and I'll adjust. */
.pack_product_field_inline .pl-field-readonly {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--text-secondary, #555);
    padding: 0.25rem 0.5rem;
    width: 64px;
}

/* Reverted: this must stay natural/content-sized — the header itself must
   never be shifted by anything related to product-row alignment. Box
   labels vary in length per box, so a fixed width here was wrong; it
   pushed box_fields to the right instead of the product row aligning to it.
   The product row's lead (below) mirrors this real content instead, so it
   always matches whatever width this naturally ends up being, per box. */
.pl-box-header-lead {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-shrink: 0;
}

.pl-box-chevron-checkbox-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Invisible clone parts inside the product row's own lead block — occupy
   the exact same layout space as the header's real chevron/label, so the
   product row's fields cluster starts at the same x as box_fields, without
   any fixed pixel guess. Only the checkbox between them is real/visible. */
.pack_lead_hidden {
    visibility: hidden;
}

.pack_lead_label_spacer {
    font-size: 12px;
    white-space: nowrap;
}

.pack_product_row_lead {
    align-items: center;
}

.pl-box-products-compact {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
/* ==========================================
   3D Container Viewer - Inline Scene Layout
   ========================================== */

#display_container_3d_btn {
    display: flex;
    width: 100%;
    height: calc(100vh - 150px);
    background: #1a1a2e;
    position: relative;
    overflow: hidden;
}

#c3d_canvas_wrapper {
    flex: 1;
    position: relative;
    min-width: 0;
}

#c3d_canvas {
    display: block;
    width: 100%;
    height: 100%;
}

#c3d_side_panel {
    width: 260px;
    background: #16213e;
    color: #fff;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    border-left: 1px solid #333;
    overflow: hidden;
}

#c3d_topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: #16213e;
    color: #fff;
    flex-shrink: 0;
    border-bottom: 1px solid #333;
}

#c3d_step_info {
    padding: 12px;
    border-bottom: 1px solid #333;
    font-size: 13px;
    min-height: 80px;
}

#c3d_waiting_list {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
}

.c3d_waiting_item {
    padding: 8px;
    margin-bottom: 4px;
    border-radius: 4px;
    background: #0f3460;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}

.c3d_waiting_item:hover {
    border-color: #4A90D9;
}

#c3d_stats {
    padding: 10px;
    border-top: 1px solid #333;
    font-size: 11px;
    color: #aaa;
}

#c3d_btn_suggest {
    background: #2980b9;
    color: #fff;
    border: none;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    display: none;
    width: 100%;
}

#c3d_btn_confirm {
    background: #27ae60;
    color: #fff;
    border: none;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    display: none;
    width: 100%;
}

#c3d_container_label {
    font-weight: bold;
    font-size: 14px;
}

#c3d_capacity_label {
    font-size: 12px;
    color: #aaa;
}

/* ==========================================
   3D Container - Side Panel UI Elements
   ========================================== */

#c3d_action_bar {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-bottom: 1px solid #333;
}

#c3d_btn_arrange_all:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

#c3d_selected_info {
    padding: 8px;
    border-bottom: 1px solid #333;
    font-size: 12px;
}

#c3d_qty_row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0;
    color: #ccc;
    font-size: 11px;
}

#c3d_qty_input {
    width: 60px;
    padding: 3px;
    background: #0f3460;
    color: #fff;
    border: 1px solid #444;
    border-radius: 3px;
}

#c3d_qty_input:focus {
    background: #ffffff;
    color: #000000;
    outline: none;
    box-shadow: none;
}

#c3d_selected_actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#c3d_btn_suggest,
#c3d_btn_manual,
#c3d_btn_confirm,
#c3d_btn_cancel_place {
    border: none;
    padding: 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    width: 100%;
}

#c3d_btn_suggest {
    background: #2980b9;
    color: #fff;
}

#c3d_btn_manual {
    background: #d35400;
    color: #fff;
}

#c3d_btn_confirm {
    background: #27ae60;
    color: #fff;
}

#c3d_btn_cancel_place {
    background: #7f8c8d;
    color: #fff;
}

#c3d_waiting_header {
    padding: 8px;
    font-size: 11px;
    color: #aaa;
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.c3d_item_top {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.c3d_item_info {
    flex: 1;
    min-width: 0;
}

.c3d_item_company {
    font-size: 11px;
    color: #4A90D9;
    font-weight: bold;
}

.c3d_item_name {
    font-size: 11px;
    color: #ccc;
    margin-top: 2px;
}

.c3d_item_dims {
    font-size: 10px;
    color: #aaa;
    margin-top: 2px;
}

.c3d_item_selected {
    border-color: #27ae60 !important;
}

.c3d_empty_state {
    color: #aaa;
    font-size: 12px;
    padding: 12px 8px;
    text-align: center;
}

#c3d_detail_title {
    font-weight: bold;
    color: #4A90D9;
    margin-bottom: 4px;
}

#c3d_detail_dims {
    color: #aaa;
    font-size: 11px;
    margin-bottom: 4px;
}

#c3d_detail_products {
    font-size: 11px;
    color: #ccc;
    max-height: 80px;
    overflow-y: auto;
}

#display_container_3d_btn #c3d_manual_hint {
    display: none;
    position: absolute;
    bottom: 52px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 6px;
    pointer-events: none;
    z-index: 10;
    white-space: nowrap;
}

/* ==========================================
   3D Container - Canvas Toolbar
   ========================================== */
#c3d_canvas_toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10;
    position: relative;
    gap: 6px;
}

#c3d_btn_unload {
    opacity: 0.9;
}

#c3d_radial_reposition {
    background: #2980b9;
}

#c3d_radial_reposition:hover {
    background: #3498db;
}

#c3d_btn_unload:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ==========================================
   3D Container - Tooltip Styles
   ========================================== */

#c3d_tooltip {
    position: absolute;
    display: none;
    background: rgba(10, 20, 40, 0.95);
    color: #fff;
    padding: 0;
    border-radius: 8px;
    font-size: 12px;
    pointer-events: none;
    max-width: 280px;
    z-index: 100;
    border: 1px solid #2c4a7c;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.c3d_tt_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #0f3460;
    border-bottom: 1px solid #2c4a7c;
}

.c3d_tt_company {
    font-weight: bold;
    color: #4A90D9;
    font-size: 12px;
}

.c3d_tt_step {
    font-size: 10px;
    color: #aaa;
}

.c3d_tt_body {
    padding: 8px 12px;
}

.c3d_tt_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    gap: 8px;
}

.c3d_tt_label {
    color: #aaa;
    font-size: 11px;
    white-space: nowrap;
}

.c3d_tt_value {
    color: #fff;
    font-size: 11px;
    text-align: right;
}

.c3d_tt_products {
    margin-top: 8px;
    border-top: 1px solid #2c4a7c;
    padding-top: 6px;
}

.c3d_tt_products_title {
    color: #aaa;
    font-size: 10px;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.c3d_tt_products_table {
    width: 100%;
    border-collapse: collapse;
}

.c3d_tt_products_table tr {
    border-bottom: 1px solid #1a3a5c;
}

.c3d_tt_products_table tr:last-child {
    border-bottom: none;
}

.c3d_tt_img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 3px;
    background: #0f3460;
    padding: 2px;
}

.c3d_tt_product_img {
    width: 40px;
    padding: 3px 3px 3px 0;
}

.c3d_tt_product_name {
    color: #ccc;
    font-size: 10px;
    padding: 3px 4px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.c3d_tt_product_model {
    color: #aaa;
    font-size: 10px;
    padding: 3px 4px;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.c3d_tt_product_qty {
    color: #4A90D9;
    font-size: 10px;
    padding: 3px 0;
    white-space: nowrap;
    text-align: right;
}

/* ========== 3D CONTAINER BOTTOM NAVBAR ========== */
#c3d_bottom_navbar {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    background-color: #0d0d1a;
    border-top: 1px solid #1e1e3a;
    padding: 0 16px;
    flex-shrink: 0;
}

#c3d_view_toggle_wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.c3d_view_label {
    font-size: 12px;
    color: #555a7a;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: color 0.3s ease;
    user-select: none;
}

.c3d_view_label_active {
    color: #00d4ff;
}

.c3d_toggle_track {
    width: 44px;
    height: 22px;
    background-color: #1e1e3a;
    border-radius: 11px;
    border: 1px solid #2a2a4a;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.c3d_toggle_track.c3d_toggle_realistic {
    background-color: #1a3a2a;
    border-color: #2a4a3a;
}

.c3d_toggle_thumb {
    width: 16px;
    height: 16px;
    background-color: #00d4ff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: left 0.3s ease, background-color 0.3s ease;
}

.c3d_toggle_track.c3d_toggle_realistic .c3d_toggle_thumb {
    left: 24px;
    background-color: #27ae60;
}

/* ========== 3D WALL HOVER HINT ========== */
#c3d_wall_hint {
    position: absolute;
    display: none;
    background: rgba(0, 0, 0, 0.75);
    color: #ffffff;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 10;
    white-space: nowrap;
    border: 1px solid #333;
}

/* ========== 3D OUTER LAYOUT WRAPPER ========== */
#c3d_outer_wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

#c3d_inner_wrapper {
    display: flex;
    flex-direction: row;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

#c3d_canvas_wrapper {
    flex: 1;
    position: relative;
    overflow: hidden;
}

#c3d_side_panel {
    width: 260px;
    min-width: 260px;
    overflow-y: auto;
    background-color: #0d0d1a;
    border-left: 1px solid #1e1e3a;
}

#c3d_bottom_navbar {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    background-color: #0d0d1a;
    border-top: 1px solid #1e1e3a;
    padding: 0 16px;
    flex-shrink: 0;
    width: 100%;
}

#c3d_canvas_wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
}

#c3d_canvas {
    flex: 1;
    min-height: 0;
    display: block;
}

/* ========== 3D RADIAL CONTEXT MENU ========== */
#c3d_radial_menu {
    position: absolute;
    display: none;
    z-index: 100;
    pointer-events: none;
}

.c3d_radial_btn {
    position: absolute;
    height: 32px;
    padding: 0 10px;
    border-radius: 16px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: #ffffff;
    pointer-events: all;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.2s ease, opacity 0.2s ease;
    opacity: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

.c3d_radial_btn.c3d_radial_visible {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.c3d_radial_btn_remove {
    background-color: #e74c3c;
}

.c3d_radial_btn_remove:hover {
    background-color: #c0392b;
}

.c3d_radial_btn_move {
    background-color: #2980b9;
}

.c3d_radial_btn_move:hover {
    background-color: #1a6a9a;
}

.c3d_radial_center {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.c3d_radial_btn_confirm {
    background-color: #27ae60;
}

.c3d_radial_btn_confirm:hover {
    background-color: #1e8449;
}

.c3d_radial_btn_cancel {
    background-color: #7f8c8d;
}

.c3d_radial_btn_cancel:hover {
    background-color: #616a6b;
}

/* ========== 3D WALL CONTROLS ========== */
#c3d_wall_controls {
    position: absolute;
    top: 50px;
    left: 8px;
    z-index: 10;
    display: none;
    flex-direction: column;
    gap: 4px;
    background: rgba(0, 0, 0, 0.45);
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.c3d_wall_check_label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    user-select: none;
}

.c3d_wall_check_label input[type="checkbox"] {
    width: 12px;
    height: 12px;
    cursor: pointer;
    accent-color: #00d4ff;
}



#c3d_toolbar_left {
    display: flex;
    gap: 6px;
}

#c3d_toolbar_right {
    display: flex;
    gap: 6px;
}

#c3d_selected_info {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 200px;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 10px;
    z-index: 10;
    color: #ffffff;
    font-size: 12px;
}

#c3d_selected_detail {
    margin-bottom: 8px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
}

#c3d_qty_row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 11px;
}

#c3d_qty_input {
    width: 50px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: #ffffff;
    padding: 2px 4px;
    font-size: 11px;
}

#c3d_selected_actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#c3d_selected_actions button {
    width: 100%;
    padding: 5px;
    font-size: 11px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    cursor: pointer;
}

#c3d_selected_actions button:hover {
    background: rgba(255, 255, 255, 0.2);
}

#c3d_canvas_stats_panel {
    position: absolute;
    left: 8px;
    bottom: 52px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 6px 8px;
    z-index: 10;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 120px;
}

#c3d_stats_total,
#c3d_stats_cbm,
#c3d_stats_companies {
    white-space: nowrap;
    max-height: 80px;
    overflow-y: auto;
    scrollbar-width: none;
    /* Firefox */
}

#c3d_stats_companies::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

#c3d_side_panel {
    display: flex;
    flex-direction: column;
    width: 260px;
    min-width: 260px;
    background-color: #0d0d1a;
    border-left: 1px solid #1e1e3a;
    overflow: hidden;
}

#c3d_waiting_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid #1e1e3a;
    flex-shrink: 0;
}

#c3d_waiting_list {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

#c3d_partial_fit_hint {
    position: absolute;
    display: none;
    background: rgba(0, 0, 0, 0.75);
    color: #f39c12;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 20;
    white-space: nowrap;
    border: 1px solid #f39c12;
}

#c3d_tooltip_controls {
    position: absolute;
    top: 145px;
    left: 8px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.45);
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#c3d_hud_controls {
    position: absolute;
    top: 210px;
    left: 8px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.45);
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#c3d_dimensions_controls {
    position: absolute;
    top: 178px;
    left: 8px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.45);
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#c3d_per_row_hint {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.75);
    color: #00d4ff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 20;
    white-space: nowrap;
}

#c3d_hanging_warning {
    display: none;
    position: absolute;
    top: 85px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    color: #e74c3c;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 20;
    white-space: nowrap;
}

#c3d_tolerance_wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 20px;
    /* space between slider and view toggle */
    color: #00d4ff;
}

#c3d_tolerance_value {
    width: 50px;
    /* fixed width prevents trembling */
    display: inline-block;
    text-align: left;
}

#c3d_container_switcher {
    position: absolute;
    top: 245px;
    left: 8px;
    z-index: 10;
}

#c3d_container_select {
    background: #0f3460;
    color: #fff;
    border: 1px solid #444;
    border-radius: 3px;
    padding: 3px 5px;
    font-size: 11px;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

#c3d_container_select option {
    background: #0f3460;
    color: #fff;
}

#c3d_container_select:focus {
    background: #0f3460;
    color: #fff;
    outline: none;
    box-shadow: none;
}

#c3d_container_select:focus,
#c3d_container_select:active,
#c3d_container_select:hover {
    background-color: #0f3460 !important;
    color: #fff !important;
}

#c3d_shortcut_bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: rgba(0, 0, 0, 0.8);
    padding: 4px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.c3d_shortcut_item {
    display: flex;
    align-items: center;
    gap: 4px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 10px;
}

kbd {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 10px;
    font-family: monospace;
}

/*Three.js (3d view in packing) specific loader which works with it as common showloader is not working for 3d canvas*/
#c3d_loader_overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 26, 46, 0.8);
    z-index: 50;
    justify-content: center;
    align-items: center;
}

#c3d_loader_overlay_middle {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: #00d4ff;
    border-radius: 50%;
    animation: c3d_spin 0.8s linear infinite;
}

#c3d_loader_overlay_inner {
    display: none;
}

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

#c3d_waiting_search {
    box-sizing: border-box;
    border: 1px solid #2a2a4a;
    background: #1e1e3a;
    color: black;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 11px;
    width: 100%;
    outline: none;
    height: 26px;
}

#c3d_waiting_search:focus {
    border-color: #00d4ff;
    outline: none !important;
}

#c3d_saving_indicator {
    position: absolute;
    bottom: 52px;
    left: 50%;
    transform: translateX(-50%);
    right: 8px;
    display: none;
    align-items: center;
    gap: 7px;
    background: rgba(0, 0, 0, 0.75);
    color: #00d4ff;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 20px;
    pointer-events: none;
    z-index: 20;
    white-space: nowrap;
    border: 1px solid rgba(0, 212, 255, 0.35);
}

#c3d_saving_spinner {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(0, 212, 255, 0.3);
    border-top-color: #00d4ff;
    border-radius: 50%;
    animation: c3d_spin 0.8s linear infinite;
    flex-shrink: 0;
}

.c3d_heavy_op_warning {
    margin-top: 10px;
    font-size: 11px;
    color: #aaa;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 8px;
}
/* 3D view usage guide card — read-only, no interactive elements */
.c3d_guide_list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.c3d_guide_item {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    line-height: 1.4;
    /* Allows text child to shrink and wrap instead of overflowing */
    min-width: 0;
}

.c3d_guide_item:last-child {
    border-bottom: none;
}

.c3d_guide_icon {
    font-size: 0.75rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.c3d_guide_icon_mouse {
    filter: sepia(1) saturate(5) hue-rotate(180deg) brightness(1.8);
}

.c3d_guide_icon_key {
    filter: sepia(1) saturate(3) hue-rotate(270deg);
}

.c3d_guide_icon_box {
    opacity: 0.6;
}

.c3d_guide_item .text-muted {
    font-size: 0.72rem;
    word-break: break-word;
    /* Takes remaining space and allows wrapping */
    flex: 1;
    min-width: 0;
    white-space: normal !important;
}
.c3d_guide_section_title {
    margin-top: 8px;
    margin-bottom: 2px;
    list-style: none;
}

.c3d_guide_section_title .text-muted {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.5;
}
/* Missing dims warning icon in waiting list */
.c3d_missing_dims_icon {
    color: orange;
    cursor: pointer;
    margin-right: 4px;
    flex-shrink: 0;
}

.c3d_item_missing_dims {
    opacity: 0.75;
}
/*by button click making 3d full screen.*/
#c3d_fullscreen_btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 12px;
}

#c3d_fullscreen_btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

#display_container_3d_btn:fullscreen {
    height: 100vh;
    background: #1a1a2e;
}

#display_container_3d_btn:-webkit-full-screen {
    height: 100vh;
    background: #1a1a2e;
}
#c3d_orientation_hint {
    display: none;
    position: absolute;
    top: 110px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    color: #f39c12;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 20;
    white-space: nowrap;
}

#c3d_orientation_hint.c3d_hint_actionable {
    color: #2ecc71;
}

#c3d_orientation_hint.c3d_hint_none {
    color: #e67e22;
}
/* Responsive - hide side panel on small screens */
@media (max-width: 991px) {
    #c3d_side_panel {
        width: 180px;
    }

    .c3d_waiting_item {
        font-size: 10px;
    }
}
/* Navigation: createContainerSectionButton() (packing.js) → .con_header_row
   Purpose: fixed-proportion column layout — each group (checkbox / container button /
   ellipsis / add-remove / stats) has its own reserved flex-basis width so no group's
   content length can shift a neighboring group's position. Columns wrap their own
   content internally (flex-wrap within the column) rather than resizing themselves
   or pushing siblings. Stats column gets the largest share since it holds the longest
   variable-length content; container-btn and add-remove columns get roughly equal
   secondary shares; checkbox and ellipsis columns are icon-only, minimal fixed width.
*/
.con_header_row.medium_table_header {
    height: auto;
    min-height: 44px;
    width: 100%;
    color: white;
    font-size: 0.8rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    box-sizing: border-box;
}

.con_col {
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.con_col_checkbox,
.con_col_ellipsis {
    flex: 0 0 auto;
    justify-content: center;
}

.con_header_checkbox {
    margin: 0;
}

.con_col_container_btn {
    flex: 1 1 140px;
    min-width: 100px;
}

.con_col_container_btn .container_section_btn {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.con_actions_toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: white;
}

.con_actions_toggle .ezinq-svg-icon {
    width: 16px;
    height: 16px;
}

.con_col_addremove {
    flex: 1 1 90px;
    min-width: 70px;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.con_addremove_link {
    color: white;
    text-decoration: none;
    white-space: nowrap;
}

/* Checkbox rows inside the dropdown — icon/dot + visible text side by side.
   .checkbox_container/.checkbox_span themselves are untouched; wrapping in a small
   fixed box keeps the absolute-centered dot correct while giving label text room
   as a separate sibling, instead of fighting the centering math directly. */
.con_dropdown_checkbox_label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    width: 100%;
}

.con_dropdown_checkbox_box.checkbox_container {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin: 0;
}

.con_col_stats {
    flex: 1 1 auto;
    min-width: 0;
    gap: 4px 14px;
    white-space: nowrap;
    overflow: hidden;
}

@media screen and (max-width: 768px) {
    .con_col_stats {
        flex-basis: 100%;
    }
}
.con_col_checkbox { order: 1; }
.con_col_container_btn { order: 2; }
.con_col_addremove { order: 3; }
.con_col_ellipsis { order: 4; }
.con_col_stats { order: 5; flex-basis: 100%; }
/* Navigation: createContainerStructure() (packing.js) → .con_info_row_wrapper / .con_info_row
   Purpose: replaced Bootstrap .row/.col-sm (not being used as an actual multi-column grid —
   just one column) with plain wrappers. .row's negative side margins (compensating for
   .col-*'s own padding, meant for real grid layouts) were bleeding padding/content past
   this element's own boundaries. box-sizing:border-box ensures padding stays inside the
   wrapper's own width instead of adding to it.
*/
.con_info_row_wrapper {
    width: 100%;
    box-sizing: border-box;
}

.con_info_row {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    gap: 4px 4px;
}
/* Navigation: .con_info_row → milder text styling + progress bar side padding
   Purpose: con_info_title_label (con no/L/W/H/capacity titles) previously used default
   <label> bold/large styling — softened for a calmer, less eye-catching info strip.
   Progress bar wrapper gets horizontal padding to match the info row's own breathing room.
*/
.con_info_row .con_info_title_label {
    font-weight: 400;
    font-size: 0.75rem;
}

.con_info_row label {
    font-weight: 400;
    font-size: 0.8rem;
}

.progress_bar_wrapper {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box;
}
/* Navigation: buildContainerStuffHeaderRow()/buildContainerStuffSingleTable() (html_renderer.js)
   → shared column widths + sticky header
   Purpose: table-layout:fixed + identical colgroup on every table (header row's own
   div-based "table" and every company <table>) guarantees pixel-perfect column
   alignment by position, regardless of content — replaces the old auto-layout
   coincidence. Top header converted from a one-row <table> to a <div> row, since
   position:sticky only stays stuck while its own containing block is still in the
   scroll viewport — a one-row table scrolls fully out of view almost immediately,
   which is why it was disappearing. A div's containing block is the real (tall)
   scroll container, so it stays correctly stuck the whole time, same as the
   company thead rows below it.
*/
.container_stuff_col_checkbox { width: var(--icon-checkbox-col-size); }
.container_stuff_col_box { width: 25%; }
.container_stuff_col_ctn_qty { width: 15%; }
.container_stuff_col_ctn_no { width: 20%; }
.container_stuff_col_gross { width: 20%; }
.container_stuff_col_cbm { width: 20%; }

.container_stuff_header_table,
.responsive-table.table-scroll.table-hover.homepage_table[id^="con_load_list_table"] {
    table-layout: fixed;
}

.container_stuff_header_row {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 5;
    background: white;
}

.container_stuff_header_cell {
    box-sizing: border-box;
    padding: 0 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 400;
    color: #6c757d;
}

.company_summary_th {
    top: var(--container_stuff_header_height, 0px);
}
.mrg_top_0_bottom_10 {
    margin-top: 0;
    margin-bottom: 10px;
}

.new_item_img_section {
    width: 300px;
}
.new_item_img_division {
    /*add new item img div classes for img preview on table line*/
    width: 20%;
    padding: 0 5px 5px 5px;
    /*padding:0;*/
    position: relative;
}

.new_item_img_division img {
    width: 100%;
    height: 100%;
    border: 2px solid navajowhite
}

.new_item_img_division.display_main_img_preview {
    /*for main image to display in bigger size as preview*/
    width: 100%;
}
.newitemwrapper {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 0;
    gap: 10px;
    justify-content: center;
}

.new_item_select {
    width: 100%;
}

.newitemeachbox {
    border: 1px solid var(--entry_light_grey);
    width: 200px;
    box-shadow: inset 0 3px 3px rgba(0, 0, 0, 0.16), 0 2px 3px rgba(0, 0, 0, 0.45);
    border-radius: 5px;
}

.newitemeachbox>div:first-child {
    height: 25px;
    background-color: #e2e2e2;
}

.newitemeachbox textarea {
    resize: none;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    width: 100%;
    outline: 0 none !important;
    background-color: transparent;
    border: 1px solid var(--entry_light_grey) !important;
}

.newitemeachbox textarea:focus {
    box-shadow: 0 0 2px rgba(128, 128, 128, 0.4) !important;
    outline: 0 none !important;
}

.newitemeachbox div:first-child {
    border-bottom: 1px solid var(--entry_light_grey);
}

.newitemeachbox.new_item_extra_wrapper {
    height: 110px;
}

.newitemeachbox .new_item_extra_inner {
    overflow-y: auto;
    height: 83px;
}
/* =====================================================
   NEW ITEM ASSIGNABLE COLUMNS SEPARATOR
   Visual separation between standard and assignable fields
   Pure visual — no functional impact on data collection
   ===================================================== */
.new_item_assignable_separator {
    width: 100%;
    text-align: center;
    padding: 10px 0 4px 0;
}

.new_item_separator_line {
    border: none;
    border-top: 1px solid #dee2e6;
    margin: 0 0 8px 0;
}

.new_item_separator_title {
    font-size: 12px;
    font-weight: 600;
    color: #adb5bd;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.new_item_separator_desc {
    font-size: 11px;
    color: #ced4da;
    font-style: italic;
}
@media screen and (max-width: 991px) {
    .new_item_img_section {
        /*this is img preview for adding new item in add_item.php*/
        width: 100%;
    }
}
/* Company Detail Overview — card wrapper */
.company_detail_overview_wrapper {
    max-width: 900px;
    padding: 24px;
    text-align: left;
}

/* Company Detail Overview — each field row */
.company_detail_overview_row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

/* Company Detail Overview — label column */
.company_detail_overview_label {
    width: 160px;
    flex-shrink: 0;
    font-weight: 400;
    font-size: 13px;
    color: var(--text_muted_color);
}

/* Navigation: narrow-viewport stacking
   Purpose: fixed 160px label width squeezes the value/input column too narrow on
   phones, causing content to be cut off. Stacks label above value, both full-width,
   at mobile widths — matches BREAKPOINTS.mobile_break_point (768px) used elsewhere. */
@media screen and (max-width: 768px) {
    .company_detail_overview_row {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .company_detail_overview_label {
        width: 100%;
    }
}

/* Company Detail Overview — value span (view mode) */
.company_detail_overview_value {
    flex: 1;
    background: rgba(0, 0, 0, 0.03);
    padding: 4px 8px;
    border-radius: 6px;
    color: var(--text_muted_color);
    font-weight: 400;
    font-size: 13px;
    min-height: 31px;
    display: flex;
    align-items: center;
}

/* Company Detail Overview — input/select (edit mode) */
.company_detail_edit_input {
    flex: 1;
}

/* Company Detail Overview — save/cancel button row */
.company_detail_overview_row:last-child {
    justify-content: center;
    margin-top: 1rem;
}
.company_detail_profile_img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(0,0,0,0.08);
}
.product_row td div:first-child,
.pack_each_data_row .pack_info_wrapper,
.fixed_height_row td div:first-child {
    max-height: clamp(60px, 6.5vw, 120px) !important;
    max-height: var(--table_row_height) !important;
    overflow: hidden;
}

.checkbox_column {
    width: var(--icon-checkbox-col-size);
}

#image_column {
    width: var(--product-img-col-size) !important;
    min-width: var(--product-img-col-size) !important;
    max-width: var(--product-img-col-size) !important;
}

.companies_img_th {
    width: var(--contact-img-col-size) !important;
    min-width: var(--contact-img-col-size) !important;
    max-width: var(--contact-img-col-size) !important;
}

.product_image_column {
    width: var(--product-img-col-size) !important;
    min-width: var(--product-img-col-size) !important;
    max-width: var(--product-img-col-size) !important;
}

/* Utility — any fixed-widthreusable across sections */
.fixed_width_col {
    width: var(--product-img-col-size) !important;
    min-width: var(--product-img-col-size) !important;
    max-width: var(--product-img-col-size) !important;
}

.standard_col {
    width: auto !important;
}

#porderpurchase_table .extra_col {
    width: auto !important;
}

.companies_company_th {
    width: 55%;
}

companies_company_th_narrow {
    width: 45%;
}

.companies_detail_th {
    width: auto;
}

.home_status_icon_th {
    width: var(--icon-checkbox-col-size);
}

.home_actions_th {
    width: var(--icon-checkbox-col-size);
}

.companies_user_card_company_th {
    width: 40%;
}

.companies_user_card_tel_th {
    width: auto;
}

.companies_user_card_location_th {
    width: auto;
}

.companies_user_card_code_th {
    width: 15%;
}

.workbench_list_tbl_file_group_name_th {
    width: 30%;
}

.workbench_list_tbl_sub_file_th {
    width: 30%;
}

.custom_file_table #qty_column,
.custom_file_table #price_column,
.custom_file_table #calc_price_column {
    width: 75px !important;
}

.custom_file_table #supp_note_column,
.custom_file_table #cust_note_column {
    width: 75px !important;
}
/* ========================================
   WORKBENCH MOBILE CARD VIEW
   Renders below 767px — replaces table rows
   All columns visible (including hidden_767 ones)
   ======================================== */

.wb-cards-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 4px;
}

.wb-product-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    position: relative;
}

.wb-card-connect-indicator {
    position: absolute;
    bottom: 30px;
    left: 16px;
    z-index: 2;
}

.wb-card-connect-indicator .connect_element {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Checkbox row */
.wb-card-checkbox-overlay {
    position: absolute;
    top: -10px;
    left: -2px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 3px;
    padding: 1px 2px;
    line-height: 1;
}

/* Top row: image left, specs right */
.wb-card-top-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.wb-card-img-wrap {
    flex: 0 0 70px;
    width: 70px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.wb-card-guest-added-badge {
    margin-top: 5px;
    background: var(--guest_adjustment_color);
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    text-align: center;
    padding: 2px 4px;
    border-radius: 4px;
    line-height: 1.3;
}

.wb-card-img-wrap img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    object-fit: cover;
}

/* Specs column */
.wb-card-specs {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wb-card-field-row {
    display: flex;
    gap: 4px;
    font-size: 12px;
    line-height: 1.4;
    align-items: flex-start;
    flex-wrap: wrap;
}

.wb-card-supplier-list {
    flex: 0 0 100%;
    width: 100%;
}

.wb-card-field-label {
    color: #888;
    flex: 0 0 72px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}

.wb-card-field-value {
    color: #444;
    word-break: break-word;
    font-weight: 400;
    flex: 1;
    min-width: 0;
    text-align: left;
}

.wb-card-price-row .wb-card-field-value {
    font-weight: 600;
    color: #2a6496;
}

/* Supplier entries in card */
.wb-card-supplier-row {
    font-size: 12px;
    padding: 2px 0;
}

/* Bottom row: inputs */
.wb-card-bottom-row {
    border-top: 1px solid #f0f0f0;
    padding-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wb-card-input-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.wb-card-input-label {
    font-size: 12px;
    color: #888;
    flex: 0 0 70px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
    align-self: flex-start;
    text-align: left;
}

.wb-card-input-row input[type="text"],
.wb-card-input-row textarea {
    flex: 1;
    min-width: 0;
    font-size: 12px;
}


/* ========================================
   WORKBENCH CARD — ASSIGNED COLUMN STYLES
   ======================================== */

/* Supplier group — subtle background to indicate grouping */
.wb-card-supplier-group {
    align-items: flex-start;
    background: #f8f9fa;
    border-radius: 4px;
    padding: 2px 0;
    margin: 1px 0;
    gap: 2px;
    display: flex;
    flex-wrap: wrap;
}

.wb-card-supplier-group .wb-card-field-label {
    margin-bottom: 1px;
    font-weight: 400;
    color: #888;
}

.wb-card-supplier-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.wb-card-supplier-list .supplier_info_wrapper {
    padding: 0 0 0 2px;
}

/* Word assigned — wrap naturally with dash separator */
.wb-card-assigned-words {
    word-break: break-word;
    color: #333;
}

/* Category assigned */
.wb-card-assigned-cats {
    word-break: break-word;
    color: #333;
}
.wb-card-supplier-list .supplier_info_wrapper a,
.wb-card-supplier-list .supplier_info_wrapper .supp-entry-wrap {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* ========================================
   WORKBENCH CARD — INPUT/TEXTAREA STYLING
   Mirrors share.php's .share-adjustment-input/.share-adjustment-note
   Mobile card view only — desktop table inputs stay borderless as-is
   ======================================== */
.wb-card-input-row input.form-control,
.wb-card-input-row textarea.form-control {
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    padding: 6px 4px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
    box-shadow: none;
    height: auto;
}

/* ========================================
   WORKBENCH CARD — INPUT/TEXTAREA STYLING
   Mirrors share.php's .share-adjustment-input/.share-adjustment-note
   Mobile card view only — desktop table inputs stay borderless as-is
   Note textarea has no wrapper div in card mode — direct child of input-row
   ======================================== */
.wb-card-input-row input.form-control,
.wb-card-input-row textarea.form-control {
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
    box-shadow: none;
    height: auto;
    flex: 1;
    min-width: 0;
}
.wb-card-input-row .input_note_div{
    padding:0!important;
}
.wb-card-input-row input.form-control:focus,
.wb-card-input-row textarea.form-control:focus {
    border-color: #0071e3;
    box-shadow: none;
}

.wb-card-input-row textarea.form-control {
    resize: none;
    height: 44px;
    padding: 6px 10px;
    font-size: 13px;
}

.wb-card-input-row textarea.custom_file_note_text {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
}

/*to make the price and item visibility checkbox not appear*/
.wb-card-toggle-action {
    position: relative;
}

.wb-card-toggle-input {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
}

/*to keep the link item dropdown in card view to open over the next item's checkbox*/
.wb-product-card:has(.wb-card-connect-indicator .dropdown-menu.show) {
    z-index: 100;
}

.wb-sentinq-card {
    overflow: visible;
}

/* Override: .past_detail_btn / .price_info_btn have global position:absolute (top:2px, right:2px)
   which breaks dropdown <li> flow when these classes are used inside wb-card-actions-menu.
   Reset to static so they render as normal block anchors inside the dropdown list. */
.wb-sentinq-card .wb-card-actions-menu .past_detail_btn,
.wb-sentinq-card .wb-card-actions-menu .price_info_btn,
.wb-receivedinq-card .wb-card-actions-menu .past_detail_btn,
.wb-receivedinq-card .wb-card-actions-menu .price_info_btn {
    position: static;
    top: auto;
    right: auto;
}

/* In card view, past_detail_btn is an <a> inside <li> with text alongside icon.
   Re-anchor ::before to the svg icon span instead of the full anchor width. */
.wb-card-actions-menu .past_detail_btn {
    position: relative;
}

.wb-card-actions-menu .past_detail_btn::before {
    left: auto;
    right: auto;
    top: 10px;
    left: 5px;
    width: 16px;
}

/* Override: db_save_td has global 0.5rem padding which misaligns note_div text
   in card view where horizontal alignment with label is needed */
.wb-product-card .note_div.db_save_td {
    padding: 0;
}

/* ============================================================
   WORKBENCH LIST — CARD VIEW (mobile breakpoint)
   Mirrors createCustomFileRow() table structure in card layout.
   Used on: Home page workbench list, Company Detail workbench tab.
   Card builder: createCustomFileCard() in html_renderer.js
   ============================================================ */
.wb-cf-card {
    background: var(--background_color_div_light);
    border: 1px solid var(--light_border_grey);
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 10px;
}

.wb-cf-card .wb-card-top-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
}

.wb-cf-card-initial-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.wb-cf-card-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wb-cf-card-main .cf_group_name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    word-break: break-word;
}

.wb-cf-card-bottom-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--light_border_grey);
}

.wb-cf-card-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--muted_text_color, #6b7280);
}

/* ============================================================
   IMAGE SECTION FOLDER LIST — CARD VIEW (mobile breakpoint)
   Mirrors fetchFoldersQuick() table structure in card layout.
   Used on: Homepage image section (display_image_section_btn).
   Card builder: buildFolderCard() in html_renderer.js
   ============================================================ */

.wb-folder-card {
    background: var(--background_color_div_light);
    border: 1px solid var(--light_border_grey);
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 10px 12px;
}

.wb-folder-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.wb-folder-name {
    font-weight: 600;
    font-size: 14px;
    word-break: break-word;
}

.wb-folder-icon {
    flex-shrink: 0;
}

.wb-folder-card-meta {
    font-size: 12px;
    color: var(--muted_text_color, #6b7280);
    margin-bottom: 10px;
}

.wb-folder-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--light_border_grey);
}

.wb-folder-card-actions a {
    font-size: 13px;
}

/* ========================================
   INQUIRY/DRAFT FILE LIST CARDS
   ======================================== */

.wb-inq-file-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wb-inq-card-top-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.wb-inq-card-avatar {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wb-inq-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wb-inq-card-company {
    flex: 1;
    min-width: 0;
}

.wb-inq-card-company a {
    word-break: break-word;
}

.wb-inq-card-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85em;
}

.wb-inq-card-meta-row {
    display: flex;
    flex-direction: row;
    gap: 6px;
}

.wb-inq-card-meta-label {
    color: var(--text-muted, #888);
    flex-shrink: 0;
}

.wb-inq-card-bottom-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-top: 4px;
    border-top: 1px solid var(--border-color, #e0e0e0);
}

.wb-inq-card-status {
    display: flex;
    align-items: center;
}
/* ========================================
   PURCHASE LIST CARDS
   ======================================== */

.wb-purchase-list-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.icon_ezinq {
    color: var(--ezinq-brand-color, #2196f3);
}

.icon_usercard {
    color: var(--usercard-brand-color, #ff9800);
}
.wb-sale-list-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* ========================================
   CARD VIEW CHECKALL BAR
   ======================================== */
.wb-card-checkall-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: var(--sidebar-bg, #f0f0f0);
    border-radius: 6px;
    margin-top: -8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.12);
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.wb-card-checkall-bar::after {
    content: attr(data-label);
    font-size: 12px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wb-card-selection-count {
    font-size: 0.85em;
    color: var(--text-muted, #888);
}
/*when in update mode in homepage cardview different render*/
/*when in update mode in homepage cardview different render*/
#display_product_section_btn .wb-product-card .update {
    min-height: 1.5em;
    display: inline-block;
    min-width: 100px;
    max-width: calc(100% - 80px);
    box-sizing: border-box;
    vertical-align: top;
}

#display_product_section_btn .wb-product-card .update_effects {
    border: 1px solid var(--border-color, #ccc);
    border-radius: 4px;
    padding: 2px 6px;
    background: var(--input-bg, #fff);
}

#display_product_section_btn .wb-product-card .update_focusin {
    border-color: var(--brand-color, #2196f3);
    outline: none;
}
#display_product_section_btn .wb-product-card .update:empty {
    min-height: 1.5em;
    min-width: 100px;
    display: inline-block;
}
@media screen and (max-width: 576px) {
    body {
        touch-action: pan-x pan-y;
    }
}

/* ============================================================
   SIDEBAR SLIDE PANEL — narrow viewport (<576px) slide-in nav
   Only active when AppCore.useSlidingDrawer = true (class-driven)
   ============================================================ */

#sidebar_slide_panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 80%;
    max-width: 320px;
    height: 100vh;
    height: 100dvh;
    background-color: var(--ezinq_theme_color, #1a2a4a);
    z-index: 99999;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#sidebar_slide_panel.sidebar_slide_panel--open {
    transform: translateX(0);
}

#sidebar_slide_panel_inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 0 20px 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

#sidebar_slide_panel .top_menu .nav-link {
    color: white !important;
    padding: 10px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

#sidebar_slide_panel .top_menu .nav-link:hover {
    color: rgba(255, 255, 255, 0.75) !important;
}

#sidebar_slide_panel label {
    color: white !important;
}

/* ── Persistent 4 main-nav buttons + tab/action pools inside panel ── */
#sidebar_slide_panel #main_nav_sidebar_inner {
    display: flex;
    flex-direction: column;
    padding: 8px 16px 0 16px;
    margin-top: 12px;
    gap: 4px;
}

#sidebar_slide_panel .main_nav_btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.75);
    text-align: left;
    padding: 10px 8px;
    border-radius: 8px;
    font-size: 14px;
    white-space: normal;
    word-break: break-word;
}

#sidebar_slide_panel .main_nav_btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

#sidebar_slide_panel .main_nav_btn.active_main_nav_btn {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    font-weight: 500;
}

#sidebar_slide_panel #side_tab_pool,
#sidebar_slide_panel #side_action_pool {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    background: transparent;
    padding: 0;
    margin: 0;
    border-radius: 0;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    gap: 0;
    width: 100%;
}

/* Navigation: #side_tab_pool / #side_action_pool → group label headers
   Purpose: injected via ::before pseudo-elements (no DOM/JS change needed) so first-time
   drawer users have a one-word anchor distinguishing "navigation" from "actions" instead of
   relying on color/shape alone. Reuses .sidebar_drawer_separator's visual language (uppercase,
   letter-spaced, muted) so it reads as part of the same design system, not a bolted-on label.
   Hidden automatically when the pool is empty (pool_empty_in_drawer class), same as the pool
   itself, so no orphaned label sits above nothing. */
#sidebar_slide_panel #side_tab_pool:not(.pool_empty_in_drawer)::before,
#sidebar_slide_panel #side_action_pool:not(.pool_empty_in_drawer)::before {
    display: block;
    padding: 16px 16px 6px 16px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

/* Navigation: pool group labels → localized via data-label attribute
   Purpose: content:"Sections"/"Actions" was hardcoded English — CSS can't read this.lang,
   so the translated string is now set as a data-label attribute on each pool (by
   MainNavManager, see setupSlidingDrawer()/_setPoolGroupLabels()) and rendered here via
   attr(), same visual result but localized per the user's selected_language.
*/
#sidebar_slide_panel #side_tab_pool:not(.pool_empty_in_drawer)::before {
    content: attr(data-label);
}

#sidebar_slide_panel #side_action_pool:not(.pool_empty_in_drawer)::before {
    content: attr(data-label);
}

#sidebar_slide_panel #side_tab_pool > *,
#sidebar_slide_panel #side_action_pool > * {
    width: 100%;
    flex: 0 0 auto;
}

#sidebar_slide_panel #side_tab_pool {
    border-bottom: none;
}

/* ── Tab/action buttons inside panel — dark-background variant of .ez_tab/.ez_action ── */
#sidebar_slide_panel #side_tab_pool .ez_tab,
#sidebar_slide_panel #side_tab_pool button {
    color: rgba(255, 255, 255, 0.75) !important;
    background: transparent !important;
    text-align: left;
    width: 100%;
    display: flex !important;
    /* Navigation: justify-content override
       Purpose: .top_selection_btn (shared by every pool button, including the newly
       tab-ified Lists/Packing/Account) sets justify-content:center for its original
       desktop pill layout. Drawer rows need left-alignment like every other tab —
       previously only worked by accident for buttons whose icon/text ratio masked the
       centering; explicit override here makes it correct and generic for all buttons. */
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    padding: 14px 16px !important;
    font-size: 15px;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#sidebar_slide_panel #side_tab_pool .ez_tab .btn_icon_text_wrapper,
#sidebar_slide_panel #side_action_pool .ez_action .btn_icon_text_wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

#sidebar_slide_panel .ezinq-svg-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

#sidebar_slide_panel #side_tab_pool .ez_tab:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: white !important;
}

/* Navigation: #side_tab_pool → Contacts radio-button tab row styling
   Purpose: Contacts' tabs are radio inputs (radio_all_div etc.), not <button>.ez_tab like
   every other section — they never matched the drawer's button-based tab styling above
   (padding, full width, hover, active state), so they rendered as bare, undersized default
   radios instead of proper drawer rows. This mirrors that same button treatment for the
   radio+label wrapper, using :checked in place of the active_* classes buttons use for
   their active state.
*/
#sidebar_slide_panel #side_tab_pool .side_disp_btn_div:has(input[type="radio"]) {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 14px 16px;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
}

#sidebar_slide_panel #side_tab_pool .side_disp_btn_div:has(input[type="radio"]):hover {
    background-color: rgba(255, 255, 255, 0.08);
}

#sidebar_slide_panel #side_tab_pool .side_disp_btn_div input[type="radio"] {
    margin: 0;
    flex-shrink: 0;
}

#sidebar_slide_panel #side_tab_pool .side_disp_btn_div label {
    margin: 0;
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 15px;
    width: 100%;
    cursor: pointer;
}

#sidebar_slide_panel #side_tab_pool .side_disp_btn_div:has(input[type="radio"]:checked) {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: inset 4px 0 0 0 var(--ezinq_theme_color, #4a7fc9);
}

#sidebar_slide_panel #side_tab_pool .side_disp_btn_div:has(input[type="radio"]:checked) label {
    color: white !important;
    font-weight: 600;
}

/* Navigation: #side_tab_pool active tab states → stronger "where am I" signal
   Purpose: previous 2px white inset shadow was too subtle against a dark background
   already full of white icons/text — easy to miss at a glance. Replaced with three
   redundant, more visible signals together: a filled highlight background (stronger than
   before), a thicker colored left accent bar using the app's own theme accent color
   (not white, so it doesn't blend with all the other white text/icons), and bolder text
   weight — so the active tab reads correctly even in peripheral vision, not just on
   close inspection.
*/
#sidebar_slide_panel #side_tab_pool .ez_tab.active_display_section_btn,
#sidebar_slide_panel #side_tab_pool .ez_tab.active_top_sel_btn,
#sidebar_slide_panel #side_tab_pool .ez_tab.active_home_tab {
    background: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    font-weight: 600;
    box-shadow: inset 4px 0 0 0 var(--ezinq_theme_color, #4a7fc9);
}

/* Navigation: #side_action_pool .ez_action → pill-shaped indented action buttons
   Purpose: previously styled identically to tab rows (full-bleed, no radius, thin divider) —
   made them visually distinct "buttons" rather than "list rows" per the tab/action zone
   distinction: filled pill background, rounded corners, inset from the drawer edges on both
   sides (more on the left, reinforcing "these are a secondary/indented zone" per user
   preference), with vertical breathing room between each pill instead of an edge-to-edge
   divider line (dividers read as "menu", pills read as "controls").
*/
#sidebar_slide_panel #side_action_pool {
    padding: 4px 16px 4px 28px;
    gap: 6px;
}

#sidebar_slide_panel #side_action_pool .ez_action,
#sidebar_slide_panel #side_action_pool button {
    color: white !important;
    background: rgba(255, 255, 255, 0.08) !important;
    text-align: left;
    width: 100%;
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 12px 16px !important;
    font-size: 14px;
    border-radius: 10px !important;
    border-bottom: none;
}

#sidebar_slide_panel #side_action_pool .ez_action:hover {
    background: rgba(255, 255, 255, 0.18) !important;
}
/* Navigation: #side_tab_pool/#side_action_pool .dropdown-toggle → drawer height override
   Purpose: desktop's shared rule in the button-repositioning CSS file fixes height:32px for
   its compact pill layout. That id-selector rule still matches once the pools are relocated
   into the drawer by setupSlidingDrawer(), fighting the drawer's own 14px/16px button padding
   and making dropdown-toggle buttons (Exports/More Upload/Organize) visibly shorter than plain
   buttons in the same list. Overridden here so dropdown triggers use the same auto-height,
   same-padding sizing as every other drawer button. */
#sidebar_slide_panel #side_tab_pool .dropdown-toggle,
#sidebar_slide_panel #side_action_pool .dropdown-toggle {
    height: auto !important;
    padding: 14px 16px !important;
    width: 100%;
    justify-content: flex-start;
}

/* Card section titles inside panel */
#sidebar_slide_panel .card-section-title h6 {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 12px 0 4px 0;
}

#sidebar_slide_panel .card,
#sidebar_slide_panel .card-body {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* ── Backdrop ── */
#sidebar_slide_backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    width: 100dvw;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#sidebar_slide_backdrop.sidebar_slide_backdrop--visible {
    opacity: 1;
    pointer-events: all;
}

#sidebar_drawer_section .sidebar_drawer_separator {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    color: rgba(0, 0, 0, 0.4);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#sidebar_drawer_section .sidebar_drawer_separator::before,
#sidebar_drawer_section .sidebar_drawer_separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(0, 0, 0, 0.15);
}

#sidebar_slide_panel .btn_danger {
    color: white !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    text-align: left !important;
    width: 100% !important;
    padding: 8px 0 !important;
}

#sidebar_slide_panel .top_menu {
    flex-direction: column !important;
    padding: 0 16px;
    margin-bottom: 8px;
}

/* Navigation: 3-zone subtle background separation
   Purpose: nav-links, the 4 persistent main-nav buttons, and the Sections/Actions pools
   are structurally distinct zones already, but shared one flat background — relying only
   on spacing/labels to signal the grouping. A very subtle tone-shift per zone reinforces
   the existing structure at a glance, without competing visually with the stronger
   tab-vs-action pill/list distinction inside the pools (kept deliberately weaker than that).
*/
#sidebar_slide_panel .top_menu {
    background: rgba(0, 0, 0, 0.08);
}

#sidebar_slide_panel #main_nav_sidebar_inner {
    background: rgba(255, 255, 255, 0.02);
}

#sidebar_slide_panel #side_tab_pool,
#sidebar_slide_panel #side_action_pool {
    background: rgba(255, 255, 255, 0.045);
}
/*background subtle changes on the drawer menu ending*/
#sidebar_slide_panel .top_menu {
    height: auto !important;
    overflow: visible !important;
}

/* ── Sticky search bar at narrow viewports ── */
#sticky_search_wrapper {
    display: none;
    position: sticky;
    top: var(--top_navbar_height);
    z-index: 100;
    padding: 6px 10px 0 10px;
    width: 100%;
}
/* ── Dropdown menus inside panel — dark-background variant ── */
#sidebar_slide_panel .public_dropdown_ul {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    margin-top: 4px;
}

#sidebar_slide_panel .public_dropdown_ul li a,
#sidebar_slide_panel .public_dropdown_ul li label{
    color: rgba(255, 255, 255, 0.75);
    padding: 8px 12px;
}
/* Navigation: #sidebar_slide_panel #drawer_notif_icons_row .dropdown-menu → base text color
   Purpose: Bootstrap's .dropdown-menu sets color:#212529 directly on itself (not
   inherited from elsewhere) — every plain-text descendant with no color rule of its
   own (e.g. the untitled "full_info_hov" span used across these 6 dropdowns) inherits
   that dark value, invisible against our dark drawer background. Overriding color at
   this ancestor level fixes every such descendant at once via inheritance, without
   needing to chase each individual inner class name.
*/
#sidebar_slide_panel #drawer_notif_icons_row .dropdown-menu {
    color: rgba(255, 255, 255, 0.75) !important;
}
/* Navigation: #sidebar_slide_panel #drawer_notif_icons_row .full_info_hov → inline style override
   Purpose: createUnreadMessageDropdown() (html_renderer.js) hardcodes an inline
   style="color:black" on this specific span — inline styles always beat inherited
   values, so step 2's ancestor fix can't reach it. Scoped under our own wrapper
   rather than the bare legacy class name for clarity.
*/
#sidebar_slide_panel #drawer_notif_icons_row .full_info_hov {
    color: rgba(255, 255, 255, 0.75) !important;
}
#sidebar_slide_panel .public_dropdown_ul li:hover:not(:has(a.btn_danger)) {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: white;
}

#sidebar_slide_panel .public_dropdown_ul li:hover a,
#sidebar_slide_panel .public_dropdown_ul li:hover label {
    color: white;
}

#sidebar_slide_panel .public_dropdown_ul li a.btn_danger {
    color: #ff8a80;
    background: transparent;
}

#sidebar_slide_panel .public_dropdown_ul li:hover a.btn_danger {
    color: white;
    background: rgba(255, 138, 128, 0.4);
}

#sidebar_slide_panel .dropdown-menu:not(:where(#drawer_notif_icons_row .dropdown-menu)) {
    position: static !important;
    transform: none !important;
    display: none;
    width: 100%;
    border: none;
    box-shadow: none;
}


#sidebar_slide_panel .dropdown-menu.show {
    display: block;
}
/* Empty pool rows collapse entirely inside the mobile drawer — no reserved height,
   no placeholder text, unlike desktop's "reserve space" behavior */
#sidebar_slide_panel .pool_empty_in_drawer {
    display: none !important;
}
@media screen and (max-width: 768px) {
    #sticky_search_wrapper:not(:empty) {
        display: block;
    }

    #sticky_search_wrapper #db_search_input {
        font-size: 16px !important;
    }
}
#sidebar_slide_panel #side_tab_pool,
#sidebar_slide_panel #side_action_pool {
    gap: 0 !important;
}

#sidebar_slide_panel #side_tab_pool > *,
#sidebar_slide_panel #side_action_pool > * {
    margin: 0 !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

/* Navigation: .section_row_two_tab_container/.section_action_dock_container display fix
   Purpose: previous unconditional "display: flex !important" beat jQuery's inline
   display:none on hidden sections' child rows (all sections share this one class),
   forcing every section's catalog child row visible simultaneously inside the drawer —
   desktop was unaffected since no competing !important rule exists there. Guard added
   so the flex-layout override only applies to elements NOT explicitly hidden inline,
   letting handleButtonVisibility()'s real show/hide state keep winning as intended. */
   #sidebar_slide_panel .section_row_two_tab_container:not([style*="display: none"]):not(.hide_at_opening),
   #sidebar_slide_panel .section_action_dock_container:not([style*="display: none"]):not(.hide_at_opening) {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    width: 100%;
    gap: 0;
}

#sidebar_slide_panel .section_row_two_tab_container > * {
    width: 100%;
    flex: 0 0 auto;
}

/* Navigation: .section_action_dock_container → nested action-button gap fix
   Purpose: matches the specificity of the existing gap:0 rule above (same
   :not() qualifiers) so this override actually wins the cascade instead of
   losing to it silently — a plain class selector here has lower specificity
   than that :not()-qualified rule and was being ignored. */
#sidebar_slide_panel .section_action_dock_container:not([style*="display: none"]):not(.hide_at_opening) {
    gap: 8px;
}

/* Navigation: .section_row_two_tab_container → child-tab indentation
   Purpose: child tabs (e.g. Catalog under Lists/All/Notes/etc.) sat flush-left, same
   level as their parent tabs, with no visual hierarchy cue in the drawer — desktop
   already shows this hierarchy via row placement/CSS. Indent sits between parent (0)
   and action-pool indent (28px), signaling "nested under a parent" without reaching
   as deep as the actions tier. Applied to the buttons inside the row via padding-left
   (not margin, matching how .section_action_dock_container indents its own children). */
#sidebar_slide_panel #side_tab_pool .section_row_two_tab_container .ez_tab,
#sidebar_slide_panel #side_tab_pool .section_row_two_tab_container button {
    padding-left: 30px !important;
}

#sidebar_slide_panel .section_action_dock_container {
    padding: 4px 16px 4px 28px;
    gap: 8px;
}

#sidebar_slide_panel .section_action_dock_container > * {
    width: 100%;
    flex: 0 0 auto;
}

/* Navigation: gap:0 (added during overlap fix) → restore action pool spacing
   Purpose: that earlier rule applied gap:0 to BOTH pools with !important, which beat
   step 2's gap:6px on #side_action_pool regardless of source order. Tab pool keeps gap:0
   (its rows use divider lines instead), action pool gets its intended pill spacing back. */
#sidebar_slide_panel #side_action_pool {
    gap: 8px !important;
}

/* Navigation: #side_action_pool .dropdown-menu.show → bottom spacing when open
   Purpose: open dropdowns render inline (position:static) inside their own wrapper div,
   so their last item had no space before the next action pill began. */
#sidebar_slide_panel #side_action_pool .dropdown-menu.show {
    padding-bottom: 8px;
}

/* Navigation: .btn_danger inside #side_action_pool → restore red styling
   Purpose: step 2's pill background rule (#side_action_pool .ez_action/button) has higher
   specificity than the existing .btn_danger rules, silently overriding their red color.
   This rule matches that specificity so danger buttons win the color back. */
#sidebar_slide_panel #side_action_pool .btn_danger {
    background: rgba(255, 138, 128, 0.15) !important;
    color: #ff8a80 !important;
}

#sidebar_slide_panel #side_action_pool .btn_danger:hover {
    background: rgba(255, 138, 128, 0.28) !important;
}

/* Navigation: #side_action_pool .btn_danger → dropdown-item hover text color fix
   Purpose: the two rules above (Issue 1 fix) apply !important color:#ff8a80 to every
   .btn_danger inside the action pool, including danger items nested inside dropdowns
   (Delete Box/Remove Item/Delete Pack File etc.). That !important beat the existing
   .public_dropdown_ul li:hover a.btn_danger { color: white; } rule, which has no
   !important — so on hover the icon turned white (driven by a separate, unaffected
   selector) while the text stayed red. This restores white text specifically for the
   hovered dropdown-item case, without touching the danger button's resting red state.
*/
#sidebar_slide_panel #side_action_pool .public_dropdown_ul li:hover a.btn_danger {
    color: white !important;
}

/* Navigation: #sidebar_slide_panel_inner (flex column, fixed height) → #side_tab_pool / #side_action_pool
   Purpose: these two pools are flex ITEMS of the panel's outer flex container (#sidebar_slide_panel_inner),
   not just flex containers in their own right. Without flex-shrink:0 here, the outer flex layout
   compresses each pool's own box below its content's real height whenever total drawer content
   exceeds the panel's fixed height — content still paints (overflow:visible) but the pool's shrunk
   box causes the next sibling pool to start too early, producing the tab/action pool text overlap.
   flex-shrink:0 forces #sidebar_slide_panel_inner's own overflow-y:auto to handle the excess via
   scrolling instead of shrinking children. */
#sidebar_slide_panel #side_tab_pool,
#sidebar_slide_panel #side_action_pool {
    flex-shrink: 0;
}
/* Navigation: #drawer_notif_icons_row .dropdown-menu → absolute-overlay exception
   Purpose: #sidebar_slide_panel .dropdown-menu's general rule forces position:static
   (correct for #side_tab_pool/#side_action_pool's intentionally-inline dropdowns like
   Exports/Organize). These 6 notification dropdowns (warning/messages/contact/orders/
   guide) are floating overlays by design, same as on desktop — pushing drawer content
   down to accommodate them is wrong. Scoped exception restores absolute positioning
   and gives the outer wrapper (not just .public_dropdown_ul inside it) a dark
   background matching the drawer theme, since Bootstrap's default .dropdown-menu
   white background was showing through untouched until now.
*/
#sidebar_slide_panel #drawer_notif_icons_row .dropdown-menu {
    position: absolute !important;
    background: #1a2a4a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    border-radius: 8px;
    z-index: 100000;
}

#sidebar_slide_panel #drawer_notif_icons_row .dropdown-menu.show {
    display: block;
}
/* Navigation: #drawer_notif_icons_row → relocated top-navbar icons
   Purpose: horizontal icon row at the very top of the drawer, mirroring how these
   icons looked in the navbar (icon-only, inline) rather than a vertical list —
   keeps them visually distinct from the Home/Settings nav-link rows below. */
#drawer_notif_icons_row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#drawer_notif_icons_row:empty {
    display: none;
    padding: 0;
    border-bottom: none;
}

#drawer_notif_icons_row > li {
    list-style: none;
}

#drawer_notif_icons_row a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.75) !important;
}

#drawer_notif_icons_row a:hover {
    background: rgba(255, 255, 255, 0.08);
}
/* Navigation: #sidebar_slide_panel .guide_nav_dropdown → width constraint
   Purpose: unlike the other 5 notif dropdowns, guide_nav_dropdown carries no
   dropdown_common/dropdown_exception class, so it never received our earlier
   width:100% drawer override — its own base rule only sets min-width:200px,
   no width/max-width, so the box shrink-fits to content instead of wrapping
   against a boundary. Without this, min-width:0/white-space:normal on its
   .icon_text_inline children have no container edge to wrap against.
*/
#sidebar_slide_panel .dropdown_common,
#sidebar_slide_panel .dropdown_exception,
#sidebar_slide_panel .guide_nav_dropdown {
    width: calc(100vw - 40px) !important;
    max-width: 280px;
    min-width: 0 !important;
}

/* Navigation: #sidebar_slide_panel .guide_nav_dropdown → text contrast fix
   Purpose: .guide_nav_dropdown li sets color:#222 (dark), meant for its normal light
   dropdown background. Drawer's .public_dropdown_ul gives dropdowns a dark background
   (rgba(0,0,0,0.2)) — dark-on-dark was unreadable. Scoped override only for this
   location; the dropdown's original light-background appearance elsewhere is untouched.
*/
#sidebar_slide_panel .guide_nav_dropdown .public_dropdown_ul li {
    color: rgba(255, 255, 255, 0.75);
}

#sidebar_slide_panel .guide_nav_dropdown .guide_nav_help_item {
    color: rgba(255, 255, 255, 0.9);
    border-top-color: rgba(255, 255, 255, 0.15);
}
/* Navigation: #sidebar_slide_panel #drawer_notif_icons_row .public_dropdown_ul → remove double background
   Purpose: the general #sidebar_slide_panel .public_dropdown_ul rule (background +
   margin-top) predates step 5f's fix, back when .dropdown-menu itself had no
   background — the ul was the only color source. Step 5f gave the outer
   .dropdown-menu wrapper its own solid dark background for these 6 relocated
   dropdowns specifically, so the ul's separate semi-transparent layer + margin
   gap now shows as a visible mismatched band. Scoped to just these dropdowns —
   #side_tab_pool/#side_action_pool's dropdowns are untouched, still using the
   original rule as designed.
*/
#sidebar_slide_panel #drawer_notif_icons_row .public_dropdown_ul {
    background: transparent;
    margin-top: 0;
}
/* Navigation: #sidebar_slide_panel .guide_nav_dropdown span → wrap override
   Purpose: legacy global "li span { white-space: nowrap; }" rule forces all
   li>span text to a single line app-wide — unknown original purpose, left
   untouched everywhere else. Overridden only for guide dropdown's video-title/
   help spans, which need to wrap inside the narrow drawer.
*/
#sidebar_slide_panel .guide_nav_dropdown li span {
    white-space: normal;
}
/* Navigation: #drawer_notif_icons_row .dropdown-menu → explicit drop-below position
   Purpose: the general #sidebar_slide_panel .dropdown-menu rule sets transform:none
   !important, which discards Bootstrap/Popper's computed positioning offset (Popper
   positions via transform, not top/left). Combined with the icon wrappers' own
   position:relative, the dropdown fell back to (0,0) — directly on top of its icon
   instead of below it. This gives it an explicit top offset instead, scoped only to
   these 6 relocated dropdowns (the pool dropdowns rely on the general static/inline
   behavior intentionally and are untouched).
*/
#sidebar_slide_panel #drawer_notif_icons_row .dropdown-menu {
    margin-top: 6px;
}
/* Navigation: #sidebar_slide_panel .public_dropdown_ul a → force full-width flex item
   Purpose: .public_dropdown_ul a { display: flex } (needed for multi-column items like
   home_dropitem_img_div/home_dropdown_comp/dropdown_item_btn's 13%/72%/15% layout) makes
   the <a> a flex item — but without an explicit width, a flex item only grows to fit its
   content, not its parent's full width. That left multi-column dropdown items rendered
   at ~36px instead of the menu's real 160px+ width, crushing the percentage-based
   children into a sliver. width:100% forces the <a> to actually fill the menu. */
#sidebar_slide_panel .public_dropdown_ul a {
    width: 100%;
}


/* ================================================================
   SUPPLIER MODAL CARD VIEW — sticky buyer/supplier header
   and reduced note textarea height (card mode only)
   ================================================================ */
#display_supplier_for_item_modal.modal--card-mode .supp_modal_card_row,
#display_supplier_readonly_modal.modal--card-mode .supp_modal_card_row {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--background_color_div_light_btn_active);
    padding: 8px 0;
    gap: 6px;
}

#display_supplier_for_item_modal.modal--card-mode .supp_modal_card_header,
#display_supplier_readonly_modal.modal--card-mode .supp_modal_card_header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    font-size: 12px;
}

#display_supplier_for_item_modal.modal--card-mode .supp_modal_card_date,
#display_supplier_readonly_modal.modal--card-mode .supp_modal_card_date {
    color: var(--color_light_text);
}

#display_supplier_for_item_modal.modal--card-mode .supp_modal_card_qty,
#display_supplier_readonly_modal.modal--card-mode .supp_modal_card_qty {
    color: var(--color_light_text);
}

#display_supplier_for_item_modal.modal--card-mode .supp_modal_card_body,
#display_supplier_readonly_modal.modal--card-mode .supp_modal_card_body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 0 4px;
}

#display_supplier_for_item_modal.modal--card-mode .supp_modal_card_col,
#display_supplier_readonly_modal.modal--card-mode .supp_modal_card_col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background-color: var(--background_color_div_light);
    border-radius: var(--li_border_radius);
}

#display_supplier_for_item_modal.modal--card-mode .supp_modal_card_party_label,
#display_supplier_readonly_modal.modal--card-mode .supp_modal_card_party_label {
    font-size: 10px;
    font-weight: 500;
    color: var(--color_light_text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#display_supplier_for_item_modal.modal--card-mode .supp_modal_card_party_name,
#display_supplier_readonly_modal.modal--card-mode .supp_modal_card_party_name {
    font-size: 12px;
    font-weight: 500;
}

#display_supplier_for_item_modal.modal--card-mode .supp_modal_card_price,
#display_supplier_readonly_modal.modal--card-mode .supp_modal_card_price {
    font-size: 11px;
    color: var(--color_light_text);
}

#display_supplier_for_item_modal.modal--card-mode .supp_modal_card_note_label,
#display_supplier_readonly_modal.modal--card-mode .supp_modal_card_note_label {
    font-size: 10px;
    color: var(--color_light_text);
    margin-top: 2px;
}

#display_supplier_for_item_modal.modal--card-mode .supp_modal_sticky_header,
#display_supplier_readonly_modal.modal--card-mode .supp_modal_sticky_header {
    position: sticky;
    top: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: var(--background_color_div_light_btn_active);
    padding: 6px 8px;
    border-radius: var(--li_border_radius);
    margin-bottom: 6px;
}

#display_supplier_for_item_modal.modal--card-mode .supp_modal_sticky_label,
#display_supplier_readonly_modal.modal--card-mode .supp_modal_sticky_label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color_light_text);
    text-align: center;
}
/*========== COPY PRODUCT MODAL — FORM LAYOUT ==========*/
.copy_item_layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.copy_item_image_panel {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.copy_item_image_panel > img {
    width: 100%;
    border-radius: 5px;
    display: block;
}

.copy_item_fields_panel {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.copy_field_row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.copy_field_row label {
    font-weight: 600;
    font-size: 13px;
}

.copy_field_row input,
.copy_field_row textarea {
    width: 100%;
}

.copy_field_assigned_note {
    font-size: 12px;
    color: var(--muted_text_color, #888);
}

.copy_field_assigned_note a {
    margin-left: 4px;
}

.copy_field_keep_assignment {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px;
    font-size: 12px;
    color: var(--muted_text_color, #888);
    margin-top: 2px;
    cursor: pointer;
}

.copy_field_keep_assignment input[type="checkbox"] {
    flex: 0 0 auto !important;
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
}

.copy_field_keep_assignment span {
    flex: 0 0 auto !important;
    white-space: nowrap;
}
.copy_gallery_strip {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.copy_gallery_thumb {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid var(--border_color, #ddd);
}
@media (max-width: 767px) {
    .copy_item_layout {
        flex-direction: column;
    }

    .copy_item_image_panel {
        flex: 0 0 auto;
        width: 100%;
        max-width: 260px;
        margin: 0 auto;
    }

    .copy_item_fields_panel {
        width: 100%;
        flex: 1 1 auto;
    }

    .copy_field_row input,
    .copy_field_row textarea {
        width: 100%;
        box-sizing: border-box;
    }
}

/*========== END COPY PRODUCT MODAL ==========*/
/* ============================================================
   BOTTOM NAV BAR — narrow viewport (<576px) native-app-style
   bottom navigation. Replaces #mini_nav_sidebar (vertical strip).
   Navigation: MainNavManager.setupBottomNavBar() (step 3) will
   populate/control this. Holds the 4 persistent main-nav buttons
   + hamburger toggle, fixed to viewport bottom.
   ============================================================ */
#bottom_nav_bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 56px;
    background: #ffffff;
    border-top: 1px solid #e5e8eb;
    z-index: 100;
    align-items: center;
    justify-content: space-around;
    padding: 4px 0;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}

.bottom_nav_btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 20%;
    height: 100%;
    border: none;
    background: transparent;
    color: #8a97a3;
    cursor: pointer;
    flex-shrink: 0;
}

.bottom_nav_btn.bottom_nav_active {
    /* Changed: was var(--ezinq_theme_color) — matches sidebar's active color
       (#0f1419) now that the sidebar was switched from dark-theme to white bg */
    color: #0f1419;
}

.bottom_nav_btn .ezinq-svg-icon {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

/* Navigation: same visual weight fix as .active_main_nav_btn .ezinq-svg-icon
   Purpose: thin-stroke icons look too light at active color otherwise. See
   sidebar CSS for full explanation — identical technique, same reasoning. */
.bottom_nav_btn.bottom_nav_active .ezinq-svg-icon {
    filter: drop-shadow(0 0 0.4px currentColor) drop-shadow(0 0 0.4px currentColor);
}

/* Must match BREAKPOINTS.mobile_break_point in const_var.js */
@media screen and (max-width: 768px) {
    #bottom_nav_bar {
        display: flex;
    }
}
/* Navigation: #bottom_nav_bar .custom-toggler → icon color override
   Purpose: the shared .navbar-toggler-icon background-image SVG is hardcoded
   rgba(255,255,255,0.5) (light), meant for the dark top navbar. #bottom_nav_bar
   has a white background, making that icon invisible there. Same icon, dark stroke,
   scoped only to this location — top navbar's toggler (if ever reused elsewhere)
   keeps its original light version untouched.
*/
#bottom_nav_bar .custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox=%270 0 32 32%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath stroke=%27rgba%28138,151,163, 0.9%29%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-miterlimit=%2710%27 d=%27M4 8h24M4 16h24M4 24h24%27/%3E%3C/svg%3E");
}
.side_button_pool {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

@keyframes pool_content_enter {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pool_refreshing {
    animation: pool_content_enter 0.25s ease-out;
}

#side_tab_pool .ez_tab {
  background: transparent;
  border: none;
  color: #444;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 13px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

#side_tab_pool .ez_tab:hover {
    background-color: #cfe2f3 !important;
    color: #1f3a5f !important;
}

#side_action_pool .ez_action {
    background: #4a7fc9;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 13px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: background-color 0.2s ease;
}

#side_action_pool .ez_action:hover {
    background: #2f5a99 !important;
}

#side_action_pool .ez_action.btn_danger {
    background: #d93025;
}

#side_action_pool .ez_action.btn_danger:hover {
    background: #b7261b!important;
}

/*specifically for packing/account button rows to display flex*/
.section_row_two_tab_container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.section_action_dock_container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* Prevent tab/action pools from collapsing in height when empty — reserves the
   same vertical space as when buttons are present, shows muted placeholder text
   instead (injected/removed by _setPoolEmptyState() in MainNavManager.js) */
#side_tab_pool,
#side_action_pool {
    padding: 10px 16px;
    border-radius: 8px;
    min-height: 56px;
}
.pool_empty_state {
    color: var(--text_muted_color);
    font-size: 13px;
    font-style: italic;
    width: 100%;
    text-align: center;
}
#side_tab_pool {
    background: #f0f3f9;
    /* Subtle separator line between tab row and action row, in addition to their
   existing background color difference */
    border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.08));
}

#side_action_pool {
    background: #f9f6f0;
}

#side_tab_pool .ez_tab,
#side_action_pool .ez_action,
#side_tab_pool button,
#side_action_pool button {
    border-radius: 6px !important;
}

#side_tab_pool .dropdown-toggle,
#side_action_pool .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    height: 32px;
    padding: 0 12px;
    box-sizing: border-box;
    vertical-align: middle;
}

#side_tab_pool .dropdown-toggle::after,
#side_action_pool .dropdown-toggle::after {
    margin-left: 4px;
    flex-shrink: 0;
}

#side_tab_pool .side_display_btn,
#side_action_pool .side_display_btn {
    width: auto;
}

.section_row_two_tab_container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.section_action_dock_container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: 100%;
}

/* Deemphasize company filter selects (packing/container): dedicated wrapper divs
   pushed to far right of packing_action_row via margin-left:auto on the wrapper
   itself (not the inner select), so the row stretches correctly regardless of
   wrapping behavior. Height/padding aligned with other action buttons since these
   are secondary filter controls, not primary actions. */
#packing_secondary_controls,
#container_secondary_controls {
    margin-left: auto;
}

#pack_company_select,
#con_company_select {
    padding: 6px 12px;
    font-size: 13px;
    height: auto;
}
/* Contact radio buttons: pair each radio tightly with its own label,
   let the pool's existing gap handle spacing between separate radio wrappers */
#side_tab_pool .side_disp_btn_div:has(input[type="radio"]) {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
#side_tab_pool .top_gap,
#side_action_pool .top_gap {
    margin-top: 0;
}
/* Selected tab indicator: underline instead of filled background color */
#side_tab_pool .ez_tab.active_display_section_btn,
#side_tab_pool .ez_tab.active_top_sel_btn,
#side_tab_pool .ez_tab.active_home_tab,
#side_tab_pool .side_disp_btn_div input[type="radio"]:checked + label {
    border-bottom: 2px solid var(--ezinq_theme_color);
}
#side_tab_pool .active_top_sel_btn svg,
#side_tab_pool .active_display_section_btn svg,
#side_tab_pool .active_home_tab svg {
    stroke: currentColor;
    stroke-width: 12;
}
#side_tab_pool .side_disp_btn_div,
#side_tab_pool .top_gap {
    text-align: left;
}
/* Organize dropdown: thin divider + muted styling to de-emphasize the rarely-used
   second item, without hiding it */
.organize_dropdown_divider {
    height: 1px;
    background: var(--border, #e0e0e0);
    margin: 4px 8px;
    padding: 0 !important;
}

.organize_dropdown_deemphasized {
    opacity: 0.6;
    font-size: 12px;
}

.organize_dropdown_deemphasized:hover {
    opacity: 1;
}
/* Dropdown trigger shows the same "you are here" underline when any item inside
   its dropdown is currently active, even while the dropdown itself is closed */
.dropdown:has(.active_display_section_btn) > .dropdown-toggle {
    box-shadow: inset 0 -2px 0 0 var(--ezinq_theme_color);
}
/* Navigation: #side_tab_pool → child-tab-row full-width wrap + connector accent
   Purpose: packing_tab_row/account_tab_row (and any future child-tab row) were plain
   flex items inside #side_tab_pool's flex-wrap row, so they sat beside the fixed
   parent buttons instead of below them. flex-basis:100% forces a line break, same
   technique .section_action_dock_container already uses. The ::before elbow marks
   the row as a child of the currently active parent rather than a disconnected line.
*/
#side_tab_pool .section_row_two_tab_container {
    flex-basis: 100%;
    width: 100%;
    margin-top: 4px;
}
/* ── Main Navigation Sidebar ── */
/* Navigation: #main_nav_sidebar → flex column
   Purpose: enables margin-top:auto on the ICP badge sibling below, pushing it to
   the bottom of the sidebar's own scroll area. height/overflow-y:auto untouched —
   independent scroll behavior is preserved exactly as before. */
#main_nav_sidebar {
    background-color: var(--background_color_white, #fff);
    height: calc(100vh - var(--top_navbar_height));
    overflow-y: auto;
    padding: 8px 0;
}

/* Navigation: #main_nav_sidebar flex layout → scoped to md breakpoint only
   Purpose: Bootstrap's d-md-block (already on this element) only applies
   display:block from 768px up — below that, d-none's display:none !important
   must win so the sidebar stays hidden on mobile (bottom nav / drawer take
   over there). Previous version applied flex unconditionally, which beat
   d-none at ALL widths due to ID > class specificity, breaking the mobile
   layout. Media query keeps our override confined to the same range Bootstrap
   itself uses for d-md-block, so d-none is untouched below 768px. */
@media (min-width: 768px) {
    #main_nav_sidebar {
        display: flex !important;
        flex-direction: column;
    }
}

/* Navigation: #main_nav_sidebar_icp_container → bottom-anchored placement inside #main_nav_sidebar
   Purpose: this container (not the badge itself) is the direct flex item of
   #main_nav_sidebar, so margin-top:auto belongs here to consume remaining flex
   space and push the badge down — auto margins only work on the flex item itself,
   not on a nested descendant, which was the bug in the previous version. */
#main_nav_sidebar_icp_container {
    margin-top: auto;
}

.icp-badge--sidebar-fixed {
    padding: 12px 16px;
    border-top: 1px solid var(--light_border_grey, #e0e0e0);
}

#main_nav_sidebar_inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
}

.main_nav_btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    /* Changed: was 10px 12px — taller, more generous padding matching Twitter's
       sidebar nav item weight/click-target size */
    padding: 12px 16px;
    border: none;
    border-radius: 8px;
    background: transparent;
    /* Changed: was rgba(255,255,255,0.6) for dark bg — dark gray text on white now */
    color: var(--text_color_muted, #536471);
    text-align: left;
    cursor: pointer;
    /* Added: primary navigation reads larger than body text, matching Twitter's
       sidebar item size */
    font-size: 16px;
    transition: background 0.2s, color 0.2s;
}

.main_nav_btn:hover {
    /* Changed: was rgba(255,255,255,0.1)/white text — light gray hover on white,
       matches Twitter's sidebar hover exactly */
    background: rgba(15, 20, 25, 0.1);
    color: #0f1419;
}

.main_nav_btn.active_main_nav_btn {
    /* Changed: was transparent bg/black text (Twitter-style, bold text only) —
       now filled with the app's theme color per request, white text for contrast. */
    background: var(--ezinq_theme_color);
    color: #fff;
    font-weight: 700;
    border-left: none;
}

.main_nav_btn .ezinq-svg-icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
    flex-shrink: 0;
}

/* Navigation: .active_main_nav_btn .ezinq-svg-icon → visual weight boost
   Purpose: thin-stroke icons (e.g. "users") read as visually lighter than the
   bold text next to them even at the identical color value — more white space
   relative to ink in the glyph. drop-shadow at 0 blur/offset adds a hairline
   fill along the glyph edges in the same color, making thin strokes read as
   bolder without touching the actual SVG paths. Only applied on active state —
   resting/hover icons don't need the extra weight. */
.main_nav_btn.active_main_nav_btn .ezinq-svg-icon {
    filter: drop-shadow(0 0 0.4px currentColor) drop-shadow(0 0 0.4px currentColor);
}

/* Scoped to main nav only — does not touch generic .btn_icon_text_wrapper,
   which stays untouched for its other uses elsewhere in the app. */

.main_nav_btn .btn_icon_text_wrapper {
    /* Explicitly keep as row, no wrap on the flex container itself —
       wrapping happens INSIDE the text span, not by dropping it to a new line */
    flex-wrap: nowrap;
    align-items: flex-start;
    /* so icon aligns with first line of wrapped text, not vertically centered against a taller multi-line block */
}

.main_nav_btn .btn_icon_text_wrapper>span[data-icon] {
    /* Icon never shrinks or wraps — stays fixed size, fixed position */
    flex-shrink: 0;
}

.main_nav_btn_text {
    /* Text is the only flexible piece: allowed to shrink and wrap
       within its own column, while staying beside the icon on row 1 */
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    word-break: break-word;
}

/* ── Tab Row ── */
#home_tab_row {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 1px solid var(--light_border_grey, #e0e0e0);
    background: var(--background_color_white, #fff);
    padding: 0 16px;
}

.home_tab_btn {
    padding: 10px 16px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text_color_muted, #6b7280);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.home_tab_btn:hover {
    color: var(--ezinq_theme_color, #1a2a4a);
}

.home_tab_btn.active_home_tab {
    color: var(--ezinq_theme_color, #1a2a4a);
    border-bottom: 2px solid var(--ezinq_theme_color, #1a2a4a);
    font-weight: 600;
}
/* ============================================================
   COLLAPSIBLE MOBILE HEADER — narrow viewport (<=768px) only
   Breakpoint must match BREAKPOINTS.mobile_break_point in const_var.js
   Controlled by: MainNavManager.setupCollapsibleHeader()
   Applies class "mobile_header_collapsed" to #details_div to toggle state.
   Each of the 4 stack elements animates independently (Option A — no shared
   wrapper, since .top_btn_cont/#top_button_section live inside per-section
   markup and can't share a wrapper with the universal 3 elements).
   All 4 share identical transition timing so they read as one motion.

   Consolidation note: existing 768px rules affecting the same elements
   (#display_info_section, .top_btn_cont, #details_div) currently live
   scattered in other CSS files — candidates to migrate here later,
   see chat notes.
   ============================================================ */
/* Navigation: #mobile_header_collapsed_bar → hidden by default
   Purpose: base state outside the mobile media query — bar only exists at
   narrow viewports. Media query below overrides to display:flex. */
#mobile_header_collapsed_bar {
    display: none;
}

/* Navigation: #mobile_header_collapsed_bar.no_collapsible_content
   Purpose: JS-driven hide — set by MainNavManager.handleButtonVisibility() via
   _hasCollapsibleContent() on every navigation. Needed because the mobile media
   query below unconditionally sets display:flex; this class must win over that
   regardless of viewport. */
#mobile_header_collapsed_bar.no_collapsible_content {
    display: none !important;
}

/* Navigation: #details_div → positioning context for floating chevron
   Purpose: #mobile_header_collapsed_bar is now position:absolute, anchored to
   #details_div's top-right corner. Needs an explicit position on the ancestor
   or the browser would anchor to the nearest positioned ancestor further up
   the tree instead (unpredictable). */
#details_div {
    position: relative;
}



/* Navigation: collapsible header → transitionable base state (expanded)
   Purpose: transition property must always be present so toggling the collapsed
   class animates smoothly. overflow:hidden is NOT applied here unconditionally —
   #top_button_section (and #pack_file_tab_row/#con_file_tab_row) can contain a
   "More" tab dropdown (see CustomFilesManager/PackingManager) whose menu needs to
   render OUTSIDE this box when open. overflow:hidden is only actually required
   while collapsed/transitioning (see the .mobile_header_collapsed rule below,
   which sets it explicitly there) — applying it permanently here was clipping the
   dropdown even when fully expanded and idle. */
#display_info_section,
.top_btn_cont,
#top_button_section,
#pack_file_tab_row,
#con_file_tab_row {
    transition: max-height 0.18s ease-out,
        padding 0.18s ease-out,
        min-height 0.18s ease-out,
        border-width 0.18s ease-out;
}

#display_info_section {
    max-height: 200px;
}

.top_btn_cont,
#top_button_section {
    max-height: 300px;
}

/* Navigation: #side_tab_pool / #side_action_pool → mobile-only collapse
       Purpose: on mobile these are relocated into the slide-out drawer
       (setupSlidingDrawer()), so collapsing them still leaves them reachable.
       On desktop they sit in the main content flow with no drawer fallback,
       so collapsing would hide always-needed action buttons entirely —
       excluded from the unconditional rule above, scoped to mobile only. */
@media screen and (max-width: 768px) {

    #side_tab_pool,
    #side_action_pool {
        overflow: hidden;
        transition: max-height 0.18s ease-out,
            padding 0.18s ease-out,
            min-height 0.18s ease-out,
            border-width 0.18s ease-out;
        max-height: 200px;
    }
}

/* Navigation: collapsible header → collapsed state
       Purpose: zeroes max-height + padding + min-height + border together so
       offsetHeight measures as true 0 for handleAreaHeightNewLayout(), per
       prior session's confirmed requirement — display:none is intentionally
       NOT used here since it can't be animated. */
#details_div.mobile_header_collapsed #display_info_section,
#details_div.mobile_header_collapsed #top_button_section,
#details_div.mobile_header_collapsed #pack_file_tab_row,
#details_div.mobile_header_collapsed #con_file_tab_row {
    max-height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-width: 0 !important;
    /* overflow:hidden moved here from the base rule above — only needed while
       actually collapsed, so it never clips an open dropdown while expanded/idle. */
    overflow: hidden !important;
}

@media screen and (max-width: 768px) {

    #details_div.mobile_header_collapsed #side_tab_pool,
    #details_div.mobile_header_collapsed #side_action_pool {
        max-height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        border-width: 0 !important;
    }
}

/* Navigation: collapsed #display_info_section → override inline height
       Purpose: InnerSectionManager.displaySection() writes inline
       height:"75px" via .css() on every section change, which beats
       max-height:0 above (inline styles win over stylesheet rules without
       !important). This forces true 0 height while collapsed, regardless of
       when displaySection() last ran — matches existing codebase precedent
       for !important overrides on JS-controlled inline styles. */
#details_div.mobile_header_collapsed #display_info_section {
    height: 0 !important;
    padding: 0 !important;
    border-bottom-width: 0 !important;
}

/* Navigation: #mobile_header_collapsed_bar → floating chevron (redesigned)
       Purpose: no longer a full-width row occupying layout space — now a small
       circular button anchored to #details_div's top-right corner via
       position:absolute, overlapping content rather than pushing it down.
       Out of document flow entirely, so it needs no entry in
       handleAreaHeightNewLayout()'s subtraction math. */
#mobile_header_collapsed_bar {
    display: flex;
    position: absolute;
    top: 0px;
    right: 14px;
    z-index: 99999;
}

#mobile_header_collapse_toggle {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    box-shadow: none;
}

.mobile_header_collapse_icon_holder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}
html.lb-disable-scrolling {
  overflow: hidden;
  /* Position fixed required for iOS. Just putting overflow: hidden; on the body is not enough. */
  position: fixed;
  height: 100vh;
  width: 100vw;
}

.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
}

.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
}

.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
  max-height: none;
  border-radius: 3px;

  /* Image border */
  border: 4px solid white;
}

.lightbox a img {
  border: none;
}

.lb-outerContainer {
  position: relative;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  border-radius: 4px;

  /* Background color behind image.
     This is visible during transitions. */
  background-color: white;
}

.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-loader {
  position: absolute;
  top: 43%;
  left: 0;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(f657825a2eeed04632b0.gif) no-repeat;
}

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

.lb-container > .nav {
  left: 0;
}

.lb-nav a {
  outline: none;
  background-image: url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
}

.lb-prev, .lb-next {
  height: 100%;
  cursor: pointer;
  display: block;
}

.lb-nav a.lb-prev {
  width: 34%;
  left: 0;
  float: left;
  background: url(0edc57ccafb3ea818597.png) left 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-prev:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-nav a.lb-next {
  width: 64%;
  right: 0;
  float: right;
  background: url(62074ac70bd3cfc10445.png) right 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-next:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-data {
  padding: 0 4px;
  color: #ccc;
}

.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}

.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}

.lb-data .lb-caption a {
  color: #4ae;
}

.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #999999;
}

.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url(0cfd6489536ec0987466.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.lb-data .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}