.w4-wrapper{
    position: relative;
    box-shadow: 1px 1px 4px lightgrey;
    overflow: hidden;
    border-radius: 12px;
    text-align: left;
    margin: 0 auto;
}

.widget4-colors{
    display: grid;
    grid-template: 'w1 w2 w3 w4';
    overflow: hidden;
    transition: transform 0.5s;
}

.color-1, .color-2 , .color-3 , .color-4{
    width: 100%rem;
    height: 6rem;
    cursor: pointer;
}

.color-1:hover, .color-2:hover , .color-3:hover , .color-4:hover{
    transform: scale(1.1);
    transition: transform 0.5s;
    
}

.color-selected{
    background: #2E2E34 !important;
}

.color-1{
    
    background:transparent linear-gradient(91deg, #992C7E 0%, #098FDC 100%) 0% 0% no-repeat padding-box;
    
}

.color-2{
    background: transparent linear-gradient(50deg, #098FDC 0%, #0D8D3A 100%) 0% 0% no-repeat padding-box;
}

.color-3{
    background:linear-gradient(230deg, #F2B705 0%, #0D8D3A 100%) 0% 0% ;
}

.color-4{
    background:linear-gradient(50deg, #F2B705 0%, #F14C26 100%) 0% 0%;
}

.w4-text{
    text-align: center;
    color:#282828;
    height: 4rem;
    padding: 1rem;
}


/* color toggle */

/* para cor do texto */

.red-toggled-text{
    color: #F14C26 !important;
}

.green-toggled-text{
    color:  #0D8D3A !important;
}

.blue-toggled-text{
    color: #098FDC !important;
}

.purple-toggled-text{
    color: #992C7E !important;
}

.red-toggled-bg{
    background-color: #F14C26 !important;
}

.green-toggled-bg{
    background-color:  #0D8D3A !important;
}

.blue-toggled-bg{
    background-color: #098FDC !important;
}

.purple-toggled-bg{
    background-color: #992C7E !important;
}

/* para cor de fundo btn */

.red-toggled{
    background:linear-gradient(50deg, #F2B705 0%, #F14C26 100%) 0% 0% !important;
}

.green-toggled{
    background: linear-gradient(230deg, #F2B705 0%, #0D8D3A 100%) 0% 0% !important;
}

.blue-toggled{
    background: transparent linear-gradient(50deg, #098FDC 0%, #0D8D3A 100%) 0% 0% no-repeat padding-box !important;
}

.purple-toggled{
    background: transparent linear-gradient(91deg, #992C7E 0%, #098FDC 100%) 0% 0% no-repeat padding-box !important;
}

/*  img toggle*/

.absolute-img{
   
}