.btn:hover,
.btn:active,
.btn.active {
    background:var(--main-action-hover-bg);
    color:var(--main-action-hover-color);
    border-color:var(--main-action-hover-bg);
    border-radius: var(--element-radius);
}

input, button, select, textarea {
    font-family:var(--primary-font-family);
}

/* Focus states are now handled by theme files (light.css/dark.css) using :focus-visible
   This ensures keyboard users see focus indicators while mouse users don't */
input:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--accent1);
    outline-offset: 2px;
    text-decoration: none;
}

form label{
    padding-top:5px;
    margin-bottom: 2px;
    font-weight:bold;
    opacity:0.8;
    padding-bottom:5px;
}

form .switchery {
    margin-top:5px;
}

tox-edit-area,
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    height: auto;
    background-color: var(--secondary-background);
    line-height:21px;
    border: 1px solid var(--main-border-color);
    -webkit-box-shadow: var(--input-shadow);
    -moz-box-shadow: var(--input-shadow);
    box-shadow: var(--input-shadow);
    border-radius: var(--input-radius);
    padding: var(--input-padding);
    color:var(--primary-font-color);
}

input[type="text"]:read-only,
input:disabled,
.btn-primary[disabled]{
    border:none;
    box-shadow:none;
    opacity:0.4;
}

body input:focus {
    border-color:var(--main-border-color-hover);
}



/* Tags */

body div.tagsinput {
    border:1px solid transparent;
    overflow:hidden;
}

body div.tagsinput:hover,
body div.tagsinput:focus,
body input[type=text].main-title-input.main-title-input:hover,
body input[type=text].main-title-input.main-title-input:focus{
    border: 1px solid var(--main-border-color-hover);
    border-radius:var(--box-radius);
}

body div.tagsinput.readonly {
    display:inline-block;
    width:auto;
    padding:0px;
    border:0px !important;
    height:auto !important;
    background:none;
}

body .ticketBox div.tagsinput.readonly {
    background:none !important;
    margin-bottom:0px !important;
}

body div.tagsinput {
    background-color: var(--input-background);
    color:var(--primary-font-color);
    font-family: var(--primary-font-family);
    width:100% !important;
    height:auto !important;
    border-radius:var(--input-radius);
    box-shadow: none;
    padding:var(--input-padding);
    border:0px;
}

body div.tagsinput input {
    font-size:var(--base-font-size);
    color:var(--primary-font-color) !important;
    width:auto;
    padding:0px;
    margin-bottom:0px;
    font-family: var(--primary-font-family);
}

body div.tagsinput span.tag {
    border-radius: 12px;
    padding: 0px 10px;
    border: 0px solid var(--primary-color);
}

div.tagsinput span.tag {
    font-size:var(--font-size-m);
}

div.tagsinput span.tag a {
    vertical-align: text-bottom;
}

/* Tags input in article/wiki dialogs - proper spacing */
.formModal div.tagsinput {
    margin-top: 15px;
    margin-bottom: 15px;
    display: block;
    clear: both;
}

/* Ensure tags input doesn't overlap with Tiptap editor */
.formModal div.tagsinput + .tiptap-wrapper,
.formModal div.tagsinput + .tiptap-editor {
    clear: both;
}

.ss-main .ss-multi-selected {
    padding:var(--input-padding);
}

.ss-main .ss-multi-selected .ss-values,
.ss-main .ss-multi-selected .ss-disabled{
    padding:0px;
    height:21px; /* Equivalend to line height on tags input*/
}

.ss-main .ss-multi-selected .ss-values .ss-value {
    border-radius: 12px;
    padding: 0px 10px;
    margin: 0px;
    border: 0px solid var(--primary-color);
}

select {
    min-height:30px;
}

::selection {
    background: var(--accent1);
    color: var(--main-action-color);
    text-shadow: none;
}

/* Safari */
::-moz-selection {
    background: var(--accent1);
    color: var(--main-action-color);
    text-shadow: none;
}

