div.form-outline.form-control.zero-clipboard.shadow-sm {
    background-color: rgb(215 238 255 / 70%);
}
button.play {
    background-color: transparent !important;
}

select.model {

    cursor: pointer;
    outline: none;
    padding: .2375rem 2.25rem .2375rem .75rem;
    -moz-padding-start: calc(.75rem - 3px);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.4285714;
    color: inherit;
    background-color: #fff;
    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='%23d9dbde' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: 1px solid #d9dbde;
    border-radius: 4px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}


/* Add this style for the animation */
@keyframes buttonClick {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

/* Add this class to apply the animation */
.btn-clicked {
    animation: buttonClick 0.3s ease-in-out;
}

/* Add this style for the loading spinner */
.spinner-border-sm {
    width: 1.1rem;
    height: 1.1rem;
}

/* Add this class to show the loading state */
.loading {
    /* pointer-events: none; */
    /* Disable button interactions while loading */
    opacity: 0.7;
    /* Optionally reduce opacity while loading */
  
}

.bg {
    background: #ed3269;
    background: -moz-linear-gradient(to left, #ed3269, #f05f3e);
    background: -webkit-linear-gradient(to left, #ed3269, #f05f3e);
    background: linear-gradient(to left, #ed3269, #f05f3e);
    opacity: 0.9;
}

body,
.card .card-body {
    font-family: Inter !important;
}

.card {
    padding-bottom: 15px;
}

.bg-toolbaz {
    background-color: #f05f3e;
}

.output-txt {
    font-family: "Courier";
}

@media (max-width: 991.98px) {
    .lable_txt {
        display: none;
    }

    button em {
        display: none;
    }
}

@media only screen and (min-width: 992px) {
    #sidebar {
        position: sticky;
        align-self: end;
        bottom: 2px;

    }
}

.css-typing {
    font-family: "Courier";
}


.zero-clipboard {
    position: relative;
}

.btn-clipboard {
    position: absolute;
    top: -8px;
    right: -8px;
    border-radius: 3px;

}

#copy {
    background-image: url(https://toolbaz.com/assets/img/copy.png);
    text-align: center;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    background-size: contain;
    opacity: 50%;
}

.copyed {
    opacity: 70% !important;
    width: 22px !important;
    height: 22px !important;
}

.btn-remove {
    position: absolute;
    background-color: transparent !important;
    left: 0px;
    top: 15px;
    z-index: 99;
    opacity: 0.7;
}

em {
    font-size: xx-small;
    padding: 5px;
    color: #9f9f9f;
}

em.lable_txt {
    background: aliceblue;
    padding: 3px;
    border-radius: 5px;
    margin-left: 5px;
}

#main_btn i {
    padding: 5px;
}

#output:focus {
    outline: none;
}

#output:focus-visible {
    outline: none;
}



.swal2-container {
    display: grid;
    position: fixed;
    z-index: 1060;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    grid-template-areas: "top-start     top            top-end" "center-start  center         center-end" "bottom-start  bottom-center  bottom-end" "gap gap gap";
    grid-template-rows: auto auto auto .625em;
    height: 100%;
    padding: .625em .625em 0;
    overflow-x: hidden;
    transition: background-color .1s;
    -webkit-overflow-scrolling: touch
}

.swal2-container::after {
    content: "";
    grid-column: 1/4;
    grid-row: 4;
    height: .625em
}

.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-noanimation {
    background: rgba(0, 0, 0, .4)
}


.swal2-container.swal2-bottom,
.swal2-container.swal2-center,
.swal2-container.swal2-top {
    grid-template-columns: auto minmax(0, 1fr) auto
}

.swal2-container.swal2-center>.swal2-popup {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    justify-self: center
}

.swal2-popup {
    display: none;
    position: relative;
    box-sizing: border-box;
    width: 32em;
    max-width: 100%;
    padding: 0 0 1.25em;
    border: none;
    border-radius: 5px;
    background: #fff;
    font-family: inherit;
    font-size: 1rem
}


.swal2-title {
    position: relative;
    max-width: 100%;
    margin: 0;
    padding: .8em 1em 0;
    color: #595959;
    font-size: 1.875em;
    font-weight: 600;
    text-align: center;
    text-transform: none;
    word-wrap: break-word
}

.swal2-actions {
    display: flex;
    z-index: 1;
    box-sizing: border-box;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 1.25em auto 0;
    padding: 0
}

.swal2-loader {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.2em;
    height: 2.2em;
    margin: 0 1.875em;
    -webkit-animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
    animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
    border-width: .25em;
    border-style: solid;
    border-radius: 100%;
    border-color: #2778c4 transparent #2778c4 transparent
}

.swal2-styled {
    margin: .3125em;
    padding: .625em 1.1em;
    transition: box-shadow .1s;
    box-shadow: 0 0 0 3px transparent;
    font-weight: 500
}

