.dotAnima{
   width: 11.5px;
   height: 11.5px;
   background-color: rgb(37, 37, 37);
   clip-path: circle(40%);
   position: relative;
   display: inline-block;
   opacity: 0;
   margin: 0% 1%;
}


.cbp_error_message{
font-size: .8em;
width: 100%;
position: absolute;
height: auto;
padding: 5px 0px;
background: white;
color: red;
text-align: center;
line-height: 20px;
top: 91.5%;
font-weight: 700;
opacity: 0;
z-index: 2;
}
.cbp_custom_branding_label{
   position: fixed;
    top: 90%;
    width: 100%;
    text-align: center;
    font-size: .8em;
    color:rgb(34, 34, 34);

}

.cbp_liscensediv{
   width:22%;
   height: 200px;
   border: 2px solid black;
   background: white;
   position: absolute;
   right: 2.5%;
   top: 17.5%;
}
.inputTextAreaCBP{
   text-align: left !important;
   width:100% !important;
   height: 90px !important;
   outline: none !important;
   border-top: none !important;
   border-left: none !important;
   border-right: none !important;
   border-bottom: 1px solid #000 !important;
}
input[type='tel'] {
   width: 100% !important;
}
.inputNameCBP,.inputEmailCBP,.inputtelephonecbp{
   height:35px !important;
   width:100% !important;
   border-top: none !important;
   border-left: none !important;
   border-right: none !important;
   border-bottom: 1px solid #000 !important;

}
#cbpformsubmitR{
   left: -15% !important;
}
#cbpformsubmitL{
   left: 15% !important;
}
.cbpformsubmit{
   position: relative;
    margin: 0 auto !important;
    width: 60% !important;
    height: 40px !important;
    left: 20% !important;
    line-height: 5px !important;
    border-radius: 5px !important;
    margin-top: 5% !important;
}
.cbp_shortcodediv{
   width:22%;
   height: 125px;
   border: 2px solid black;
   background: white;
   position: absolute;
   right: 2.5%;
   top:10%;
}
#gretleft{
   left: 2.5%;

}
#gretright{
   right: 2.5%;

}
.chatBotGreetingsDiv{
   opacity: 0;
   width: 12.5%;
   height: auto;
   position: fixed;

}
.chatBotGreetingsMsg{
   position: relative;
   margin-top: 5%;
   border-radius: 5px;
   padding: 15px;
   background-color: white;
   border: 1.5px solid rgb(193, 192, 194);
   color: #000 !important;
}
.chatBotGreetingsCloseIcon{
   background-image: url('clos.png');
   background-size: contain;
   background-repeat: no-repeat;
   width: 80%;
   height: 80%;
   position: absolute;
   left: 10%;
   top: 10%;

}
.chatBotGreetingsClose{
   border: .5px solid rgb(193, 192, 194);
   background-color: #fff;
   opacity: 0;
   cursor: pointer;
   z-index: 20;
   border-radius: 100%;
 
   width: 20px;
   height: 20px;
   position: absolute;
   left: -2%;
   top: .5%;
}
.chatBotGreetingsOption:hover{
   transform: scale(.975);
   border: 1.5px solid rgb(173, 173, 173);


}
.chatBotGreetingsOption{
   background-color: white;
   border: 1.5px solid rgb(193, 192, 194);
   transform: scale(1);
   transition: .4s linear;
   cursor: pointer;
   position: relative;
   margin-top: 2%;
   border-radius: 5px;
   padding: 10px;
   color: #000 !important;
   width: 50%;
   left: 50%;
}
#formCbpL{

   left: 15% !important;

}
#formCbpR{

   left: -15% !important;

}
.formCbp input{
   text-align: center;
}
.formCbp textarea{
   text-align: center;
}
.formCbp{
   position: relative;
   width: 70% !important;
   background-color:#fff !important;
   border-radius: 20px !important;
   padding: 14px 11px !important;
}
.formCbp input[type='tel'] {
   width: 100% !important;
   border-top: none !important;
   border-left: none !important;
   border-right: none !important;
   border-bottom: 1px solid #000 !important;
}
.cbp_liscensedivRTL{
   width:20%;
   height: 300px;
   border: 2px solid black;
   background: white;
   position: absolute;
   right: 75%;
   top: 15%;
   padding:0% 1%;
}
.cbp_shortcodedivRTL{
   padding:0% 1%;
   width:20%;
   height: 100px;
   border: 2px solid black;
   background: white;
   position: absolute;
   right: 75%;
   top:7.5%;
}