/* Firefox */
input:-moz-placeholder,
textarea:-moz-placeholder{
    color: var(--primary-font-color);
    opacity: 0.5;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{
    color: var(--primary-font-color);
    opacity: 0.5;
    margin-left: -1px;
}

input::-moz-placeholder,
textarea::-moz-placeholder { /* Firefox 19+ */
    color: var(--primary-font-color);
    opacity: 0.5;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder{
    color: var(--primary-font-color);
    opacity: 0.5;
}


input, select,
textarea, button {
    /* outline is now properly handled via :focus-visible in theme files */
    font-size: var(--base-font-size);

}

.assign-container {
    height: 205px;
    overflow: auto;
    margin: auto;
    border: 1px solid #ccc;
    padding: 10px;
}

.stdform .assign-container label {
    width: auto;
}

.assign-container .checker {
    float: left;
}

.assign-container .half {
    width: 49%;
    margin-right: 1%;
    float: left;
    margin: 8px 0px;
}


/* Secondary Button */
body .btn-default,
body .btn,
body a.btn,
input.btn,
button.btn,
body input[type='submit'].btn-default,
.btn-group .btn,
.btn-group>.btn:last-child,
.btn-group>.dropdown-toggle,
a.btn-default,
.btn-default:link

{
    font-family: var(--primary-font-family);
    font-size: var(--base-font-size);
    font-weight:bold;
    padding: var(--input-padding);
    line-height:21px;
    background: var(--secondary-action-bg);
    text-shadow: none;
    box-shadow:none;
    color: var(--secondary-action-color);
    display: inline-block;
    word-spacing: 2px;
    border:1px solid var(--secondary-action-bg);
    border-radius:var(--element-radius) !important;
    outline:0;
    vertical-align: top;
}

body .btn-default:hover,
body .btn-default.active,
body input[type='submit'].btn-default:hover,
.btn-group .btn:hover,
body .btn-default:active,
body input[type='submit'].btn-default:active,
.btn-group .btn:active,
.btn-group.open .btn.dropdown-toggle{
    background:var(--secondary-action-hover-bg);
    color:var(--secondary-action-hover-color);
    border-color:var(--secondary-action-hover-bg);
}

body .btn-default .caret,
body input[type='submit'].btn-default .caret,
.btn-group .btn .caret,
.btn-group>.btn:last-child .caret,
.btn-group>.dropdown-toggle .caret {
    border-top-color:var(--primary-font-color);
}

body .btn-default:hover .caret,
body input[type='submit'].btn-default:hover .caret,
.btn-group .btn:hover .caret,
body .btn-default:active .caret,
body input[type='submit'].btn-default:active .caret,
.btn-group .btn:active .caret,
.btn-group.open .btn.dropdown-toggle .caret{
    border-top-color:var(--secondary-action-hover-color);

}

body .btn-default:active,
body input[type='submit'].btn-default:active,
.btn-group .btn:active,
.btn-group.open .btn.dropdown-toggle {
    box-shadow: inset 0 2px 4px rgb(0 0 0 / 15%), 0 1px 2px rgb(0 0 0 / 5%);
}



/*Primary button */

body .btn-primary,
body btn.btn-primary,
body a.btn.btn-primary,
input[type='submit'],
.btn-primary:link,
.btn-primary[disabled],
.dt-button,
.btn-group.open .btn-primary.dropdown-toggle,
.btn-group .btn.btn-primary{
    background:var(--main-action-bg);
    border-radius:var(--element-radius);
    outline:0;
    font-size: var(--base-font-size);
    font-weight:bold;
    padding: var(--input-padding);
    line-height:21px;
    box-shadow:none;
    text-shadow: none;
    color: var(--main-action-color);
    display: inline-block;
    word-spacing: 2px;
    border: 1px solid var(--main-action-bg);
}

body .btn-primary:hover,
body .btn-primary:active,
body .btn-primary:focus,
body input[type='submit']:hover,
body .btn-group.open .btn-primary.dropdown-toggle,
.btn-group .btn.btn-primary:hover,
body a.btn.btn-primary:hover{
    background: var(--main-action-hover-bg);
    color:var(--main-action-hover-color);
    border:1px solid var(--main-action-hover-bg);
}

body .btn-primary .caret,
body input[type='submit'].btn-primary .caret,
.btn-group .btn-primary .caret,
.btn-group>.btn-primary:last-child .caret {
    border-top-color:var(--main-action-hover-color);
}

.btn-primary[disabled] {
    background:var(--main-action-bg);
    color: var(--main-action-color);
    border: 1px solid var(--main-action-bg);
    cursor:not-allowed;
}


.chosen-container-single .chosen-single {

    height: auto;
    background:none;
    background-color: var(--secondary-background);
    line-height:21px;
    border: 1px solid var(--main-border-color);
    -webkit-box-shadow: var(--input-shadow);
    -moz-box-shadow: var(--input-shadow);
    box-shadow: var(--input-shadow);
    border-radius: var(--input-radius);
    padding: var(--input-padding);
    color:var(--primary-font-color);
}

.chosen-container {
    font-size:var(--base-font-size);
    margin-bottom:10px;
    min-width:175px
}

/* Search field input styling is handled separately below to avoid conflicts */

.chosen-container-multi .chosen-choices {
    background-color: var(--secondary-background);
    line-height: 21px;
    min-height: 33px;
    border: 1px solid var(--main-border-color);
    border-radius: var(--input-radius);
    box-shadow: none;
    padding: 3px 5px 3px 8px;
}

.chosen-container-active .chosen-single {
    border: 1px solid var(--main-border-color);
    -webkit-box-shadow:var(--input-shadow);
    box-shadow: var(--input-shadow);
}

.chosen-container-active.chosen-with-drop .chosen-single {
    border: 1px solid var(--main-border-color);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    background-image: none;
    background-image: none;
    -webkit-box-shadow: var(--input-shadow);
    box-shadow: var(--input-shadow);
}

.chosen-container-active .chosen-choices {
    border: 1px solid var(--main-border-color);
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    padding: 3px 5px 3px 8px;
}

.chosen-container-active .chosen-choices li.search-field input[type="text"],
.chosen-container-active .chosen-choices .search-field .chosen-search-input {
    color:var(--primary-font-color);
    padding: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
}

.chosen-container .chosen-drop {
    position: absolute;
    top: 100%;
    z-index: 1010;
    width: 100%;
    border: 1px solid var(--main-border-color);
    border-top: 0;
    background: var(--secondary-background);
    -webkit-box-shadow: var(--input-shadow);
    box-shadow: var(--input-shadow);
    clip: rect(0, 0, 0, 0);
    -webkit-clip-path: inset(100% 100%);
    clip-path: inset(100% 100%);
}

.chosen-container .chosen-results li.highlighted {
    color: var(--dropdown-link-hover-color) !important;
    background: var(--dropdown-link-hover-bg) !important;
    background-image: none;

}

.chosen-container-single .chosen-search input[type="text"] {

    border: 1px solid var(--main-border-color);

    font-size: var(--font-size-s);

    line-height: normal;
    border-radius: 0;
}

.chosen-container-single .chosen-single div b {
    background-image:none !important;
}
.chosen-container-single .chosen-single div b:after {
    content: "⌄";
    line-height: 25px;
}

.chosen-container-multi .chosen-choices li.search-choice {
    position: relative;
    margin: 3px 5px 3px 0;
    padding: 6px 20px 6px 5px;
    border: 0px solid #aaa;
    max-width: 100%;
    border-radius: 3px;
    background-color: var(--accent1);
    color: var(--accent1-color);
    background-image: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    line-height: normal;
    cursor: default;
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
    position: absolute;
    top: 8px;
}

.btn-group>.btn {
}

.btn-file {
    padding: var(--input-padding);
}

.btn,
a:link.btn{

}

.viewText {
    padding-right:5px;
}

.btn .caret {
    margin-left: 0px;
}

.btn-small {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: var(--element-radius);
    font-size: var(--base-font-size);
    text-transform: uppercase;
}

.btn-large {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: var(--element-radius);
    font-size: var(--font-size-l);
    padding: 10px 20px !important;
}


.btn.btn-danger,
.btn.btn-danger:link {
    background: var(--red);
    border-color: var(--dark-red);
    color: #fff;
    font-weight: bold;
}

.btn.btn-danger:hover,
.btn.btn-danger:active,
.btn.btn-danger:focus,
.btn.btn-group.open
.btn.btn-danger.dropdown-toggle {
    background: var(--dark-red);
}

.btn.btn-warning, .btn.btn-warning:link {
    background: var(--yellow);
    border-color: var(--yellow);
}

.btn-warning:hover, .btn-warning:active, .btn-warning:focus,
.btn-group.open .btn-warning.dropdown-toggle {
    background: var(--yellow);
}

.btn-success, .btn-success:link {
    background: var(--green);
    border-color: var(--dark-green);
}

.btn-success:hover, .btn-success:active, .btn-success:focus,
.btn-group.open .btn-success.dropdown-toggle {
    background: var(--dark-green);
}

.btn-info, .btn-info:link {
    background: var(--blue);
    border-color: var(--dark-blue);
}

.btn-info:hover, .btn-info:active, .btn-info:focus,
.btn-group.open .btn-info.dropdown-toggle {
    background: var(--dark-blue);
}

.btn-inverse, .btn-inverse:link {
    background: #555;
    border-color: #272727;
}

.btn-circle {
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    width: 20px;
    padding: 5px;
    background: none;
    border: 2px solid #ccc;
}

.btn-circle:hover {
    background: none;
    color: #ccc;
}

.btn-circle.btn-primary, .btn-circle.btn-primary:hover, .btn-circle.btn-primary:focus,
.btn-circle.btn-primary:active, .btn-circle.btn-primary.active,
.btn-circle.btn-primary.disabled, .btn-circle.btn-primary[disabled] {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: none !important;
}

.btn-circle.btn-danger, .btn-circle.btn-danger:hover, .btn-circle.btn-danger:focus,
.btn-circle.btn-danger:active, .btn-circle.btn-danger.active,
.btn-circle.btn-danger.disabled, .btn-circle.btn-danger[disabled] {
    border-color: var(--red);
    color: var(--red);
    background: none;
}

.btn-circle.btn-warning, .btn-circle.btn-warning:hover, .btn-circle.btn-warning:focus,
.btn-circle.btn-warning:active, .btn-circle.btn-warning.active,
.btn-circle.btn-warning.disabled, .btn-circle.btn-warning[disabled] {
    border-color: var(--yellow);
    color: var(--yellow);
    background: none;
}

.btn-circle.btn-success, .btn-circle.btn-success:hover, .btn-circle.btn-success:focus,
.btn-circle.btn-success:active, .btn-circle.btn-success.active,
.btn-circle.btn-success.disabled, .btn-circle.btn-success[disabled] {
    border-color: var(--green);
    color: var(--green);
    background: none;
}

.btn-circle.btn-info, .btn-circle.btn-info:hover, .btn-circle.btn-info:focus,
.btn-circle.btn-info:active, .btn-circle.btn-info.active,
.btn-circle.btn-info.disabled, .btn-circle.btn-info[disabled] {
    border-color: var(--blue);
    color: var(--blue);
    background: none;
}

.btn-circle.btn-inverse, .btn-circle.btn-inverse:hover, .btn-circle.btn-inverse:focus,
.btn-circle.btn-inverse:active, .btn-circle.btn-inverse.active,
.btn-circle.btn-inverse.disabled, .btn-circle.btn-inverse[disabled] {
    border-color: #555;
    color: #555;
    background: none;
}

.btn-circle .iconsweets-white {

}

.btn-group+.btn-group {
    margin-left: 0px;
}

select,
.row-fluid [class*="span"] select {
}

.row-fluid.marginBottom,
.row.marginBottom{
    margin-bottom:15px;
}

.marginBottomMd {
    margin-bottom:15px;
}


.filterBar select {
    height: auto;
    line-height: 21px;
}

.filterBoxLeft input[type="text"] {
    margin-right:10px;
}

.chosen-choices {

}

.chosen-container-multi .chosen-choices .search-choice {
    border: 0px solid #bbb;
    line-height: 12px;
    padding: 1px 20px 1px 10px;
    margin: 3px 0 2px 3px;
    position: relative;
    cursor: default;
    border-radius:12px;
    font-size:var(--font-size-s);
}

.chosen-container-multi .chosen-choices .search-choice .search-choice-close {
    right:5px;
}

.chosen-container-multi .chosen-choices li.search-field input[type="text"],
.chosen-container-multi .chosen-choices .search-field .chosen-search-input {
    height: auto;
    padding: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
    margin: 1px 0 !important;
}

.chosen-container-single .chosen-search input {
    background:var(--input-background);
    border-color:var(--main-border-color);
}

.chosen-container .chosen-results .no-results {
    background:var(--input-background);
}

input[type=checkbox] {
    margin-top:9px;
}

input[type=color] {
    height:29px;
    padding:0px;
    width:29px;
    border:2px solid var(--main-border-color);
}

.assign-container {
    border: 1px solid var(--main-border-color);
    -webkit-box-shadow: var(--input-shadow);
    -moz-box-shadow: var(--input-shadow);
    box-shadow: var(--input-shadow);
}

.userBox {
    border:1px solid var(--main-border-color);
    border-radius: var(--box-radius);
    padding:10px;
    margin-bottom:10px;
}

.userBox .commentImage img{
    width:50px;
    height:50px;
    margin-top: 5px;
}

.userBox input[type=checkbox] {
    float:left;
    margin-right:15px;
    margin-top:23px;
}

.userBox label {
    display: inline-block;
    width:200px;
}

.userBox select,
.userBox input{
    margin-bottom:0px;

}

.backlogChartButtons,
.chartButtons{
    margin-left:5px !important;
}


.dropdown-toggle.full-width-select {
    width:100%;
    display:block;

    height: auto;
    background-color: var(--input-background);
    line-height:21px;
    border: 1px solid var(--main-border-color);
    border-radius: 3px;
    padding: 6px 12px;
    color:var(--primary-font-color);
}

.dropdown-toggle.full-width-select:hover {
    text-decoration:none;
    background:var(--main-menu-link-hover-bg);
    color:var(--main-menu-link-hover-color);
}

.dropdown-toggle.full-width-select .fa {
    float: right;
    vertical-align: bottom;
    margin-top: 3px;
}

.board-select .dropdown-menu {
    margin-left:15px;
    margin-top:2px;
}

.board-select .dropdown-menu li.nav-header.border {
    border-top: 1px solid var(--neutral);
    border-bottom: 0px;
    padding-top: 10px;
}


body input[type=text].main-title-input.main-title-input {
    border: 1px solid var(--main-border-color);
    border-radius:var(--box-radius);
    box-shadow:none;
    font-size:var(--font-size-xxxl);
    margin-bottom:5px;
}

/* Title input after icon picker - prevent overlap */
.formModal .inlineDropDownContainerLeft + input[type="hidden"] + input.main-title-input,
.formModal .inlineDropDownContainerLeft ~ input.main-title-input {
    margin-left: 10px;
}



div.border {
    border:1px solid var(--main-border-color);
    border-radius: var(--box-radius);
    padding:10px;
}

body select {
    max-witdh:206px;
}

input.secretInput,
select.secretInput {
    width:126px;
    border:0px;
    height: 21px;
    margin-left:3px;
    padding-left:3px;
    background:none;
    -webkit-box-shadow:none;
    -moz-box-shadow: none;
    box-shadow: none;
    margin-bottom:0px;
    border: 1px solid transparent;
    margin-top:-1px;
    cursor:pointer;
    color:var(--primary-font-color);

}

select.secretInput:hover,
input.secretInput:hover {

    border: 1px solid var(--main-border-color-hover);
    text-decoration:none;
}

select.secretInput:focus,
input.secretInput:focus {

    border: 1px solid var(--accent1);
    text-decoration:none;
}

.fileupload .btn, .fileupload .fileupload-exists {
    margin-left: 5px;
}

.input-append .fa-file::before {
    font-family: "Font Awesome 6 Free";
    content: "\f15b";
    font-style: normal;
    margin-right:5px;
}

.uppy-Webcam-footer {
    width:400px;
}

.uploadWrapper .extra {
    height: 400px;
    width: 100%;
    display: flex;
    z-index:10000;
    display:none;
}

.extra .uppy-Root{
    flex-grow: 1;
}

.uppy-Webcam-videoContainer,
.uppy-ScreenCapture-videoContainer {
    background:var(--col-content-bg);
}

.uppy-Webcam-button svg,
.uppy-ScreenCapture-button svg{
    width:20px;
    height:20px;
}

.uppy-Webcam-button,
.uppy-ScreenCapture-button--video {
    background:var(--main-action-bg);
}

.uppy-FileInput-container {
    text-align:center;
}

.uppy-FileInput-btn {
    background:var(--main-action-bg);
    color:var(--main-action-color);
    border:1px solid var(--main-action-bg);
    font-size: var(--base-font-size);
    font-family: var(--primary-font-family);
    padding: var(--input-padding);
    line-height: 21px;
    border-radius: var(--element-radius);
    vertical-align: top;
}

.uppy-FileInput-btn:hover {
    background:var(--main-action-hover-bg);
    color:var(--main-action-hover-color);
}

.fileUploadDrop {
    border:2px dotted var(--main-border-color);
    border-radius: var(--box-radius);
    text-align:center;
    padding:10px 10px 0px 10px;
}

.fileUploadDrop p {
    padding-bottom:10px;
}

.uppy-FileInput-btn {
    padding:0px;
    border:0px;
    color:var(--primary-color);
    background:transparent;
    margin-right:15px;
    margin-left:15px;
}

.uppy-FileInput-btn:before {
    font-family:"Font Awesome 6 Free";
    content: "\f07c";
}

.uppy-FileInput-btn:hover,
.fileUploadDrop a:hover {
    background:transparent;
    color:var(--primary-font-color);
    text-decoration: none;
}

.fileUploadDrop a {
    padding-right:15px;
}

.uppy-is-drag-over:after {
    background-color: var(--primary-color);
    opacity:0.6;
    border: 4px dashed var(--input-background);
    bottom: 7px;
    border-radius:var(--box-radius);
    content: "";
    left: 7px;
    position: absolute;
    right: 7px;
    top: 7px;
    z-index: 10000;
}


.profileBox.active {
    border:1px solid var(--main-action-bg);
    box-shadow:var(--large-shadow);
}

.profileBox.active .commentImage .fa {
    border-color:var(--main-action-bg);
    background-color:var(--main-action-bg);
    color:var(--main-action-color);
}

.profileBox .commentImage.gradient img{
    background:var(--element-gradient);
}

.profileBox.active .userName {
    color:var(--main-action-bg);
}

body .btn.btn-outline {
    background:transparent;
    color:var(--main-action-bg);
    border:1px solid var(--main-action-bg);
}

body .btn.btn-outline:hover {
    color:var(--main-action-hover-color);
    background:var(--main-action-hover-bg);
    border:1px solid var(--main-action-hover-bg);
}

body .btn.btn-outline.active {
    color: var(--main-action-color);
    background: var(--main-action-bg);
}

body .btn.btn-danger-outline {
    background:transparent;
    color:var(--red);
    border:1px solid var(--red);
}

body .btn.btn-danger-outline:hover {
    color:var(--main-action-hover-color);
    background:var(--main-action-hover-bg);
    border:1px solid var(--main-action-hover-bg);
}


.ui-autocomplete {
    z-index:99999;
    margin-top: 0;
    border-radius: var(--box-radius);
    border:0px;
    box-shadow: var(--regular-shadow);
    background:var(--input-background);
    max-width:200px;
}

.ui-autocomplete li {
    list-style-type: none;
}

.ui-autocomplete li div {
    padding: 10px 20px;
}


.ui-autocomplete li .ui-state-active {
    color: var(--dropdown-link-hover-color);
    background:var(--dropdown-link-hover-bg);
}

/* Assumes buttons are just an icon, so everything is inline*/
.simpleButtons {
}

.simpleButtons.right {
    text-align:right;
    float:right;
}

.simpleButtons.left {
    text-align:left;
    float:left;
}

.viewDescription {
    border-radius:var(--box-radius);
    padding:5px;
    border:1px solid transparent;
}

.viewDescription:hover {
    border:1px solid var(--main-border-color-hover);
}






input[type=range] {
    height: 28px;
    -webkit-appearance: none;
    margin: 5px 0px 5px 0;
    width: 100%;
}
/* Range input focus is now handled by theme files using :focus-visible */
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    animate: 0.2s;
    box-shadow: 0px 0px 0px #000000;
    background: var(--main-border-color);
    border-radius: 5px;
    border: 0px solid #000000;
}
input[type=range]::-webkit-slider-thumb {
    box-shadow: 0px 0px 0px #000000;
    border: 2px solid var(--input-background);
    height: 20px;
    width: 20px;
    border-radius: 10px;
    background: var(--primary-color);
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -8.5px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: var(--main-border-color);
}
input[type=range]::-moz-range-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    animate: 0.2s;
    box-shadow: 0px 0px 0px #000000;
    background: var(--main-border-color);
    border-radius: 5px;
    border: 0px solid #000000;
}
input[type=range]::-moz-range-thumb {
    box-shadow: 0px 0px 0px #000000;
    border: 2px solid var(--input-background);
    height: 20px;
    width: 20px;
    border-radius: 10px;
    background: var(--primary-color);
    cursor: pointer;
}
input[type=range]::-ms-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    animate: 0.2s;
    background: transparent;
    border-color: transparent;
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    background: var(--main-border-color);
    border: 0px solid #000000;
    border-radius: 10px;
    box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-fill-upper {
    background: var(--main-border-color);
    border: 0px solid #000000;
    border-radius: 10px;
    box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-thumb {
    margin-top: 1px;
    box-shadow: 0px 0px 0px #000000;
    border: 2px solid var(--primary-background);
    height: 20px;
    width: 20px;
    border-radius: 10px;
    background:var(--primary-color);
    cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
    background: var(--main-border-color);
}
input[type=range]:focus::-ms-fill-upper {
    background: var(--main-border-color);
}

.radioTab {
    border:1px solid var(--main-border-color);
    border-radius:var(--box-radius);
    padding:10px;
    margin-bottom:5px;
    display:block;
}

.radioTab:hover {
    background:var(--kanban-card-hover);
}

.radioTab strong {
    color:var(--primary-color);
    display:block;
}

.radioTab span {
    font-size:var(--font-size-s);
    color:var(--primary-font-color);
    line-height:1;
}

.radioTab.active {
    background:var(--main-action-bg);
    color:var(--main-action-color);
}

.radioTab.active strong,
.radioTab.active span {
    color:var(--main-action-color);
}



.ss-main .ss-single-selected {
    display: flex;
    cursor: pointer;
    width: 100%;
    height: auto;
    padding: var(--input-padding);
    border: 1px solid var(--main-border-color);
    background-color: var(--input-background);
    line-height:21px;
    border: 1px solid var(--main-border-color);
    -webkit-box-shadow: var(--input-shadow);
    -moz-box-shadow: var(--input-shadow);
    box-shadow: var(--input-shadow);
    border-radius: var(--input-radius);

    outline: 0;
    box-sizing: border-box;
}

.ss-main {
    margin-bottom:5px;
}

.ss-main .ss-multi-selected {
    min-height: auto;
    background-color: var(--input-background);
    line-height: 21px;
    padding: 6px 10px;
    border: 1px solid var(--main-border-color);
    box-shadow: none;
    border-radius: var(--input-radius);
}

.ss-main .ss-single-selected .placeholder {
    line-height: 21px;
}

.ss-main .ss-multi-selected .ss-values .ss-disabled {
    color:var(--main-border-color);
}

.ss-main .ss-multi-selected .ss-values .ss-disabled {
    padding:0px;
    margin:0px;
}

.ss-main .ss-multi-selected .ss-add {
    display: flex;
    flex: 1 1 3px;
    margin: 4px 0px 0 5px;
}

.ss-main .ss-multi-selected .ss-values .ss-value {
    background:var(--primary-color);
}

.ss-main .ss-single-selected .ss-arrow span {
    padding:0px 4px;
}

.ss-main .ss-single-selected .ss-arrow span.arrow-up,
.ss-main .ss-single-selected .ss-arrow span.arrow-down {
    margin:0px;
}


body .btn.btn-link {
    background:transparent;
    color:var(--primary-font-color);
    border:1px solid transparent;
}

body .btn.btn-link:hover {
    color:var(--main-action-hover-color);
    background:var(--main-action-hover-bg);
    border:1px solid var(--main-action-hover-bg);
    text-decoration:none;
}

body .btn.btn-link.active {
    color: var(--main-action-color);
    background: var(--main-action-bg);
}

body .btn.btn-link.action-link {
    color:var(--accent1);
}

body .btn.btn-link.action-link:hover {
    color:var(--main-action-hover-color);
}

.btn .badge {
    top:0px;
}

input[type=text].simpleColorPicker {
    color:#fff;
}

body .croppie-container {
    height:auto;
}


.form-group {
    clear:both;
}

.maincontent .chosen-container .chosen-results li {
    margin-bottom:2px;
    list-style-type:none;
    padding:5px;
}

.maincontent .chosen-container .chosen-results li span,
.maincontent .chosen-container .chosen-single span{
    margin-left:0px !important;
}

.maincontent .chosen-container .chosen-results li span:after,
.maincontent .chosen-container .chosen-single span:after{
    border-color:transparent;
}


.stdform p, .stdform div.par {
    margin: 20px 0;
}

.stdform span.field, .stdform div.field {
    display: block;
    position: relative;
}

.stdform .formwrapper {
    display: block;
    padding-top: 5px;
    margin-left: 220px;
    line-height: 25px;
}

.stdform label {
    float: left;
    width: 150px;
    text-align: left;
    padding: 5px 20px 0 0;
}

.stdform label.error {
    float: none;
    display: block;
    font-size: var(--base-font-size);
    color: var(--dark-red);
    text-align: left;
    padding: 0;
    width: auto;
}

.stdform label.valid {
    color: var(--green);
}

.stdform small.desc {
    font-size: var(--base-font-size);
    color: #999;
    font-style: italic;
    display: block;
    margin: 5px 0 0 220px;
}

.stdform .stdformbutton {
}

.stdform #spinner.input-small {
    width: 100px;
}

