:root{
    --sky:#10a7e725; /* 500 teailwind*/
    --d-sky:#10a5e7; /* 800 teailwind*/

    --rose:#ea499825;
    --d-rose:#ea4998;

    --amber:#fa9b0925;
    --d-amber:#fa9b09;

    --emerald:#16b7a725;
    --d-emerald: #16b7a7;

    --orange:#fa731725;
    --d-orange:#fa7317;


    --primary_color: #7e2efb;

}


h1{
    font-size: 3rem !important;
}
h2{
    font-size: 2.2rem !important;
}
h3{
    font-size: 1.4rem !important;
}
h4{
    font-size: 1.2rem !important;
}
h5{
    font-size: 1.1rem !important;
}

#navbar {
    width: calc(100% - 256px);
    z-index: 1000 !important;
    /* background-color: #7e2efb; */
}




/* fields */
input, 
#id_url,
textarea{
    background-color: #f9fafb !important;
    /* background-color: #1e67b1 !important; */
}


input:active{
    border-radius: 1px blue solid !important;
}




#error_1_id_url{
    padding-top: 1em !important;
}














/* ------------------------------------ */
/* mobile */
/* ------------------------------------ */
@media only screen and (max-width: 640px) {

    #navbar {
        width: 100%
    }
}


.rotateIcon {
    transition: transform 0.5s ease-in-out;
}



/* for add site button */
.rotating-icon {
    transition: transform 0.5s ease-in-out;
}



/* for all ssls button */
.rotating {
    animation: rotate 360ms linear infinite;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}





/* server button colors */

.btn1 {
    background-color: var(--sky);
    color: var(--d-sky);
    border: 2px solid var(--d-sky);
    /* Additional styling as needed */
}
.btn1:focus{
    outline: #0ea4e988 2px solid;
}
.btn2 {
    background-color: var(--rose);
    color: var(--d-rose);
    border: 1px solid var(--d-rose);
    /* Additional styling as needed */
}
.btn2:focus{
    outline: #f43f5e88 2px solid;
}
.btn3 {
    background-color: var(--emerald);
    color: var(--d-emerald);
    border: 2px solid var(--d-emerald);
    /* Additional styling as needed */
}
.btn3:focus{
    outline: #10b98188 2px solid;
}
.btn4 {
    background-color: var(--amber);
    color: var(--d-amber);
    border: 2px solid var(--d-amber);
    /* Additional styling as needed */
}
.btn4:focus{
    outline: #92400e88 2px solid;
}
.btn5{
    background-color: var(--orange);
    color: var(--d-orange);
    border: 2px solid var(--d-orange);
    /* Additional styling as needed */
}
.btn5:focus{
    outline: #9a341288 3px solid;
}


.server-link-button {
    display: inline-block;
    padding: 8px 16px;
    font-size: 14px;
    text-decoration: none;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
}





/* toast */
.toast-container {
    position: fixed;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}



.toast {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.toast.show {
    opacity: 1;
}