#cbp_shortcodelineRTL{
   cursor: pointer;
   width: 50px;
   font-size: 1em;
   background-color: #f0dd74;
   text-align: center;
   padding: 0px 5px;
   position: absolute;
   z-index: 4;
   right: 70%;
   top: 45%;
   height: 30px;
   line-height: 30px;
}

.cbp_shortcodeline{
   cursor: pointer;
   width: 50px;
   font-size: 1em;
   background-color: #f0dd74;
   text-align: center;
   padding: 0px 5px;
   position: absolute;
   z-index: 4;
   right: 5%;
   top: 45%;
   height: 30px;
   line-height: 30px;
}
.wrapcbpRTL::-webkit-scrollbar {
   width: 20px;
 }

 /* Track */
 .wrapcbpRTL::-webkit-scrollbar-track {
   box-shadow: inset 0 5px 5px rgb(0, 0, 0);
   border-radius: 0px;
 }

 /* Handle */
 .wrapcbpRTL::-webkit-scrollbar-thumb {
   background: rgb(29, 29, 29);
   border-radius: 0px;
 }

 .faqScreenChatBot::-webkit-scrollbar-thumb {
   background: rgb(0, 0, 0);
   border-radius: 0px;
 }


 .faqScreenChatBot::-webkit-scrollbar {
   /* width: 10px; */
 }

 /* Track */
 .faqScreenChatBot::-webkit-scrollbar-track {
   box-shadow: inset 0 5px 5px rgb(0, 0, 0);
   border-radius: 0px;
 }

 #rightD{
    right: 2.5%;
 }
 #leftD{
    left: 2.5%;
 }


 .wrapcbpOptions::-webkit-scrollbar {
   width: 20px;
 }

.tareaWrapper{
   margin: .25% 0 ;
}
.cbp_zero_input{
   visibility: hidden;
   width: 0px !important;
   height: 0px !important;
   
}
.holderBotDiv{
    z-index:100000 !important;
    width: 20% !important;
    height: 60%;
    background-color: #fff !important;
    border: 2px solid rgb(193, 192, 194) !important;
  
    position: fixed;
    top: 25%;
    display: none;
   opacity: 0;

}
.holderBotDivOp2{
   z-index:100000 !important;
   width: 20% !important;
   height: 60%;
   background-color: rgb(193, 192, 194);
   border-radius: 0px !important;
   position: fixed;
   top: 25%;
   display: none;
  opacity: 0;
}
.chatBotHeaderOP2{
   border-radius: 0px !important;
    width: 100%;
    height: 25%;
    position: absolute;
    top: 0%;
    left: 0%;
    background-color: #a87be3;
}
#holderchatright
{
   transform: scale(.75) translateX(20%) translateY(20%);

   right: 2.5% !important;

}
#holderchatleft
{
   transform: scale(.75) translateX(-20%) translateY(20%);

   left: 2.5% !important;

}

.chatBotHeader{
    width: 100%;
    height: 12.5%;
    position: absolute;
    top: 0%;
    left: 0%;
    background-color: #a87be3;
}
.welcomeMsg{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0%;
}
.chatBotHeaderAssistantImage{
    width: 55%;
    height: 80%;
    position: absolute;
    background-image: url(./avatar.png);
    background-size: contain;
    background-repeat: no-repeat;
    left: 2%;
    top: 10%;
}
.chatBotHeaderWelcome {
   width: 50%;
   font-size: .95em !important;
   color: white !important;
   text-align: left !important;
   position: absolute !important;
   top: 30% !important;
   left: 25% !important;
}


.chatBotBtc{
   opacity: 0;
    z-index: 15 !important;
  width: 65px !important;
  height: 65px;
  background-color: rgb(93, 93, 240);
  clip-path: circle();
  position: fixed;
  outline: none;
  top: 87.5%;
  cursor: pointer;
}
.colorpick-eyedropper-input-trigger{
   display: none !important;
}


#chatbtcright{
   right: 2.5%;
}
#chatbtcleft{
   left: 2.5%;
}