.stdform2 p, .stdform2 div.par {
    border-top: 1px solid #ddd;
    background: #fcfcfc;
    margin: 0;
    clear: both;
}

.stdform2 div.terms {
    border: 0;
    background: none;
}

.stdform2 p:first-child, .stdform2 div.par:first-child {
    border-top: 0;
}

.stdform2 label {
    display: inline-block;
    padding: 15px 0 0 15px;
    vertical-align: top;
    text-align: left;
    font-weight: bold;
}

.stdform2 label.error {
    margin-left: 0;
    padding: 0;
}

.stdform2 label small {
    font-size: var(--base-font-size);
    color: #999;
    display: block;
    font-weight: normal;
    line-height: 16px;
}

.stdform2 span.field, .stdform2 div.field {
    margin-left: 220px;
    display: block;
    background: #fff;
    padding: 15px;
    border-left: 1px solid #ddd;
}

.stdform2 .stdformbutton {
    margin-left: 0;
    padding: 15px;
    background: #fff;
}

.stdform2 input {
    margin: 0;
}

.stdform2 input[type=checkbox], .stdform2 input[type=radio] {
    margin: 10px;
}

.dualselect {
    margin-left: 220px;
    display: block;
}

.dualselect select {
    height: 200px;
    width: 40%;
    padding: 0;
    outline: none;
}

