/* Estilos para telas extra small (xs) */
@media (max-width: 575px) {
    
    .img-qrcode
    {
        width: 70vw;
        height: auto;
        max-width: 250px;
        max-height: auto;
    }
    
    .coluna-qrcode{      
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    
    .lbl_titulo {
        font-size:22px;
    }
    
    .lbl-titulo {
        font-size: 18px;
    }
    
    .lbl-pasta {
        font-size: 18px;
    }
    
    .lbl_scans {
        font-size:26px;
    }
    
    .btn_dynamic_list {
        width:80px;
        height:80px;
        border-color: #ffffff;
        margin-top: 10px;
        margin-bottom: 6px;
    }
    
    .btn_dynamic_list i {
        font-size: 2rem;
    }
    
    .btn_dynamic_list:hover {
            
        border-top-style: dashed;
        border-right-style: dashed;
        border-bottom-style: dashed;
        border-left-style: dashed;
        border-color: #0f4c81;
        border-top-width: 1px;
        border-right-width: 1px;
        border-bottom-width: 1px;
        border-left-width: 1px;
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
    }

    .coluna-12{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .coluna-titulo{        
        text-align: center;
    }
    

    
}

/* Estilos para telas small (sm) */
@media (min-width: 576px) and (max-width: 767px) {
    
    .img-qrcode
    {
        width: 100%;
        height: auto;
        max-width: 100%;
        max-height: auto;
    }
    
    .coluna-qrcode{      
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }      
    
    .lbl_titulo {
         font-size:16px;
    }
    
    .lbl-titulo {
    }
    
    .lbl-pasta {
    }
    
    .lbl_scans {
    }
    
    .btn_dynamic_list {
        width:40px;
        height:40px;
        /*border-color: #ffffff;
        */
        margin-top: 0px;
        margin-bottom: 6px;
    }    
    
    
    .btn_dynamic_list i {
        font-size: 1rem;
    }
    
    .btn_dynamic_list:hover {
            
        border-top-style: dashed;
        border-right-style: dashed;
        border-bottom-style: dashed;
        border-left-style: dashed;
        border-color: #0f4c81;
        border-top-width: 1px;
        border-right-width: 1px;
        border-bottom-width: 1px;
        border-left-width: 1px;
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
    }

    .coluna-12{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .coluna-titulo{        
        text-align: left;
    } 
    
    .coluna-tres {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
  
}

/* Estilos para telas medium (md) */
@media (min-width: 768px) and (max-width: 991px) {
    
    .img-qrcode
    {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 150px;
    }
    
    .coluna-qrcode{      
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }     
    
    .lbl_titulo {
        font-size:16px;
    }
    
    .lbl-titulo {
    }
    
    .lbl-pasta {
    }
    
    .lbl_scans {
    }
    
    .btn_dynamic_list {
        width:40px;
        height:40px;
        margin-top: 0px;
        margin-bottom: 6px;
    }    
    
    
    .btn_dynamic_list i {
        font-size: 1rem;
    }
    
    .btn_dynamic_list:hover {
            
        border-top-style: dashed;
        border-right-style: dashed;
        border-bottom-style: dashed;
        border-left-style: dashed;
        border-color: #0f4c81;
        border-top-width: 1px;
        border-right-width: 1px;
        border-bottom-width: 1px;
        border-left-width: 1px;
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
    }

    .coluna-12{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .coluna-titulo{        
        text-align: left;
    } 
    
    .coluna-tres {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    
}

/* Estilos para telas large (lg) */
@media (min-width: 992px) and (max-width: 1199px) {
    .img-qrcode
    {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 150px;
    }
    
    .lbl_titulo {
        /*font-size:16px;*/
    }
    
    .lbl-titulo {
        /*font-size: 18px;*/
    }
    
    .lbl-pasta {
        /*font-size: 18px;*/
    }
    
    .lbl_scans {
        /*font-size:26px;*/
    }
    
    .btn_dynamic_list {
        width:40px;
        height:40px;
        border-color: #ffffff !important;
        margin-top: 10px;
        margin-bottom: 6px;
        
        border-top-style: solid;
        border-right-style: solid;
        border-bottom-style: solid;
        border-left-style: solid;
        border-color: #ffffff;
        border-top-width: 1px;
        border-right-width: 1px;
        border-bottom-width: 1px;
        border-left-width: 1px;
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
    }
    
    .btn_dynamic_list i {
        font-size: 20px;
    }
    
    
    .btn_dynamic_list:hover {
        border-top-style: dashed;
        border-right-style: dashed;
        border-bottom-style: dashed;
        border-left-style: dashed;
        border-color: #0f4c81 !important;
        border-top-width: 1px;
        border-right-width: 1px;
        border-bottom-width: 1px;
        border-left-width: 1px;
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
    }
    
    .coluna-tres {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    
    .coluna-qrcode{      
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }       
}

/* Estilos para telas extra large (xl) */
@media (min-width: 1200px) {
    
    .img-qrcode
    {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 150px;
    }
    
    .coluna-qrcode{      
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }         
    
    .lbl_titulo {
        /*font-size:16px;*/
    }
    
    .lbl-titulo {
        /*font-size: 18px;*/
    }
    
    .lbl-pasta {
        /*font-size: 18px;*/
    }
    
    .lbl_scans {
        /*font-size:26px;*/
    }
    
    .btn_dynamic_list {
        width:40px;
        height:40px;
        border-color: #ffffff !important;
        margin-top: 10px;
        margin-bottom: 6px;
        
        border-top-style: solid;
        border-right-style: solid;
        border-bottom-style: solid;
        border-left-style: solid;
        border-color: #ffffff;
        border-top-width: 1px;
        border-right-width: 1px;
        border-bottom-width: 1px;
        border-left-width: 1px;
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
    }
    
    .btn_dynamic_list i {
        font-size: 20px;
    }
    
    .btn_dynamic_list:hover {
        border-top-style: dashed;
        border-right-style: dashed;
        border-bottom-style: dashed;
        border-left-style: dashed;
        border-color: #0f4c81 !important;
        border-top-width: 1px;
        border-right-width: 1px;
        border-bottom-width: 1px;
        border-left-width: 1px;
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
    }
    
    .coluna-tres {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
}


/*ribbon-alex*/
 /*[page-name='Dynamic_List'] .ribbon-alex {*/
    .ribbon-alex {
     position: absolute;
     margin-left: -5px;
     margin-top: -5px;
     /*left: -10px;*/
     /*top: -10px;*/
     z-index: 1;
     overflow: hidden;
     width: 75px;
     height: 75px;
     /*text-align: right;*/
}

/*ribbon-alex*/
 [page-name='Loja'] .ribbon-alex {
     position: absolute;
     margin-left: -0px;
     margin-top: -0px;
     z-index: 1;
     overflow: hidden;
     width: 150px;
     height: 150px;
}


 .ribbon-alex span {
      /*[page-name='Dynamic_List']  .ribbon-alex span {*/
     font-size: 14px;
     font-weight: bold;
     color: #FFF;
     text-align: center;
     /*line-height: 40px;*/
     transform: rotate(-45deg);
     -webkit-transform: rotate(-45deg);
     width: 210px;
     display: block;
     background: rgb(106, 27, 154);
     background: linear-gradient(135deg, rgb(201, 14, 18) 0%, rgb(140, 0, 0) 100%);
     box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
     position: absolute;
     top: 40px;
     left: -40px;
    
}


  [page-name='Dynamic_List']  .ribbon-alex span {
     font-size: 10px;
     font-weight: bold;
     color: #FFF;
     text-align: center;
     line-height: 20px;
     transform: rotate(-45deg);
     -webkit-transform: rotate(-45deg);
     width: 100px;
     display: block;
     background: rgb(106, 27, 154);
     background: linear-gradient(135deg, rgb(201, 14, 18) 0%, rgb(140, 0, 0) 100%);
     box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
     position: absolute;
     top: 19px;
     left: -21px;
    
}
  /*[page-name='Dynamic_List'] .ribbon-alex span::before {*/
.ribbon-alex span::before {
     content: "";
     position: absolute;
     left: 0px;
     top: 100%;
     z-index: -1;
     border-left: 3px solid #600c6e;
     border-right: 3px solid transparent;
     border-bottom: 3px solid transparent;
     border-top: 3px solid #600c6e;
     
}


  [page-name='Dynamic_List'] .ribbon-alex span::before {
     content: "";
     position: absolute;
     left: 0px;
     top: 100%;
     z-index: -1;
     border-left: 3px solid #600c6e;
     border-right: 3px solid transparent;
     border-bottom: 3px solid transparent;
     border-top: 3px solid #600c6e;
     
}
 /*[page-name='Dynamic_List']  .ribbon-alex span::after {*/
      .ribbon-alex span::after {
     content: "";
     position: absolute;
     right: 0px;
     top: 100%;
     z-index: -1;
     border-left: 3px solid transparent;
     border-right: 3px solid #9825ac;
     border-bottom: 3px solid transparent;
     border-top: 3px solid #9825ac;
     
}


 [page-name='Dynamic_List']  .ribbon-alex span::after {
     content: "";
     position: absolute;
     right: 0px;
     top: 100%;
     z-index: -1;
     border-left: 3px solid transparent;
     border-right: 3px solid #9825ac;
     border-bottom: 3px solid transparent;
     border-top: 3px solid #9825ac;
     
}

/*Ajusta a margem inferior dos text_box para 10px*/
[page-name='Dynamic_List'] .col-12.col-sm-6.col-lg-3.col-md-4.mb-10.fb-field-container {
    padding-bottom: 10px !important;
}