#chatboticonright{
   /* background-image: url(./open.png); */

}
#chatboticonleft{
   /* background-image: url(./openL.png); */
}

.chatBotProgress{
   width: 100%;
   position: fixed;
   height: 10px;
   overflow: hidden;
   background-color: white;
   z-index: 5;
}
.chatBotProgressBar{
   transition: 2.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   background-color: blue;
   transform: translateX(-100%);
}
.chatBotBtcIcon{

  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  left: 5%;
  top: 5%;
  width: 90%;
  height: 90%;
  
}
#closeCbp{
   left: 20%;
   top: 20%;
   width: 60%;
   height: 60%;
   background-image: url(./x.png);
}
#openCbp{
   background-image: url(./open.png);

}
.chatBotChatHolder{
   width: 100%;
   height: 90%;
   position: absolute;
   top: 0%;
   left: 0%;
}
.welcomeScreenChatBot{
   z-index: 2;
   width: 100%;
   height: 100%;
   position: absolute;
   left: 0%;
   top: 0%;

}

/* Hide scrollbar for IE, Edge and Firefox */


.chatScreenChatBot::-webkit-scrollbar {
   /* display: none; */
 }


 .chatScreenChatBot::-webkit-scrollbar-track {
   box-shadow: inset 0 5px 5px rgb(0, 0, 0);
   border-radius: 0px;
 }

 /* Handle */
 .chatScreenChatBot::-webkit-scrollbar-thumb {
   background: rgb(29, 29, 29);
   border-radius: 0px;
 }

input{
   font-size: 16px !important;
}

.cbp_front_slider_container {
   width: 50%;
   position: relative;
   display: block;
   left: 25%;
   margin: 4% 0%;
}

.chatScreenChatBot{
   overflow-x: hidden !important;
   -ms-overflow-style: none;
   scrollbar-width: none;
   overflow-y: scroll;
   z-index: 1;
   width: 100%;
   height: 98%;
   position: absolute;
   left: 0%;
   top: 0%;
   opacity: 1;
   display: block;
}
.faqScreenChatBot{
   -ms-overflow-style: none;  /* IE and Edge */
scrollbar-width: none;  /* Firefox */
   overflow-y: scroll;
   z-index: 1;
   width: 100%;
   height: 100%;
   position: absolute;
   left: 0%;
   top: 0%;
   opacity: 0;
   display: none;
}
.option{
   cursor: pointer;
   position: relative;
   width: 55%;
   left: 22.5%;
   height: 45px;
   margin: 5% 0;
   text-align: center;
   background-color: rgb(93, 93, 240);
   color: beige;
   border-radius: 5px;
   line-height: 40px;
   top: 30%;

}
.restartBtc{
   cursor: pointer;
   clip-path: circle();
   width: 35px;
   height: 35px;
   position: absolute;
   right: 6%;
   display: none;
   opacity: 0;
   top: 45%;
}
.backBtc{
   cursor: pointer;
clip-path: circle();
width: 45px;
height: 45px;
position: absolute;
right: 5%;
display: none;
opacity: 0;
top: 20%;
}
.backBtc0{
   cursor: pointer;
clip-path: circle();
width: 45px;
height: 45px;
position: absolute;
right: 5%;
display: none;
opacity: 0;
top: 20%;
}
.restartBtcIcon{
   width: 60%;
   height: 60%;
   position: absolute;
   top: 20%;
   left: 20%;
   background-image: url(./resa.png);
   background-repeat: no-repeat;
   background-size: contain;
}
.backBtcIcon{
   width: 60%;
   height: 60%;
   position: absolute;
   top: 20%;
   left: 20%;
   background-image: url(./arrow.png);
   background-repeat: no-repeat;
   background-size: contain;

}
.backBtcIcon0{
   width: 70%;
   height: 70%;
   position: absolute;
   top: 15%;
   left: 15%;
   background-image: url(./arrow.png);
   background-repeat: no-repeat;
   background-size: contain;

}
.chatBotForm{
   border-top:2px solid rgb(209, 209, 209) !important;
   border-bottom:2px solid rgb(209, 209, 209) !important;
   z-index: 2;
   display: none;
   width: 100%;
   left: 0%;
   height: 15%;
   position: absolute;
   top: 97.5%;
}
.msgINPUT{

   outline: none !important;
   width: 100% !important;
   height: 100% !important;
   border: none !important;
   border-radius: 5px !important;
   display: inline !important;
   background-color: white !important;
   right: 0% !important;
}
.msgINPUTRTL{

   outline: none !important;
   width: 100% !important;
   height: 100% !important;
   border: none !important;
   border-radius: 5px !important;
   display: inline !important;
   background-color: white !important;
   right: 0% !important;
}

