* {
    font-family: 'Poppins',
        sans-serif;
    color: var(--text);
}

html {
    /* --background: #e0e0e0; */
    /* --heading: #616161; */
    /* --text: #ADADAD; */
    /* --neumorphic-shadow-default:
        inset 10px 10px 18px #b3b3b300,
        inset -10px -10px 18px #ffffff00,
        10px 10px 20px #b3b3b3,
        -10px -10px 20px #ffffff; */
    /* --neumorphic-shadow-pressed: inset 10px 10px 18px #b3b3b3,
            inset -10px -10px 18px #ffffff,
            10px 10px 20px #b3b3b300,
            -10px -10px 20px #ffffff00; */
    --background: #262626;
    --heading: #dddddd;
    --text: #c4c4c4;
    --neumorphic-shadow-default:
        inset 10px 10px 18px #1e1e1e00,
        inset -10px -10px 18px #2e2e2e00,
        10px 10px 18px #1e1e1e,
        -10px -10px 18px #2e2e2e;
    --neumorphic-shadow-pressed: inset 10px 10px 18px #1e1e1e,
        inset -10px -10px 18px #2e2e2e,
        10px 10px 18px #1e1e1e00,
        -10px -10px 18px #2e2e2e00;
}

body {
    background-color: var(--background);

}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--heading) !important;
}
.bg-dark {
    background-color: var(--background) !important;
}
.neumorphic {
    box-shadow: var(--neumorphic-shadow-default);
    transition: all 250ms ease-in-out;
    border: none !important;
    outline: none !important;
    background-color: var(--background);
}

.neumorphic::hover {
    box-shadow: var(--neumorphic-shadow-pressed);
}

.neumorphic-shadow {
    box-shadow: var(--neumorphic-shadow-default);
    transition: all 250ms ease-in-out;
}

.neumorphic-shadow:hover {
    box-shadow: var(--neumorphic-shadow-pressed);
}

.neumorphic.input {
    width: 100%;
    padding: 1rem;
    border-radius: 2rem;
    margin: 1rem 0;
}
.neumorphic.input.file{
    display: none;
}

.neumorphic-label {
    color: var(--text) !important;
}

.neumorphic.input:focus {
    border-radius: 1rem;
    box-shadow: var(--neumorphic-shadow-pressed);
}

.neumorphic-input-container {
    margin: 1rem 0;
}

.neumorphic.btn {
    width: 33% !important;
    margin: 1rem !important;
    padding: 1rem !important;
    border-radius: 2rem;
    color: var(--text);
    display: block !important;
    margin: 2rem auto !important;
}

.neumorphic.btn:hover {
    border-radius: 1rem;
    color: var(--heading);
    width: 66% !important;
}

.neumorphic.button {
    padding: 1rem;
    border-radius: .5rem;
    border: none !important;
    outline: none !important;
}
.neumorphic.button:hover{
    filter: brightness(120%);
}
.bots {
    padding: 1rem;
}

.bots .bot {
    margin: 2rem 0;
    padding: 1rem;
    border-radius: 1rem;
    display: flex;
    justify-content: space-between;
}

.bot .bot-info {
    display: flex;
    flex-direction: column;
}

.bot-info>* {
    margin: 1rem 0;
    word-wrap: break-word;
}

@media only screen and (max-width: 768px) {
    .bot {
        flex-direction: column;
    }
}

.bot-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.action {
    padding: 1rem;
    width: 3.5rem;
    height: 3.5rem;
    aspect-ratio: 1/1 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2rem;
    margin: 1rem;
    font-size: larger;
}

.action>i {
    color: white !important;
}

.warning {
    border: 0;
    outline: 0;
    background-color: #f5e44e;
    color: var(--background) !important;
}

.warning:hover {
    background-color: #ddd47e;
    color: var(--background) !important;

}

.danger {
    border: 0;
    outline: 0;
    background-color: #753d36;
    color: white !important;
    transition: all 250ms ease-in-out;
}

.danger:hover {
    background-color: #d36d60;
}

.cancel {
    background-color: #6d6d6d;
    transition: all 250ms ease-in-out;
}

.cancel:hover {
    background-color: #a0a0a0;
}

.primary {
    background-color: #2583ff !important;
    border: none;
    outline: none;
    color: white !important;
    transition: all 250ms ease-in-out;
}

.details-container {}

.bot-details {}

.message-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
}

.message-actions .message-action {
    aspect-ratio: 1/1;
    cursor: pointer;
    border-radius: 1rem;
    padding: 1rem;
    margin: 1rem;
    flex: 1 1 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    font-size: large;
    text-align: center;
}

.message-action i {
    font-size: xxx-large;
}

.modal-dialog {
    border-radius: 1rem !important;
}
.bot-setup{
    display: none;
}
.hook-actions{
    border-radius: 1rem;
}
.option-select{
    padding: 1rem;
    text-align: center;
    cursor:pointer;
    border-radius: 1rem;
    aspect-ratio: 1/1;
    text-align: center;
    vertical-align: middle;
    font-size: small;
    text-transform: capitalize;
}
.option-select > i{
    font-size: xx-large;
    margin-bottom: 1rem;
}
.user-select{
    padding: 1rem;
    border-radius: 1rem;
    display: none;
}
.subscribe-container{
    height : 100vh;
}
.os-options{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.os-select{
    background-color: #252525;
    padding: 1rem;
    font-size: xx-large;
    cursor:pointer;
    border-radius: 1rem;
    margin: 1rem 0;
}
.os-select > a{
    text-decoration: none;
    color: white;
}
.br-1{
    border-radius: 1rem;
}