.dualselect select option {
    padding: 4px 5px;
    margin: 0;
    white-space: normal;
}

.dualselect .ds_arrow {
    display: inline-block;
    vertical-align: top;
    padding-top: 60px;
    margin: 0 10px;
}

.dualselect .ds_arrow button {
    margin-top: -1px;
}

.counter {
    display: block;
    font-size: var(--base-font-size);
}

.warning {
    color: var(--yellow);
}

.exceeded {
    color: var(--dark-red);
}

.selectable {
    cursor: pointer;
    display: inline-block;
    margin-right: 15px;
    vertical-align: middle;
    text-align: center;
    line-height: 20px;
    margin-bottom:10px;
}

.selectable .selectableContent {
    border: 1px solid var(--main-border-color);
    padding:10px;
    border-radius: var(--element-radius);
    background: var(--tab-background);
    color: var(--tab-color);
    margin:auto;
}

.selectable .selectableContent label {
    font-weight:normal;
    padding-bottom:0px;

}

.selectable.circle .selectableContent {
    border-radius: 50%;
    width: 60px;
    height: 60px;
}

.selectable.circle .selectableContent label {
    line-height:30px;

}

.selectable.compact .selectableContent {
    padding:3px 10px;
}

.selectable .selectableContent .emoji {
    font-size:var(--font-size-xxl);
    padding-right:5px;
    vertical-align: middle;
}

