/** buttons **/

.primaryBtn {
    background-color: dodgerblue;
    color: white;
    font-weight: 500;
    padding: .4em 1.1em;
    display: inline-flex;
    border-radius: 2px;
    font-size: .93em;
    transition: filter 199ms ease-in-out;

    line-height: 1;

    padding-top: 0;
    padding-bottom: 0;
    height: 2em;
    align-items: center;
}

.primaryBtn.green {
    background-color: #049788;
}

.primaryBtn:hover {
    filter: brightness(114%);
}


.normalBtn {
    background-color: white;
    border: 1px solid #ccc;
    color: #999;
    font-weight: 500;
    padding: .4em 1.1em;
    display: inline-flex;
    border-radius: 2px;
    font-size: .93em;
    transition: all 199ms ease-in-out;

    line-height: 1;

    padding-top: 0;
    padding-bottom: 0;
    height: 2em;
    align-items: center;
}

.normalBtn:hover {
    border-color: #888;
    color: #777;
}

.secondaryBtn {
    background-color: #ddd;
    border: 1px solid #888;
    font-weight: 500;
    padding: .4em 1.1em;
    display: inline-flex;
    border-radius: 2px;
    font-size: .93em;
    transition: all 199ms ease-in-out;

    line-height: 1;

    padding-top: 0;
    padding-bottom: 0;
    height: 2em;
    align-items: center;
}

.secondaryBtn:hover {
    border-color: #333;
    background-color: #777;
    color: rgba(255,255,255,.8);
}

[class*="Btn"][data-icon],
[class*="Btn"][data-icon-right] {
    position: relative;
    align-items: center;
    column-gap: .33em;
}

[class*="Btn"][data-icon]::before {
    display: block;
    content: "";
    width: 1em;
    height: 1em;
    background: no-repeat center center;
    background-size: contain;
    opacity: .7;
    transition: inherit;
}

[class*="Btn"][data-icon-right]::after {
    display: block;
    content: "";
    width: 1em;
    height: 1em;
    background: no-repeat center center;
    background-size: contain;
    opacity: .7;
    transition: inherit;
}

[class*="Btn"][data-icon="share"]::before {
    background-image: url("./../img/share.png");
}

[class*="Btn"][data-icon="chevron-left"]::before {
    background-image: url("./../img/chevron-left.png");
}

[class*="Btn"][data-icon="chevron-right"]::before {
    background-image: url("./../img/chevron-right.png");
}

[class*="Btn"][data-icon="chevron-top"]::before {
    background-image: url("./../img/chevron-top.png");
}

[class*="Btn"][data-icon="chevron-bottom"]::before {
    background-image: url("./../img/chevron-bottom.png");
}

[class*="Btn"][data-icon="edit"]::before {
    background-image: url("./../img/edit.png");
}

[class*="Btn"][data-icon="arrow-short-right"]::before {
    background-image: url("./../img/arrow-short-right.png");
}

[class*="Btn"][data-icon="rotate"]::before {
    background-image: url("./../img/rotate.png");
}

[class*="Btn"].normalBtn[data-icon="remove"]::before {
    background-image: url("./../img/cross.png");

    /** red color **/
    filter: brightness(0) saturate(100%) invert(19%) sepia(96%) saturate(7490%) hue-rotate(356deg) brightness(97%) contrast(118%);
}

[class*="Btn"][data-icon="plus"]::before {
    background-image: url("./../img/plus.png");
}

/** icons on the right **/
[class*="Btn"][data-icon-right="arrow-short-right"]::after {
    background-image: url("./../img/arrow-short-right.png");
}

/** indentation of bootstrap icons **/
[class*="Btn"] > i:first-child {
    margin-right: .3em;
}

.normalBtn[disabled],
.secondaryBtn[disabled],
.primaryBtn[disabled] {
    pointer-events: none;
    cursor: default;
    opacity: .4;
}

[class*="Btn"].withLoading {
    color: transparent!important;
    background-image: url("../img/loading.gif");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto 50%;
}


/** making icons white **/
.primaryBtn[data-icon]::before {
    opacity: .9;
    filter: brightness(0) invert(1);
}

/** making icons white **/
.secondaryBtn[data-icon]:hover::before {
    filter: brightness(0) invert(1);
}

.normalBtn[data-icon]:hover::before,
.secondaryBtn[data-icon]:hover::before {
    opacity: 1;
}

.iconButton {
    padding-left: .4em;
    padding-right: .4em;
}