.subBTC{
   text-decoration: none !important;
   display: inline !important;
   cursor: pointer !important;
   border: none !important;
   width: 47.5px !important;
   font-size: .85em !important;
   border-radius: 7.5px !important;
   height: 47.5px !important;
   background-color: rgb(93, 93, 240) !important;
   color: white !important;
   outline: none !important;
   overflow: hidden !important;
   padding: 0 !important;
   line-height: 30px !important;
   right: 2.5%;
   top: 1vh !important;
   position: absolute !important;
   box-shadow: none !important;

}
.subBTCRTL {
   text-decoration: none !important;
   box-shadow: none !important;
   display: inline !important;
   cursor: pointer !important;
   border: none !important;
   width: 47.5px !important;
   font-size: .85em !important;
   border-radius: 7.5px !important;
   height: 47.5px !important;
   background-color: rgb(93, 93, 240) !important;
   color: white !important;
   outline: none !important;
   overflow: hidden !important;
   padding: 0 !important;
   line-height: 30px !important;
   right: 2.5% !important;
   top: 1vh !important;
   position: absolute !important;
}
.linkDivCbp p {
   line-height: 35px !important;
}
.linkDivCbps{
   width: 150px !important;
   height: 35px !important;
   border-radius: 25px !important;
   /* background-color: white !important; */
   text-align: center !important;
   position: relative !important;
   margin: 2.5% auto !important;
   font-size: .9em !important;
   line-height: 35px !important;
   cursor: pointer !important;
   text-decoration: none !important;

}
.linkDivCbps a{

   color: inherit !important;
   text-decoration: none !important;
}
.linkDivCbp a{
   color: inherit !important;
   text-decoration: none !important;
}
.linkDivCbp{
   padding: 0 4.3%;
   width: fit-content !important;
   height: 35px !important;
   border-radius: 25px !important;
   /* background-color: white !important; */
   text-align: center !important;
   position: relative !important;
   margin: 0 auto !important;
   font-size: .9em !important;
   line-height: 35px !important;
   cursor: pointer !important;
   text-decoration: none !important;

}
.chatBotMessage{
   width: 60%;
   left: 15%;
   font-size: .85em !important;
   padding: 3% 2% !important;
   border-radius: 10px;
   background-color: rgb(233, 233, 233);
   position: relative;

}
.chatBotMessageUser{
   width: 60%;
   left: 25%;
   font-size: .85em  !important;
   padding: 3% 2% !important;
   border-radius: 10px;
   background-color: rgb(233, 233, 233);
   position: relative;

}
.chatBotHolderMSG{
   display: block;
position: relative;
   margin:3% 0%;
   width: 100%;


}

.chatBotMessageIcon{
   position: absolute;
   width: 45px;
   top: 10px;
   left: 1.5%;
   height: 45px;
   background-size: contain;
   background-repeat: no-repeat;
   /* background-image: url(./avatar.png); */

}



.chatBotMessageIconUser{
   position: absolute;
   width: 45px;
   top: 10px;
   right: 1.5%;
   height: 45px;
   background-size:contain;
   background-repeat: no-repeat;
   background-image: url(./userIcon.png);
}










.wrapfaq{
   width: 90% !important;
   position: relative !important;
   left: 5% !important;
}