.swal2-styled:not([disabled]) {
    cursor: pointer
}

.swal2-styled.swal2-confirm {
    border: 0;
    border-radius: .25em;
    background: initial;
    background-color: #7367f0;
    color: #fff;
    font-size: 1em
}

.swal2-styled.swal2-deny {
    border: 0;
    border-radius: .25em;
    background: initial;
    background-color: #ea5455;
    color: #fff;
    font-size: 1em
}

.swal2-styled.swal2-cancel {
    border: 0;
    border-radius: .25em;
    background: initial;
    background-color: #6e7d88;
    color: #fff;
    font-size: 1em
}

.swal2-footer {
    justify-content: center;
    margin: 1em 0 0;
    padding: 1em 1em 0;
    border-top: 1px solid #eee;
    color: #545454;
    font-size: 1em
}

.swal2-timer-progress-bar-container {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    grid-column: auto !important;
    height: .25em;
    overflow: hidden;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px
}

.swal2-timer-progress-bar {
    width: 100%;
    height: .25em;
    background: rgba(0, 0, 0, .2)
}

.swal2-image {
    max-width: 100%;
    margin: 2em auto 1em
}

.swal2-close {
    z-index: 2;
    align-items: center;
    justify-content: center;
    width: 1.2em;
    height: 1.2em;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: -1.2em;
    padding: 0;
    overflow: hidden;
    transition: color .1s, box-shadow .1s;
    border: none;
    border-radius: 5px;
    background: 0 0;
    color: #ccc;
    font-family: serif;
    font-family: monospace;
    font-size: 2.5em;
    cursor: pointer;
    justify-self: end
}

.swal2-html-container {
    z-index: 1;
    justify-content: center;
    margin: 0;
    padding: 1em 1.6em .3em;
    color: #545454;
    font-size: 1.125em;
    font-weight: 400;
    line-height: normal;
    text-align: center;
    word-wrap: break-word;
    word-break: break-word
}

.swal2-checkbox,
.swal2-file,
.swal2-input,
.swal2-radio,
.swal2-select,
.swal2-textarea {
    margin: 1em 2em 0
}

.swal2-file,
.swal2-input,
.swal2-textarea {
    box-sizing: border-box;
    width: auto;
    transition: border-color .1s, box-shadow .1s;
    border: 1px solid #d9d9d9;
    border-radius: .1875em;
    background: inherit;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .06), 0 0 0 3px transparent;
    color: inherit;
    font-size: 1.125em
}

.swal2-input {
    height: 2.625em;
    padding: 0 .75em
}

.swal2-file {
    width: 75%;
    margin-right: auto;
    margin-left: auto;
    background: inherit;
    font-size: 1.125em
}

.swal2-textarea {
    height: 6.75em;
    padding: .75em
}

.swal2-select {
    min-width: 50%;
    max-width: 100%;
    padding: .375em .625em;
    background: inherit;
    color: inherit;
    font-size: 1.125em
}

.swal2-checkbox,
.swal2-radio {
    align-items: center;
    justify-content: center;
    background: #fff;
    color: inherit
}

.swal2-validation-message {
    align-items: center;
    justify-content: center;
    margin: 1em 0 0;
    padding: .625em;
    overflow: hidden;
    background: #f0f0f0;
    color: #666;
    font-size: 1em;
    font-weight: 300
}

.swal2-icon {
    position: relative;
    box-sizing: content-box;
    justify-content: center;
    width: 5em;
    height: 5em;
    margin: 2.5em auto .6em;
    border: .25em solid transparent;
    border-radius: 50%;
    border-color: #000;
    font-family: inherit;
    line-height: 5em;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.swal2-icon .swal2-icon-content {
    display: flex;
    align-items: center;
    font-size: 3.75em
}

.swal2-icon.swal2-warning {
    border-color: #facea8;
    color: #f8bb86
}

.swal2-progress-steps {
    flex-wrap: wrap;
    align-items: center;
    max-width: 100%;
    margin: 1.25em auto;
    padding: 0;
    background: inherit;
    font-weight: 600
}

[class^=swal2] {
    -webkit-tap-highlight-color: transparent
}

.swal2-show {
    -webkit-animation: swal2-show .3s;
    animation: swal2-show .3s
}

.swal2-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll
}

body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
    overflow: hidden
}

body.swal2-height-auto {
    height: auto !important
}

.swal2-styled.swal2-default-outline:focus-visible {
    outline: none;

}

.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}

.alert-dismissible .close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.55rem 1.25rem;
    color: inherit;
    cursor: pointer;
    background: transparent;
    border: none;
    font-size: 23px;
}

.range-lable {
    float: right;
}

#show_val {
    padding: 8px 3px;
}

.form-range1 {
    cursor: pointer;
}