.colorCircle {
    display:block;
    width:100%;
    height:100%;
    border-radius: 50%;
}

.selectable.active .selectableContent{
    background: var(--col-hover-bg);
}

.selectable.active .selectableContent label,
.selectable.active .selectableContent{
    font-weight:bold;
}

.selectable.active .selectable-label {
    color:var(--accent1);
    font-weight:bold;
}

.selectable:hover .selectableContent{
    background:var(--col-hover-bg);
    color: var(--main-menu-link-active-color);
}

.selectable.pushed {
    transform:scale(0.9);
}




/* PRetty toggle*/
input[type="checkbox"].toggle {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

/* Toggle focus states are now handled by theme files using :focus-visible */

input[type="checkbox"].toggle {
    height: 20px;
    width: 40px;
    border-radius: 16px;
    display: inline-block;
    position: relative;
    margin: 0;
    border: 0px solid var(--primary-font-color);
    background: var(--input-background);
    box-shadow: var(--min-shadow);
    margin-top: 5px;

}

input[type="checkbox"].toggle:after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: var(--regular-shadow);
    background:var(--primary-font-color);

}

input[type="checkbox"].toggle:checked {
    border-color: var(--accent1);
    background: var(--element-gradient);
}
input[type="checkbox"].toggle:checked:after {
    transform: translatex(20px);
    background:#fff;
}