.accordion {
   position: relative !important;
   left: 5% !important;
   max-width: 90% !important;
   width: 90% !important;
 }

 .togglefaq {
   display: none !important;
 }

 .optiond {
   position: relative !important;
   margin-bottom: 1em !important;
 }

 .titlefaq,
 .contentfaq {
   -webkit-backface-visibility: hidden !important;
           backface-visibility: hidden !important;
   transform: translateZ(0) !important;
   transition: all 0.2s !important;
 }

 .titlefaq {
   background: #fff ;
   padding: 1em !important;
   display: block !important;
   font-weight: bold !important;
   border-radius: 5px !important;
 }

 .titlefaqRTL,
 .contentfaqRTL {
   -webkit-backface-visibility: hidden !important;
           backface-visibility: hidden !important;
   transform: translateZ(0) !important;
   transition: all 0.2s !important;
 }

 .titlefaqRTL {
   background: #fff ;
   padding: 1em !important;
   display: block !important;
   font-weight: bold !important;
   border-radius: 5px !important;

 }

 .titlefaq:after, .titlefaq:before {
   content: "" !important;
   position: absolute !important;
   right: 1.25em !important;
   top: 1.25em !important;
   width: 2px !important;
   height: 0.75em !important;
   background-color: #fff !important;
   transition: all 0.2s !important;
 }

 .titlefaq:after {
   transform: rotate(90deg) !important;
 }
 .titlefaqRTL:after {
   transform: rotate(90deg) !important;
 }

 .contentfaq {
   max-height: 0 !important;
   width: 90%;
   left: 5%;
   position: relative;
   overflow: hidden !important;
   background-color: #fff;
   border-radius: 5px !important;

 }
 .contentfaq p {
   margin: 0 !important;
   padding: 0.5em 1em 1em !important;
   font-size: 0.9em !important;
   line-height: 1.5 !important;
 }
 .contentfaqRTL p {
  margin: 0 !important;
  padding: 0.5em 1em 1em !important;
  font-size: 0.9em !important;
  line-height: 1.5 !important;
}

 .togglefaq:checked + .titlefaq + .contentfaq {
   max-height: 500px !important;
 }
 .togglefaq:checked + .titlefaq:before {
   transform: rotate(90deg) !important;
 }
 .togglefaq:checked + .titlefaqRTL + .contentfaqRTL {
   max-height: 500px !important;
 }
 .togglefaq:checked + .titlefaqRTL:before {
   transform: rotate(90deg) !important;
 }


 @media only screen and (max-width: 1450px) {
   .chatBotGreetingsDiv{
      width: 22.5%;
      height: auto;
      right: 2.5%;
    
      position: fixed;
   
   }
   .chatBotForm {
      border-top: 1px solid rgb(209, 209, 209) !important;
      border-bottom: 1px solid rgb(209, 209, 209) !important;
      z-index: 2;
      display: none;
      width: 100%;
      left: 0%;
      height: 15%;
      position: absolute;
      top: 97.5%;
   }
   .cbp_liscensediv{
      width:25%;
      height: 300px;
      border: 2px solid black;
      background: white;
      position: absolute;
      right: 5%;
      top: 15%;
   }
   .cbp_shortcodediv{
      width:25%;
      height: 100px;
      border: 2px solid black;
      background: white;
      position: absolute;
      right: 5%;
      top:7.5%;
   }

   .wrapcbpOptions tr{

      overflow-x: hidden !important;
      position: relative !important;
      left: 0% !important;
      display: inline-block;
      width: 49% !important;
      height: 26vh !important;
      padding: 1% 0%;
      padding-left: .5%;
      overflow-y: hidden !important;
   }
   .wrapcbpOptionsRTL tr{
   
      overflow-x: hidden !important;
      position: relative !important;
      left: 0% !important;
      display: inline-block;
      width: 49% !important;
      height: 26vh !important;
      padding: 1% 0%;
      padding-left: .5%;
      overflow-y: hidden !important;
   }
   
   .chatBotHeaderWelcome{
      font-size: .9em !important;
      color: white;
      text-align: left;
      position: absolute;
      top: 35%;
      left: 35%;
      width: 60%;

   }
.holderBotDiv{
   font-size: 16px !important;
    width: 30% !important;
    height: 70%;
    background-color: #fff !important;
    border: 2px solid rgb(193, 192, 194) !important;
    position: fixed;
    top: 15%;
    display: none;
   opacity: 0;
}
.tAreacbp{
   width: 550px !important;
   height: 30px !important;
}
 }

