/*Boost section - Background*/
.background-img{
    background-image: url('../images/bg-boost-mobile.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}


/*JS*/
.js_bar{
    width: 24px;
    height: 4px;
    margin: 4px auto;
    display: block;
    background-color: #94a3b8;
    transition: all 0.3s ease-in-out;
}

#nav-mobile{
    transition: 0.3s;
    top: 80px;
    height: 0px;
    visibility: hidden;
    overflow: hidden;
}


#nav-mobile.active {
    visibility: visible;
    z-index: 1000;
    height: 300px;
    overflow-y: 0;
}

/*Effect js_bar*/
.js_bar.active:nth-child(2){
   opacity: 0;
}

.js_bar.active:nth-child(1){
    transform: translateY(8px) rotate(135deg);
    background-color: hsl(260, 8%, 14%);
 }

 .js_bar.active:nth-child(3){
    transform: translateY(-8px) rotate(-135deg);
    background-color: hsl(260, 8%, 14%);
 }  

.mini-menu{
    display: none;
}

 /*Tablet and Desktop dimensions*/
 @media (min-width: 780px){
    /*Header Element*/
    .nav-menu{
        display: flex;
    }

    .button_hamburguer{
        display: none;
    }

    /*Active Menu*/
    #nav-mobile.active {
        display: none;
    }

    .background-img{
        background-image: url('../images/bg-boost-desktop.svg');
    }

    .mini-menu{
        display: flex;
    }
    
}



/*JS Shorten Link*/
.js-section-divs {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.shorten-links-container{
    width: 100%;
}

.bg-links{
    display: flex;
    flex-direction: column;
}

.div-p-links{
    background-color: #fff;
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 1.5px;
}

.link-inserted{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.div-links-copy {
    background-color: #fff;
    padding: 12px 16px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
}

.show-link{
    color: hsl(180, 66%, 49%);
    margin-bottom: 12px;
    border: none;
}

.show-link:focus{
    outline: none;
}

.btn-copy{
    background-color: hsl(180, 66%, 49%);
    color: #fff;
    font-weight: 700;
    padding: 8px 0px;
    width: 100%;
    border-radius: 6px;
}


.btn-copy:hover{
    background-color: hsl(257, 27%, 26%);
    transition: 0.2s;
}


/*md*/
@media (min-width: 640px){
    .shorten-links-container{
        width: 66.666667%; /*md:w-8/12 */
    }

}

/*lg*/
@media (min-width: 1024px){
    .shorten-links-container{
        width: 83.333333%; /*lg:w-10/12  */
        background-color: #fff;
        border-radius: 6px;
    }

    .bg-links{
        flex-direction: row;
        align-items: center;
        /*lg:space-y-0*/
        height: 80px;
        justify-content: space-between;
    }

    .div-p-links{
        border-top-right-radius: 0;
        height: 100%;
        display: flex;
        align-items: center;
        width: 50%;
    }

    .div-links-copy {
      border-top-left-radius: 0;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      height: 100%;
      /* lg:space-x-4  */
    }

    .show-link{
        margin-right: 16px;
        margin-top: 10px;
    }

    .btn-copy{
        padding: 8px 32px;
    }
    /* lg:px-8*/

}

/*2xl*/
@media (min-width: 1536px){
    .shorten-links-container{
        width: 75%; /*2xl:w-9/12*/
    }
}


.inputURLSytle::placeholder{
    color: red;
}

.inputURLSytle{
    border: red solid 2px;
}

.messageError{
    color: red;
    font-weight: 300;
}

.btnCopyClicked{
    background-color: hsl(257, 27%, 26%);
}









/* <div class=".shorten-links-container w-full md:w-8/12 lg:w-10/12 2xl:w-9/12 lg:bg-white lg:rounded-md">
    <div class="bg-links flex flex-col space-y-1 bg lg:flex-row lg:items-center lg:space-y-0 lg:h-20 lg:justify-between">
        <div class="div-p-links" bg-white py-3 px-4 rounded-md lg:rounded-r-none lg:h-full lg:flex lg:items-center">
            <p class="link-inserted truncate"></p>
        </div>
        <div class="div-links-copy bg-white py-3 px-4 rounded-md lg:rounded-l-none flex flex-col space-y-2 lg:flex-row lg:items-center lg:h-full lg:space-x-4">
            <p class="show-link text-p_cyan"></p>
            <button class="bg-p_cyan text-white font-bold py-2 w-full rounded-md hover:bg-p_dark_violet lg:px-8">Copy</button>
        </div>
    </div>
</div>  */