body a.textInputSwitch {
    display:block;
    border:1px solid var(--main-border-color);
    cursor:text;
    height:40px;
    line-height:40px;
    font-size:var(--font-size-l);
    text-align:left;
    background:var(--layered-background);
    margin-bottom:10px;
    padding-left:10px;
    border-radius: var(--element-radius);
    color:var(--primary-font-color);
    font-weight:bold;
}

.textInputSwitch:hover {
    border:1px solid var(--primary-font-color);
}

.undrawContainer.noBg {
    color:var(--main-action-color);
}

.undrawContainer.noBg h3 {
    color:var(--main-action-color);
    background: none;
    -webkit-text-fill-color: unset;
    -webkit-background-clip: unset;
    -moz-background-clip: unset;
    -moz-text-fill-color: unset;
}


.notesEditor {
    background:var(--input-background);
    border-radius:var(--box-radius);
}


.noteContainer {
    position:relative;
    background:var(--layered-background);
    overflow:hidden;
    margin:0px auto;
    padding:10px;
   /* box-shadow:
            inset 0 -40px 40px rgba(100,100,100,0.1),
            inset 0 25px 10px rgba(100,100,100,0.1),
            0 5px 6px 5px rgba(100,100,100,0.1);*/
    color:var(--secondary-font-color);
    border: 1px solid var(--main-border-color);
}