@media only screen and (max-width: 767px) {
   .chatBotGreetingsDiv {
      width: 42.5% !important;
   }
   .chatBotGreetingsClose{
      opacity: 1 !important;
      cursor: pointer;
      z-index: 20;
      background-size: contain;
      background-repeat: no-repeat;
      width: 20px;
      height: 20px;
      position: absolute;
      left: -2%;
      top: .5%;
   }
   .backBtc0{
      top: 20% !important;

   }
   .backBtc{
      top:20% !important;
   }
   .restartBtc{
      top: 48.5% !important;
      right: 6.2% !important;
   }
   .subBTCRTL,.subBTC {
      top: -.5vh !important;
   }
   .chatScreenChatBot {
      overflow-x: hidden !important;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-y: scroll;
    z-index: 1;
    width: 100%;
    height: 98%;
    position: absolute;
    left: 0%;
    top: 0;
   }
   .chatBotHeader {
      width: 100%;
      height: 15%;
      position: absolute;
      top: 0%;
      left: 0%;
   }
   input{
      font-size: 16px !important;
   }
   .option {
      cursor: pointer;
      position: relative;
      width: 60%;
      left: 20%;
      height: 45px;
      margin: 5% 0;
      text-align: center;
      background-color: rgb(93, 93, 240);
      color: beige;
      border-radius: 5px;
      line-height: 45px;
      top: 30%;
      font-size: 1.25em !important;
  }
   .chatBotHeaderWelcome{
      width: 70%;
      font-size: 1.2em !important;
      color: white;
      text-align: left;
      position: absolute;
      top: 35%;
      left: 35%;

   }
.holderBotDiv{
   font-size: 16px !important;
   width: 95% !important;
   height: 80%;
   background-color: #fff !important;
   border: 2px solid rgb(193, 192, 194) !important;
   position: fixed;
   top: 5%;
   opacity: 0;
}

.chatBotForm{
   z-index: 2;
   display: none;
   width: 100%;
   left: 0%;
   height: 15%;
   position: absolute !important;
   top: 97.5% !important;
   border-top: 1.25px solid rgb(209, 209, 209) !important;
   border-bottom:none !important;

}


}




/* rtl styles */
.optionRTL{
   cursor: pointer;
   position: relative;
   width: 55%;
   left: -22.5%;
   height: 45px;
   margin: 5% 0;
   text-align: center;
   background-color: rgb(93, 93, 240);
   color: beige;
   border-radius: 5px;
   line-height: 40px;
   top: 30%;
}

.wrapfaqRTL {
   width: 90% !important;
   position: relative !important;
   left: -10% !important;
}


.titlefaqRTL:after, .titlefaqRTL:before {
   content: "" !important;
   position: absolute !important;
   left: 1.25em !important;
   top: 1.25em !important;
   width: 2px !important;
   height: 0.75em !important;
   background-color: #fff !important;
   transition: all 0.2s !important;
}
.contentfaqRTL {
    max-height: 0 !important;
    width: 90%;
    left: -5%;
    position: relative;
    overflow: hidden !important;
    background-color: #fff;
    border-radius: 5px !important;

   }

   .chatBotMessageRTL {
      width: 60%;
      left: -25%;
      font-size: .85em !important;
      padding: 3% 2% !important;
      border-radius: 10px;
      background-color: whitesmoke;
      position: relative;
  }
  .chatBotMessageUserRTL {
   width: 60%;
   left: -15%;
   font-size: .85em !important;
   padding: 3% 2% !important;
   border-radius: 10px;
   background-color: whitesmoke;
   position: relative;
}

