/** buttons size **/
.btnSm {
    height: 1.4em;
    padding-left: .3em;
    padding-right: .3em;

    font-size: .85em;
    font-weight: 300;
}

.btnSm[data-icon]::before {
    width: .7em;
    height: .7em;
}

.notActive {
    cursor: default;
    pointer-events: none;
}

.buttonsGroup {
    display: flex;
    align-items: center;
    column-gap: 2px;
}




/** form elements **/


.formGroup {
    display: flex;
    flex-direction: column;
    row-gap: .35em;
}

.formGroup + .formGroup {
    margin-top: 1.2em;
}

.formGroupRow {
    flex-direction: initial;
    row-gap: initial;
}

.formGroupRow .formGroup {
    flex: 1;
}

.formGroupRow .formGroup + .formGroup {
    margin-top: 0;
    margin-left: 1.2em;
}

.formLabel {
    font-weight: 500;
    display: block;
}

.formLabel.required::after {
    content: '*';
    color: mediumvioletred;
    font-size: .8em;
    margin-left: .1em;
}

.formElement {
    display: block;
    background-color: white;
}

input.formElement[type="text"],
input.formElement[type="password"],
input.formElement[type="email"],
input.formElement[type="url"],
input.formElement[type="date"],
input.formElement[type="time"],
input.formElement[type="search"] {
    border: 1px solid #aaa;
    height: 2.3em;;
    padding-left: .5em;
    padding-right: .5em;
    font-size: .93em;

    border-radius: .3em;
}

textarea.formElement {
    border: 1px solid #aaa;
    min-height: 2.3em;;
    padding: .5em;
    line-height: 1.3;
    max-height: 40vh;
    resize: vertical;
    font-size: .93em;

    border-radius: .3em;
}

select.formElement {
    border: 1px solid #aaa;
    padding: .5em;
    border-radius: .3em;
}

select.formElement[multiple] option:checked {
    background-color: rgba(79, 70, 229, 0.32);
    color: black;
}

.formElement::placeholder {
    color: rgba(0,0,0,.35)
}

.formElement[readonly] {
    color: #aaa;
    background-color: rgba(0, 0, 0, .07);
    cursor: default;
}

.simpleBadge {
    font-size: .8em;
    height: 1em;
    border-radius: .5em;
    padding-left: .7em;
    padding-right: .7em;
    display: inline-flex;
    align-items: center;

    background-color: black;
    color: white;

    padding-top: 0.2em;
    padding-bottom: .2em;
    height: initial;
}

.simpleBadgeEmpty {
    background-color: white;
    border: 1px solid #ddd;
    color: #aaa;
}

.simpleBadgePrimary,
.simpleBadgeInfo {
    background-color: dodgerblue;
    color: white;
}

.simpleBadgeSuccess {
    background-color: rgba(60,179,113,0.08);
    color: #1e7e4a;
}

.simpleBadgeWarning {
    background-color: rgba(255,140,0,0.08);
    color: #a05000;
}

.simpleBadgeDanger {
    background-color: mediumvioletred;
    color: white;
}



/** messages **/
.simpleMessage {
    margin-top: 1.2em;
    margin-bottom: 1.2em;


    background-color: white;
    border: 1px solid #666;
    color: #666;
    padding: .4em 1.1em;
    border-radius: 2px;
    font-size: .93em;
}

.simpleMessageInfo {
    border-color: dodgerblue;
    background-color: rgba(30, 144, 255, 0.15);
    color: #005985;
}

.simpleMessageError {
    border-color: orangered;
    background-color: rgba(255,69,0,0.08);
    color: #cc3300;
}





/* ── Toggle ── */

.aldevakit-toggle {
    display: inline-flex;
    align-items: center;
    column-gap: .6em;
    cursor: pointer;
    user-select: none;
}

.aldevakit-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.aldevakit-toggle-track {
    position: relative;
    display: inline-block;
    width: 2.2em;
    height: 1.25em;
    border-radius: 100px;
    background-color: rgba(0,0,0,0.15);
    transition: background-color ease-in-out .15s;
    flex-shrink: 0;
}

.aldevakit-toggle-thumb {
    position: absolute;
    top: 50%;
    left: .15em;
    transform: translateY(-50%);
    width: .95em;
    height: .95em;
    border-radius: 100px;
    background-color: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    transition: left ease-in-out .15s;
}