/*.noteContainer:before {*/
/*    content:"";*/
/*    display:block;*/
/*    position:absolute;*/
/*    width:20px;*/
/*    height:25px;*/
/*    background:var(--layered-background);*/
/*    box-shadow:*/
/*            3px -2px 10px rgba(100,0,0,0.1),*/
/*            inset 15px -15px 15px rgba(0,0,0,0.1);*/
/*    left:0;*/
/*    bottom:0;*/
/*    z-index:2;*/
/*    transform:skewX(25deg);*/
/*}*/

/*.noteContainer:after {*/
/*    content:"";*/
/*    display:block;*/
/*    position:absolute;*/
/*    width:75%;*/
/*    height:20px;*/
/*    border-radius: 50% ;*/
/*    bottom:0px;*/
/*    left:10%;*/
/*}*/

.noteContainer input[type=text],
.noteContainer textarea,
.clearForm input[type=text],
.clearForm textarea {
    background:transparent;
    border:none !important;
    box-shadow:none;
    width:100%;
    color:var(--secondary-font-color);
}

.noteContainer input::-webkit-input-placeholder,
.noteContainer textarea::-webkit-input-placeholder,
.noteContainer input::-moz-placeholder,
.noteContainer textarea::-moz-placeholder {
    color: var(--secondary-font-color);

}

body .noteContainer div.tagsinput,
body .clearForm div.tagsinput {
    background:transparent;
    border:none;
    width:100%;
}

body div.tagsinput input,
body div.clearForm input
{
    width:50% !important;
    border:0px;
}

body .noteContainer div.tagsinput input,
body .clearForm div.tagsinput input {
    padding-left:7px;
    color:var(--secondary-font-color);
}

body .noteContainer div.tagsinput input:focus,
body .clearForm div.tagsinput input:focus{
    border:none;
}

div.tagsinput span.tag {
    margin-bottom:0px;
}

.headerEditDropdown {
    margin-left:10px;
}

.headerEditDropdown .caret {
    border-top-color:var(--main-action-color);
}


.commentReply.inactive {
    border:1px solid var(--main-border-color);
    padding:9px 14px;
    border-radius:var(--box-radius);
    margin-bottom:10px;
}

.round-button {
    padding:4px 0px !important;
    min-width:31px;
}

input.input-line {
    background:none;
    box-shadow:none;
    border-radius:0;
    border:none;
    margin-left: 10px;
    padding-left:0px;
    border-bottom:1px solid var(--main-border-color);
}

input.input-line:hover,
input.input-line:active,
input.input-line:focus {
    border-bottom:1px solid var(--accent1);
}

label .fa,
label .fa-regular,
label .fa-solid {
    width:16px;
}

.date-picker-form-control {
    position:relative;
    display:inline-block;
}

.date-picker-form-control .reset-button {
    display:none;
    background:none;
    outline:0;
    border:none;
    position:absolute;
    top:-1px;
    right:5px;
    color:var(--primary-font-color);
    cursor:pointer;
    opacity:0.5;
}

.date-picker-form-control:hover .reset-button {
    display:block;
}


/* Chrome, Safari, Edge, Opera */
input.hide-controls::-webkit-outer-spin-button,
input.hide-controls::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

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


.weekday-selector {
    margin: 10px 0;
}

.weekday-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align:center;
    padding: 4px 8px;
    background: #f5f5f5;
    border-radius: 4px;
    cursor: pointer;
}

.weekday-label:hover {
    background: #e9ecef;
}

.weekday-checkbox {
    margin-right: 4px !important;
    margin-top:0px !important;
}

.weekday-text {
    font-size: 0.9em;
    text-transform: uppercase;
}

.weekday-label input[type="checkbox"]:checked + .weekday-text {
    font-weight: bold;
    color: var(--primary-color);
}

.text-muted {
    color: #6c757d;
}

.dropdown-form {
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    min-width: 300px;
    position: absolute;
    z-index: 1000;
}

.dropdown-header {
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.dropdown-title {
    margin: 0;
    font-size: 16px;
}

.dropdown-content {
    padding: 15px;
}

.recurring-form-content {
    max-height: 480px;
    overflow-y: auto;
}

.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group.has-validation > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu),
.input-group.has-validation > .dropdown-toggle:nth-last-child(n+4) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.valid-feedback,
.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: var(--success);
}

