:root {
    --verySmall:  5px;
    --small:      10px;
    --normal:     20px;
    --medium:     30px;
    --big:        50px;
    --veryBig:    70px;
    --giga:       100px;    
}
  
*, *::before, *::after {box-sizing: border-box;font-family: "Poppins", sans-serif !important;}

body{padding: 0 0 50px 0; margin: 0; background-color: #fff; font-size: 16px; font-family: "Poppins", sans-serif; color: #000;}
a {color: #000;}
.display-flex{ display: flex;}
.vertical-center{align-items: center;}
.horizontal-center{justify-content: center;}
.text-center{text-align: center;}
.text-right{text-align: right;}
.font-normal{ font-size: 15px !important;}
button{ cursor: pointer;}
.row{--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-top:calc(-1 * var(--bs-gutter-y));margin-right:calc(-.5 * var(--bs-gutter-x));margin-left:calc(-.5 * var(--bs-gutter-x)); width: auto;}
.row>*{box-sizing:border-box;flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-top:var(--bs-gutter-y)}

[class*="gg-icon-"] { display: block; -webkit-mask-repeat: no-repeat; background-color: var(--colorIcon); font-size: 1rem;-webkit-mask-position: center;margin: 0 3px;display: -webkit-inline-box;}
[class*="gg-icon-"]:before {content: '';display: inherit;width: 1em;background-repeat: no-repeat;background-size: contain;}
.gg-icon-loading{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='25' cy='10' r='2'/%3E%3Ccircle opacity='.3' cx='25' cy='40' r='2'/%3E%3Ccircle opacity='.3' cx='32.5' cy='12' r='2'/%3E%3Ccircle opacity='.3' cx='17.5' cy='38' r='2'/%3E%3Ccircle opacity='.93' cx='17.5' cy='12' r='2'/%3E%3Ccircle opacity='.3' cx='32.5' cy='38' r='2'/%3E%3Ccircle opacity='.65' cx='10' cy='25' r='2'/%3E%3Ccircle opacity='.3' cx='40' cy='25' r='2'/%3E%3Ccircle opacity='.86' cx='12' cy='17.5' r='2'/%3E%3Ccircle opacity='.3' cx='38' cy='32.5' r='2'/%3E%3Ccircle opacity='.44' cx='12' cy='32.5' r='2'/%3E%3Ccircle opacity='.3' cx='38' cy='17.5' r='2'/%3E%3C/svg%3E");
    background: #000;
    width: 25px; height: 25px;
}
.fa-pulse {
    -webkit-animation: fa-spin 1s infinite steps(12);
    animation: fa-spin 1s infinite steps(12);
}
.gg-icon-x-error-circle{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' class='bi bi-x-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}
@keyframes fa-spin {
  0% {
      -webkit-transform: rotate(0deg); transform: rotate(0deg);
  }
  100% {
      -webkit-transform: rotate(359deg); transform: rotate(359deg);
  }
}

.font-very-small{font-size: 8px;}
.font-small     {font-size: 10px;}
.font-normal    {font-size: 14px;}
.font-medium    {font-size: 25px;}
.font-big       {font-size: 35px;}
.font-very-big  {font-size: 45px;}

.btn{width: 100%; padding: 7px; border-radius: 9px; background: #000; border: 1px solid #000; color: #fff;}

.col-full{ width: 100%;}
.col-auto{flex:0 0 auto;width:auto}
.col-1 {flex:0 0 auto;width:8.33333333%}
.col-2 {flex:0 0 auto;width:16.66666667%}
.col-3 {flex:0 0 auto;width:25%}
.col-4 {flex:0 0 auto;width:33.33333333%}
.col-5 {flex:0 0 auto;width:41.66666667%}
.col-6 {flex:0 0 auto;width:50%}
.col-7 {flex:0 0 auto;width:58.33333333%}
.col-8 {flex:0 0 auto;width:66.66666667%}
.col-9 {flex:0 0 auto;width:75%}
.col-10{flex:0 0 auto;width:83.33333333%}
.col-11{flex:0 0 auto;width:91.66666667%}
.col-12{flex:0 0 auto;width:100%}

/* Margin */
.m-very-small{margin:         var(--verySmall);}
.m-t-very-small{margin-top:     var(--verySmall);}
.m-r-very-small{margin-right:   var(--verySmall);}
.m-b-very-small{margin-bottom:  var(--verySmall);}
.m-l-very-small{margin-left:    var(--verySmall);}

  .m-small{margin:        var(--small);}
.m-t-small{margin-top:    var(--small);}
.m-r-small{margin-right:  var(--small);}
.m-b-small{margin-bottom: var(--small);}
.m-l-small{margin-left:   var(--small);}

  .m-normal{margin:        var(--normal);}
.m-t-normal{margin-top:    var(--normal);}
.m-r-normal{margin-right:  var(--normal);}
.m-b-normal{margin-bottom: var(--normal);}
.m-l-normal{margin-left:   var(--normal);}

  .m-medium{margin:         var(--medium);}
.m-t-medium{margin-top:     var(--medium);}
.m-r-medium{margin-right:   var(--medium);}
.m-b-medium{margin-bottom:  var(--medium);}
.m-l-medium{margin-left:    var(--medium);}

  .m-big{margin:        var(--big);}
.m-t-big{margin-top:    var(--big);}
.m-r-big{margin-right:  var(--big);}
.m-b-big{margin-bottom: var(--big);}
.m-l-big{margin-left:   var(--big);}

  .m-very-big{margin:        var(--veryBig);}
.m-t-very-big{margin-top:    var(--veryBig);}
.m-r-very-big{margin-right:  var(--veryBig);}
.m-b-very-big{margin-bottom: var(--veryBig);}
.m-l-very-big{margin-left:   var(--veryBig);}

  .m-giga{margin:        var(--giga);}
.m-t-giga{margin-top:    var(--giga);}
.m-r-giga{margin-right:  var(--giga);}
.m-b-giga{margin-bottom: var(--giga);}
.m-l-giga{margin-left:   var(--giga);}

/* Padding */
.p-very-small{padding:         var(--verySmall);}
.p-t-very-small{padding-top:     var(--verySmall);}
.p-r-very-small{padding-right:   var(--verySmall);}
.p-b-very-small{padding-bottom:  var(--verySmall);}
.p-l-very-small{padding-left:    var(--verySmall);}

  .p-small{padding:        var(--small);}
.p-t-small{padding-top:    var(--small);}
.p-r-small{padding-right:  var(--small);}
.p-b-small{padding-bottom: var(--small);}
.p-l-small{padding-left:   var(--small);}

  .p-normal{padding:        var(--normal);}
.p-t-normal{padding-top:    var(--normal);}
.p-r-normal{padding-right:  var(--normal);}
.p-b-normal{padding-bottom: var(--normal);}
.p-l-normal{padding-left:   var(--normal);}

  .p-medium{padding:         var(--medium);}
.p-t-medium{padding-top:     var(--medium);}
.p-r-medium{padding-right:   var(--medium);}
.p-b-medium{padding-bottom:  var(--medium);}
.p-l-medium{padding-left:    var(--medium);}

  .p-big{padding:        var(--big);}
.p-t-big{padding-top:    var(--big);}
.p-r-big{padding-right:  var(--big);}
.p-b-big{padding-bottom: var(--big);}
.p-l-big{padding-left:   var(--big);}

  .p-very-big{padding:        var(--veryBig);}
.p-t-very-big{padding-top:    var(--veryBig);}
.p-r-very-big{padding-right:  var(--veryBig);}
.p-b-very-big{padding-bottom: var(--veryBig);}
.p-l-very-big{padding-left:   var(--veryBig);}

  .p-giga{padding:        var(--giga);}
.p-t-giga{padding-top:    var(--giga);}
.p-r-giga{padding-right:  var(--giga);}
.p-b-giga{padding-bottom: var(--giga);}
.p-l-giga{padding-left:   var(--giga);}

/*-----------*/
header{width: 100%; background-color: #fff; padding: 10px 0;     box-shadow: 4px 0px 10px rgb(0 0 0 / 5%);}
.logo{width: fit-content;}
.logo img{width: 95px; height: 24px;}
.div-button-action{font-size: 12px; width: fit-content; margin: 0 0 0 auto;}
.container {max-width: 400px; width:90%; margin: 0 auto;}

.input{border: 1px solid #2A2A2A; border-radius: 8px; padding: 6px 8px; background: transparent; width: -webkit-fill-available; min-height: 42px; resize: none; font-family: 'Poppins';  font-size: 16px; position: relative;}
.input-btn{padding: 6px 5px;}
.btn-option{ border-radius: 6px; padding: 5px; text-align: center; background:transparent; color: #2A2A2A; cursor:pointer}
.btn-option.on{ background: #2A2A2A; color: #fff;}
.text1{ font-size: 14px; font-weight: 500;}
.text2{ font-size: 16px; font-weight: 300;}
.cupom-ok{ font-size: 12px; font-weight: 300; text-decoration: line-through; font-style: italic;}
.text3{ font-size: 18px; font-weight: 500;}

details {display: block;  width: 100%; transition: all 0.3s ease;padding: 8px; border-radius: 10px;}
details summary {display: flex; cursor: pointer; justify-content: flex-start; align-items: center;font-size: 16px;transition: all 0.3s ease; color: #000000;font-weight: 700; height: 30px;}
details summary .arrow{ position: absolute; right: 13px;}
details summary::-webkit-details-marker {display: none;transition: all 0.3s ease;}
details[open]{ background: var(--menu-on);}
details[open] summary .arrow{ transform: rotate(90deg);}

.input-cor{width: -webkit-fill-available;height: 50px;margin: 5px;border-radius: 6px; border: 3px outset  #d2d2d2; cursor: pointer; position: relative; overflow: hidden;}
.input-cor.on{border: 3px ridge #000;}
.dark{background-color: #1F1F1F;}
.classic{background-color: #f6f6f6;}
.red{background: -webkit-linear-gradient(to right, #e35d5b, #e53935);background: linear-gradient(to right, #e35d5b, #e53935);}

.btn-finalizar{ font-size: 24px; font-weight: 500; padding: 10px 0; border-radius: 20px; background: #00a650; color: #fff; display: flex; align-items: center; justify-content: center; width: 100%; border: 0; z-index: 13;}

.cupom {display: block;  width: 100%; transition: all 0.3s ease;padding: 0px;}
.cupom summary {display: flex; cursor: pointer; justify-content: flex-start; align-items: center;font-size: 12px;transition: all 0.3s ease; color: #000000;font-weight: 400;}
.fechar-cupom{    position: absolute; right: 0; top: -25px; color: #e53935; display: flex; align-items: center; font-size: 11px;z-index: -1;}
.div-cupom{ padding: 10px; background: #f8f9fa; border: 1px solid #dee2e6; color: #494949; border-radius: 8px; font-size: 13px; position: relative;}
.btn-cupom{    background: #000; border: 0; width: 100%; height: 100%; border-radius: 8px; color: #fff; justify-content: center; align-items: center; display: grid;}

.div-error-validate,.div-error-validate-msg{ background: #f8d7da; padding: 10px 10px; border-radius: 5px; border: 1px solid #f1aeb5; color: #58151c; position: fixed; bottom: 20px; left: 5%; max-width: 400px; margin: 0 auto; width: 90%; position: sticky; z-index: 30; margin-top: 20px; font-size: 12px;}

.div-error-validate hr{    border: 0; margin: 5px 0; border-bottom: 1px solid #f1aeb5;}
.error{color: red; font-size: 14px;}

.div-alert-camera{background: #cff4fc; padding: 10px 10px; border-radius: 5px; border: 1px solid #9eeaf9; color: #055179; position: fixed; max-width: 400px; margin: 0 auto; width: 100%; position: sticky; z-index: 30; font-size: 12px; display: flex; align-items: flex-start;}

.div-msg-error { text-align: left; background: #f8d7da;  border-radius: 8px; padding: 13px; border: 1px  solid #f1aeb5; font-size: 12px; width: 100%; margin: 0; display: block; position: relative; top: 0; left: 0; max-width: 100%; margin-top: 20px;}

.alert{ position: relative; background: #fcfcfd; border: 1px solid #e9ecef; color: #495057; padding: 10px 14px; border-radius: 16px; width: 100%; margin-top: 20px;}
.alert.success{background: #d1e7dd; border: 1px solid #a3cfbb; color: #0a3622;}
.alert.failure{background: #f8d7da; border: 1px solid #f1aeb5; color: #58151c;}
.alert.pending{background: #fff3cd; border: 1px solid #ffe69c; color: #664d03;}

.alert .x{ position: absolute; top: 5px; right: 14px; cursor: pointer;}

.alert.success hr{border:0; border-bottom: 1px solid #a3cfbb;}
.alert.failure hr{border:0; border-bottom: 1px solid #f1aeb5;}
.alert.pending hr{border:0; border-bottom: 1px solid #ffe69c;}

.alert .title-group{ display: flex; align-items: center;}
.alert .title{ font-size: 16px; font-weight: 500;}
.alert .text{ font-size: 13px; opacity: 0.9;}

.alert-status{ width: fit-content; position: relative; font-size: 12px; background: #fcfcfd; border: 1px solid #e9ecef; color: #495057; padding: 2px 5px; border-radius: 5px;}
.alert-status.approved{background: #d1e7dd; border: 1px solid #a3cfbb; color: #0a3622;}
.alert-status.failure{background: #f8d7da; border: 1px solid #f1aeb5; color: #58151c;}
.alert-status.pending{background: #fff3cd; border: 1px solid #ffe69c; color: #664d03;}

.item-purchased{ background: #ffffff; border-radius: 16px; width: 100%; border: 1px solid #DEDEDE; position: relative; }
.item-purchased-group-header{ display: flex; align-items: center;  margin: 20px 18px 0; }
.btn-edit-info{ margin: 0 0 0 auto; color: dodgerblue;font-size: 12px;}
.item-purchased .title{font-size: 20px; font-weight: 500; margin: 18px 18px 0; padding: 0 0 11px 0;border-bottom: 1px #dedede dashed;}
.item-purchased-group-date{padding: 16px 18px 18px; width: 100%; display: flex;}
.item-purchased-group-date-text1{ color: #909090; font-size:14px; font-weight: 300;}
.item-purchased-group-date-text2{color: #545454; font-size:18px; font-weight: 500;}
.item-purchased-group-date-l{margin: 0 auto 0 0 ;}
.item-purchased-group-date-r{margin: 0 0 0 auto; text-align: right;}
.item-qrcode{ width: 100%; border: 1px solid #000; border-radius: 0 0 16px 16px; background: #000; padding: 15px 0; text-align: center; font-size: 18px; font-weight: 600; color: #fff; display: flex; align-items: center; justify-content: center; text-decoration: none;}
.item-qrcode-off{border: 1px solid #d9d9d9; border-radius: 0 0 16px 16px; background: #d9d9d9; color: #494949; font-size: 16px;}

/*Result*/
.input-cor.classic::before,.input-cor.classic::after{opacity: 1; content: ''; position: absolute; width: 20px; height: 20px; border-radius: 100%; background: red; filter: blur(18px);}
.result{border: 1px solid #000; border-radius: 26px; background: #f6f6f6; box-shadow: 0 0px 50px rgb(0 0 0 / 10%); overflow: hidden; position: relative;}
.result .dark{ background-color: #1F1F1F;}
.result .classic::before,.result .classic::after{opacity: 1; content: ''; position: absolute; width: 150px; height: 150px; border-radius: 100%; background: red; filter: blur(150px);}
.result .classic::before,.input-cor.classic::before{ top: 0; left: 0;}
.result .classic::after,.input-cor.classic::after{ bottom: 0; right: 0;}

.result .red {background: #e53935;  /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #e35d5b, #e53935);  /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #e35d5b, #e53935); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ }
.result .container {max-width: 400px; width:90%; margin: 0 auto; padding: 20px 0 60px 0;}
.result .logo{ width: 95px; height: 24px; margin: 0 auto 20px auto; background-image: url(/image/logo.png?v=1); background-repeat: no-repeat; background-position: center;}
.result .dark .logo{background-image: url(/image/logo-dark.png?v=1);}
.result .red .logo{background-image: url(/image/logo-red.png?v=2);}
.result .box-photo{ margin: 0 auto; margin-bottom: 20px; border-radius: 26px; width: 100%; min-height: 600px; background: #fff; overflow: hidden; position: relative; z-index: 2;}
.result .filter1{position: absolute; width: 100%; height: 100%; z-index: 0; bottom:0%; left: 0; background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 60%);}
.result .div-photos{ width: 100%; height: 100%; position: absolute;}
.result .photo{ width: 100%; height: 100%; position: relative; background-size:cover; background-position:center;}
.result .infos { position: absolute; bottom: 0; z-index: 12; padding: 25px;}
.result h1{color: #fff; font-size: 25px; font-weight: 500; margin: 0 0 4px 0;}
.result .juntos{ color: #fff; font-size: 15px; font-style: italic; margin-bottom: 12px;}
.result .group-calendar,
.result .group-clock{ display: flex;}
.result .group-calendar svg, 
.result .group-clock svg{ color:#fff; width: 13px; margin-right: 8px;}
.result .group-calendar .text, 
.result .group-clock .text{ color: #fff; font-size: 13px; font-weight: 200;}
.result .group-calendar span, 
.result .group-clock span{ font-weight: 500;}
.result .mensagem{ font-size: 16px; color:#6F7485; width: 100%; margin: 0 auto; line-height: 26px;}
.result .dark .mensagem, .red .mensagem{color:#E7E1D4;}
.result .story-slider { position: relative; width: 100%; height: 100%; overflow: hidden; background-color: #000; cursor: pointer; }
.result .story { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s ease-in-out; }
.result .story.active { opacity: 1; }
.result .story img { width: 100%; height: 100%; object-fit: cover; }
.result .progress-container { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: flex; width: 90%; border-radius: 5px; }
.result .progress-bar { flex: 1; margin: 0 5px; height: 5px; background-color: #ffffff96; position: relative; border-radius: 5px; }
.result .progress-bar .progress { height: 100%; background-color: #fff; width: 0; border-radius: 5px;}
.result .prev{top:0; left: 0; width: 50%; height: 100%; z-index: 10; position: absolute; cursor: pointer;}
.result .next{top:0; right: 0; width: 50%; height: 100%; z-index: 10; position: absolute; cursor: pointer;}

.div-login-link{ font-size: 12px;}
.div-register-link{ font-size: 12px; text-align: right;}

.relative{ position: relative;}

.img-edit{max-width: 50px;}
.btn-edit-img{ font-size: 12px;}


.btn-edit-img{color: #006ed5;  border: 1px solid #006ed5; display: flex; padding: 5px; font-size: 11px; margin-top: 5px; background: #fff;  border-radius: 4px; display: flex; align-items: center;}
.btn-edit-img svg{ width: 13px; margin-right: 3px;}

.btn-cancel-img{color: red;   border: 1px solid red; display: flex; padding: 5px; font-size: 11px; margin-top: 5px; background: #fff;  border-radius: 4px; display: flex; align-items: center;}
.btn-cancel-img svg{ width: 13px; margin-right: 3px;}

.baixar-qrcode{width: 100%; padding: 10px; border-radius: 20px; border: 1px solid #000; color: #fff; background:#000; font-size: 16px;}
.view-site{width: 100%; padding: 10px; border-radius: 20px; margin-top: 15px; border: 1px solid #000; color: #000; background: #fff; font-size: 16px; text-align: center; text-decoration: none;}

.ideias-mensagens {display: block;  width: 100%; transition: all 0.3s ease;padding: 0px;}
.ideias-mensagens summary {display: flex; cursor: pointer; justify-content: flex-start; align-items: center; font-size: 12px; transition: all 0.3s ease; font-weight: 400; position: absolute; right: 0; top: -30px; color: #0d6efd;}
.fechar-ideias-mensagens{position: absolute; top: 5px; color: #e53935; display: flex; align-items: center; font-size: 11px; right: 0; cursor: pointer;}
.group-imsg:before { position: absolute; content: '"'; font-size: 90px; color: #e5e5e5; top: -11px; left: 4px; z-index: 2;}
.imsg{ cursor: pointer; border-radius: 8px; border: 1px solid rgb(223 223 223); padding: 13px; color: #000; margin: 5px 0; font-size: 14px; background: #ffffff; position: relative; padding-bottom: 35px; padding-left: 30px; text-align: justify; font-size: 12px; line-height: 24px;}
.imsg:after { text-align: right; content: 'Clique aqui para usar esse'; position: absolute; width: 96%; bottom: 6px; right: 13px; color: #0d6efd; font-size: 12px; display: block; left: 2%; border-top: 1px solid #dfdfdf; font-weight: 600; }
.group-ideias-mesagens{    padding: 10px; background: #f1f1f1; border-radius: 10px; height: 310px; overflow: auto; margin-bottom: 50px; margin-top: 32px;}

.group-resumo{padding: 20px; border-radius: 10px; border: 1px solid #D6D6D6; font-size:15px;}
.title-resumo{ color: #000; font-weight: 500;}
.resumo-item{color:#848484;}
.resumo-valor{color:#000; font-weight: 500; text-align: right;}
.input-cupom-final{ min-height: 0; font-size: 13px; width:95%}
.porce-cupom{ text-align: right;}
.valor-final-cupom{text-align: right;}
.text-total-compra{text-align: right; font-weight: 700; }
.line-cupom-resumo{ border:none; border-bottom: 1px solid #E0E0E0;}

.select2-container--default .select2-selection--single{border: 1px solid #2A2A2A; border-radius: 8px; padding: 6px 8px; background: transparent; width: -webkit-fill-available; min-height: 42px; resize: none; font-family: 'Poppins'; font-size: 16px; position: relative;}
span.select2-selection__rendered { display: contents !important; }
.select2-selection__clear{display: none;}

.circle-bg{    position: fixed; width: 150px; height: 150px; border-radius: 100%; background: red; filter: blur(150px); z-index: -1; opacity: 0.4;}
.circle-bg.top{ top: 0; left: 0;}
.circle-bg.bottom{ bottom: 0; right: 0;}

#playlist { list-style-type: none; padding: 0; width: 100%; }
#playlist li {    display: flex; align-items: center; align-items: center; padding: 5px 10px; border-radius: 5px;}
.play-btn, .parar-btn {    cursor: pointer; margin-right: 10px; display: flex; align-items: center; display: flex; align-items: center; background: #e1e1e1; padding: 5px; border-radius: 5px; width: 100%;}
.parar-btn { display: none; background: #c9c9c9;}
.circle-control{width: 32px; display: flex; align-items: center; justify-content: center; height: 32px; border-radius: 100%; background: #000; margin-right: 12px;}
.circle-control svg{color:#fff;}
.band{font-size: 15px; font-weight: 500; line-height: 15px;}
.name-music{font-size: 12px; font-style: italic;}
.escolher{width: fit-content; margin: 0 0 0 auto; border: 1px solid #000; padding: 2px 6px; color: #000; font-size: 12px; border-radius: 5px; cursor: pointer; height: 42px; display: flex; align-items: center;}
.escolhido{display: flex; background: #000; color: #fff;}