.cont-title {
   color: white;
   font-size: 1.25rem;
   font-weight: 600;
   margin-bottom: 1rem;
 }
 
 .cont-main {
   display: flex;
   flex-wrap: wrap;
   align-content: center;
   width: 100%;
   height: 100%;
   position: relative;
   justify-content: center;
 }
 
 .cont-checkbox {
    box-shadow: none !important;
    outline: none !important;
    margin: 0 .2%;
   width: 40%;
   height: 100%;
   border-radius: var(--border-radius);
   box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
   transition: transform var(--transition);
   display: inline;
   position: relative;

 }
 .inp{
   opacity: 0;
 }


 .cont-checkbox:first-of-type {
   margin-bottom: 0.75rem;
   margin-right: 0.75rem;
 }
 
 .cont-checkbox:active {
   transform: scale(0.9);
 }
 
 .inp {
   display: none;
 }
 
 .inp:checked + label {
   opacity: 1;
   box-shadow: 0 0 0 3px var(--background);
 }
 
 .inp:checked + label img {
   -webkit-filter: none; /* Safari 6.0 - 9.0 */
   filter: none;
 }
 
 .inp:checked + label .cover-checkbox {
   opacity: 1;
   transform: scale(1);
 }
 
 .inp:checked + label .cover-checkbox svg {
   stroke-dashoffset: 0;
 }
 
 .inp label {
   display: inline-block;
   cursor: pointer;
   border-radius: var(--border-radius);
   overflow: hidden;
   width: 100%;
   height: 100%;
   position: relative;
   opacity: 0.6;
 }
 
 .inp label img {
   width: 100%;
   height: 70%;
   object-fit: cover;
   clip-path: polygon(0% 0%, 100% 0, 100% 81%, 50% 100%, 0 81%);
   -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
   filter: grayscale(100%);
 }
 .cbpOpxxx{
   width: 57.5px !important;
   height: 57.5px !important;
 }
 







 .cont-title {
   color: white;
   font-size: 1.25rem;
   font-weight: 600;
   margin-bottom: 1rem;
 }
 
 .cont-main {
   display: flex;
   flex-wrap: wrap;
   align-content: center;
   width: 100%;
   height: 100%;
   position: relative;
   justify-content: center;
 }
 
 .cont-checkbox {
    box-shadow: none !important;
    outline: none !important;
    margin: 0 .2%;
   width: 40%;
   height: 100%;
   border-radius: var(--border-radius);
   box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
   transition: transform var(--transition);
   display: inline;
   position: relative;

 }
 .inp{
   opacity: 0;
 }


 .cont-checkbox:first-of-type {
   margin-bottom: 0.75rem;
   margin-right: 0.75rem;
 }
 
 .cont-checkbox:active {
   transform: scale(0.9);
 }
 
 .inp {
   display: none;
 }
 
 .inp:checked + label {
   opacity: 1;
   box-shadow: 0 0 0 3px var(--background);
 }
 
 .inp:checked + label img {
   -webkit-filter: none; /* Safari 6.0 - 9.0 */
   filter: none;
 }
 
 .inp:checked + label .cover-checkbox {
   opacity: 1;
   transform: scale(1);
 }
 
 .inp:checked + label .cover-checkbox svg {
   stroke-dashoffset: 0;
 }
 
 .inp label {
   display: inline-block;
   cursor: pointer;
   border-radius: var(--border-radius);
   overflow: hidden;
   width: 100%;
   height: 100%;
   position: relative;
   opacity: 0.6;
 }
 
 .inp label img {
   width: 100%;
   height: 70%;
   object-fit: cover;
   clip-path: polygon(0% 0%, 100% 0, 100% 81%, 50% 100%, 0 81%);
   -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
   filter: grayscale(100%);
 }

 .cbpOPBGxxx{
   z-index: 1;
   width: 57.5px !important;
   height: 57.5px !important;
   border: 2px solid black;
   border-radius: 3px;
   background-color: rgba(255, 255, 255, 0.603);
   position: absolute;
   top: -155%;
   left: 27.5%;
 }
 #cbpOPBGRTL{
   z-index: 1;
   width: 350px !important;
   height: 500px !important;
   background-color: #f0dd74c5;
   position: absolute;
   top: 0%;
   left: 44% !important;
 }
 
 .inp label .cover-checkbox {
   position: absolute;
   right: 5px;
   top: 3px;
   z-index: 1;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background: var(--box-shadow);
   border: 2px solid #fff;
   transition: transform var(--transition),
     opacity calc(var(--transition) * 1.2) linear;
   opacity: 0;
   transform: scale(0);
 }
 
  .inp label .cover-checkbox svg {
   width: 13px;
   height: 11px;
   display: inline-block;
   vertical-align: top;
   fill: none;
   margin: 5px 0 0 3px;
   stroke: #fff;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-dasharray: 16px;
   transition: stroke-dashoffset 0.4s ease var(--transition);
   stroke-dashoffset: 16px;
 }
 
  .inp label .info {
   text-align: center;
   margin-top: 0.2rem;
   font-weight: 600;
   font-size: 0.8rem;
 }