.valid-tooltip,
.invalid-tooltip {
    position: absolute;
    top: 100%;
    z-index: 5;
    display: none;
    max-width: 100%;
    padding: 0.25rem 0.5rem;
    margin-top: 0.1rem;
    font-size: 0.875rem;
    color: var(--primary-background);
    background-color: rgba(var(--success-rgb), 0.9);
    border-radius: var(--element-radius);
}

.was-validated :valid ~ .valid-feedback,
.was-validated :valid ~ .valid-tooltip,
.is-valid ~ .valid-feedback,
.is-valid ~ .valid-tooltip {
    display: block;
}

.was-validated .form-control:valid,
.form-control.is-valid {
    border-color: var(--success);
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.was-validated .form-control:valid:focus,
.form-control.is-valid:focus {
    border-color: var(--success);
    box-shadow: 0 0 0 0.25rem rgba(var(--success-rgb), 0.25);
}

.was-validated .form-select:valid,
.form-select.is-valid {
    border-color: var(--success);
}

.was-validated .form-select:valid:not([multiple]):not([size]),
.was-validated .form-select:valid:not([multiple])[size="1"],
.form-select.is-valid:not([multiple]):not([size]),
.form-select.is-valid:not([multiple])[size="1"] {
    padding-right: 4.125rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-position: right 0.75rem center, center right 2.25rem;
    background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.was-validated .form-select:valid:focus,
.form-select.is-valid:focus {
    border-color: var(--success);
    box-shadow: 0 0 0 0.25rem rgba(var(--success-rgb), 0.25);
}

.was-validated .form-check-input:valid,
.form-check-input.is-valid {
    border-color: var(--success);
}

.was-validated .form-check-input:valid:checked,
.form-check-input.is-valid:checked {
    background-color: var(--success);
}

.was-validated .form-check-input:valid:focus,
.form-check-input.is-valid:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--success-rgb), 0.25);
}

.was-validated .form-check-input:valid ~ .form-check-label,
.form-check-input.is-valid ~ .form-check-label {
    color: var(--success);
}

.was-validated .form-control-file:valid ~ .valid-feedback,
.was-validated .form-control-file:valid ~ .valid-tooltip,
.form-control-file.is-valid ~ .valid-feedback,
.form-control-file.is-valid ~ .valid-tooltip {
    display: block;
}

.was-validated .form-switch .form-check-input:valid,
.form-switch .form-check-input.is-valid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(0, 0, 0, 0.25)'/%3e%3c/svg%3e");
}

.was-validated .form-switch .form-check-input:valid:checked,
.form-switch .form-check-input.is-valid:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.was-validated .form-range:valid::-webkit-slider-thumb,
.form-range.is-valid::-webkit-slider-thumb {
    background-color: var(--success);
}

.was-validated .form-range:valid::-moz-range-thumb,
.form-range.is-valid::-moz-range-thumb {
    background-color: var(--success);
}

.was-validated .form-range:valid::-ms-thumb,
.form-range.is-valid::-ms-thumb {
    background-color: var(--success);
}

.invalid-feedback {
    color: var(--danger);
}

.invalid-tooltip {
    background-color: rgba(var(--danger-rgb), 0.9);
}

.was-validated :invalid ~ .invalid-feedback,
.was-validated :invalid ~ .invalid-tooltip,
.is-invalid ~ .invalid-feedback,
.is-invalid ~ .invalid-tooltip {
    display: block;
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: var(--danger);
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 0.25rem rgba(var(--danger-rgb), 0.25);
}

.was-validated .form-select:invalid,
.form-select.is-invalid {
    border-color: var(--danger);
}

.was-validated .form-select:invalid:not([multiple]):not([size]),
.was-validated .form-select:invalid:not([multiple])[size="1"],
.form-select.is-invalid:not([multiple]):not([size]),
.form-select.is-invalid:not([multiple])[size="1"] {
    padding-right: 4.125rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-position: right 0.75rem center, center right 2.25rem;
    background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.was-validated .form-select:invalid:focus,
.form-select.is-invalid:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 0.25rem rgba(var(--danger-rgb), 0.25);
}

.was-validated .form-check-input:invalid,
.form-check-input.is-invalid {
    border-color: var(--danger);
}

.was-validated .form-check-input:invalid:checked,
.form-check-input.is-invalid:checked {
    background-color: var(--danger);
}

.was-validated .form-check-input:invalid:focus,
.form-check-input.is-invalid:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--danger-rgb), 0.25);
}

.was-validated .form-check-input:invalid ~ .form-check-label,
.form-check-input.is-invalid ~ .form-check-label {
    color: var(--danger);
}

.was-validated .form-control-file:invalid ~ .invalid-feedback,
.was-validated .form-control-file:invalid ~ .invalid-tooltip,
.form-control-file.is-invalid ~ .invalid-feedback,
.form-control-file.is-invalid ~ .invalid-tooltip {
    display: block;
}

.was-validated .form-switch .form-check-input:invalid,
.form-switch .form-check-input.is-invalid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(0, 0, 0, 0.25)'/%3e%3c/svg%3e");
}

.was-validated .form-switch .form-check-input:invalid:checked,
.form-switch .form-check-input.is-invalid:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.was-validated .form-range:invalid::-webkit-slider-thumb,
.form-range.is-invalid::-webkit-slider-thumb {
    background-color: var(--danger);
}

.was-validated .form-range:invalid::-moz-range-thumb,
.form-range.is-invalid::-moz-range-thumb {
    background-color: var(--danger);
}

.was-validated .form-range:invalid::-ms-thumb,
.form-range.is-invalid::-ms-thumb {
    background-color: var(--danger);
}

body .btn.btn-round-icon {
    width:31px;
    height:31px;
    text-align:center;
    line-height:31px;
    padding:0px;
    border:none;
    color:var(--interactive-icon-color);
}