/* Checked state */
.aldevakit-toggle-input:checked + .aldevakit-toggle-track {
    background-color: deepskyblue;
}

.aldevakit-toggle-input:checked + .aldevakit-toggle-track .aldevakit-toggle-thumb {
    left: calc(100% - .95em - .15em);
}

/* Disabled state */
.aldevakit-toggle-input:disabled + .aldevakit-toggle-track {
    opacity: .45;
    cursor: not-allowed;
}

.aldevakit-toggle-input:disabled ~ .aldevakit-toggle-label {
    opacity: .45;
    cursor: not-allowed;
}

.aldevakit-toggle-label {
    font-size: .9em;
    line-height: 1.2;
}










.aldeva-flag {
    /** needs to include unit **/
    --top-offset: 0px;

    position: fixed;
    right: 40px;
    top: calc(40px + var(--top-offset));

    /** above modals */
    z-index: 1001;

    opacity: 0;
    transition: opacity ease-in-out 291ms, transform cubic-bezier(0.42, 0, 0.11, 1.67) 291ms;
    background-color: white;
    min-width: 300px;
    max-height: 45vw;

    transform: translateY(-200px);
}

.aldeva-flag[data-shown="true"] {
    opacity: 1;
    transform: translateY(0);
}

.aldeva-flag-inner {
    border: 1px solid #aaa;
    background-color: white;
    padding: 1em 1.2em;
    font-size: .89em;
    line-height: 1.35;

    position: relative;
}

.aldeva-flag[data-is-dismissable="true"] .aldeva-flag-inner {
    padding-right: 2.9em;
}

.aldeva-flag-default .aldeva-flag-inner {

}

.aldeva-flag-success .aldeva-flag-inner {
    border-color: mediumseagreen;
    background-color: rgba(60,179,113,0.08);
    color: #1e7e4a;
}

.aldeva-flag-info .aldeva-flag-inner {
    border-color: deepskyblue;
    background-color: rgba(0,191,255,0.08);
    color: #0077aa;
}

.aldeva-flag-error .aldeva-flag-inner {
    border-color: orangered;
    background-color: rgba(255,69,0,0.08);
    color: #cc3300;
}

.aldeva-flag-warning .aldeva-flag-inner {
    border-color: darkorange;
    background-color: rgba(255,140,0,0.08);
    color: #a05000;
}


.aldeva-flag-dismiss-btn {
    position: absolute;
    display: block;
    top: 50%;
    transform: translateY(-50%);
    right: 9px;
    height: 1.4em;
    width: 1.4em;

    opacity: .7;

    transition: opacity ease-in-out .15s;

    /* The "X" shape */
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6L6 18M6 6l12 12' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;

    /* For Safari */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6L6 18M6 6l12 12' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
}

.aldeva-flag-dismiss-btn:hover {
    opacity: 1;
}










/** dropdowns **/
.aldeva-dropdown {
    position: relative;
}
.aldeva-dropdown-trigger {

}

.aldeva-dropdown-items {
    position: absolute;
    z-index: 10;

    top: 100%;
    right: 0;
    margin-top: .2em;

    display: flex;
    flex-direction: column;

    min-width: 110px;

    background-color: white;
    border-radius: 5px;
    padding-top: .2em;
    padding-bottom: .2em;

    /** inspired by atlaskit **/
    box-shadow: 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214F;

    max-height: 0;
    overflow: hidden;
    opacity: 0;

    transition: all ease-in-out .15s, transform cubic-bezier(0.42, 0, 0.11, 1.67) 291ms;

    /** closing opening is slow **/
    transition-duration: 149ms;
}

.aldeva-dropdown[data-open="true"] .aldeva-dropdown-items {
    max-height: 5000px;
    opacity: 1;

    /** initial opening is slow **/
    transition-duration: 49ms;
}


.aldeva-dropdown-item {
    padding: .75em;
    user-select: none;
    cursor: pointer;

    font-size: .93em;

    transition: background-color ease-in-out .15s;
    background-color: white;

    white-space: nowrap;
}

.aldeva-dropdown-item[data-disabled="true"] {
    opacity: .45;
    background-color: rgba(0,0,0,.08) !important;
    cursor: not-allowed;
}


.aldeva-dropdown-item:hover {
    /** inspired by atlaskit **/
    background-color: #f4f5f7;
}

.aldeva-dropdown-item[data-selected="true"] {
    background-color: rgba(0, 0, 0, .1);
    font-weight: 500;
}