/*================================================================ GENERAL */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400&display=swap');

:root{
    --main-color: #218380;
    --main-color-soft: #a5c4c3;
    --main-color-bg: #f6fcf6;
    --main-contrast: #fff;
    --main-text-color: #fff;
    --main-font-family: 'Ubuntu', sans-serif!important;
    --secondary-color: #a5c4c3;
    --opacity-color: #fde0dc;
    --opposite-color:#8d4cb8;
    --invert-color:#de7c7f;
}

body{
    font-family: 'Ubuntu', sans-serif;
    font-weight: 400;
    background: var(--main-color-bg)
}

h1,h2,h3,h4,h5,h6{
    color:var(--opposite-color);
    font-weight: 700!important;
}

.c-color{
    color:var(--main-color);
}

a{
    cursor:pointer;
}

/*================================================================ Sharepage  */
#results-list-container ul li{
    color: #676767;
    border: 0;
}

#results-list-container ul{
    border: 3px solid var(--main-color);
}

/*============================================================== SHARE BUTTONS*/

#share-container ul li {
    background: transparent;
}

.c-icon-down i.c-icon{
 color:var(--main-contrast);
 font-size:1rem;
 margin-right:10px;
 -webkit-text-stroke: 0.5px;
 transition: color .15s ease-in-out,
 background-color .15s ease-in-out,
 border-color .15s ease-in-out,
 box-shadow .15s ease-in-out;
}

.c-icon-down:hover i.c-icon{
 color:var(--main-color);
 -webkit-text-stroke: 1px;
 transition: color .15s ease-in-out,
 background-color .15s ease-in-out,
 border-color .15s ease-in-out,
 box-shadow .15s ease-in-out;
}

.c-icon-down{
    font-weight:400;
    background:var(--main-color);
    border:var(--main-color) solid 2px;
}

.c-icon-down:hover{
    color:var(--main-color);
    background:var(--main-contrast);
    border:var(--main-color) solid 2px;
}

.c-outlook-btn i{
    position: relative;
}

/* .c-outlook-btn i:after{
    content:'o';
    width:18px;
    height:18px;
    font-size:16px;
    line-height:13px;
    font-weight:400;
    font-style: normal;
    color:var(--main-color);
    border: 1px solid;
    border-radius:5px;
    border-color:var(--main-contrast);
    background:var(--main-contrast);
    position:absolute;
    left:-10px;
    top:5px;
    transition: all.15s ease-in-out;
    }

    .c-outlook-btn:hover i:after{
    font-weight:400!important;
    border-color:var(--main-color)!important;
    background:var(--main-color)!important;
    background:var(--main-color)!important;
    color:var(--main-contrast)!important;
    } */


.c-icon-btn i.c-icon,
#intro-steps i.c-icon{
    color:var(--main-color);
    font-size:2.2rem;
}

.c-icon-btn{
    background-color:var(--main-contrast);
    border:var(--main-color) solid 2px;
}

.c-icon-btn:hover{
    background-color:var(--main-color);
    border:var(--main-color) solid 2px;
}

.c-icon-btn:hover i.c-icon{
    color:var(--main-contrast);
}

.c-share-list{
    --bs-list-group-border-color:transparent;
}

.c-icon-btn:before {
    color: var(--main-color);
    position: absolute;
    top:-2px;
    right: 0px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.7em;
    background: white;
    padding: 0px 4px;
    margin: 2px;
    text-align: center;
    border-radius: 20px;
    border: solid 1px var(--opposite-color);

}


/*Max 3 letter word*/
a.c-icon-btn.wa-mob-a:before{content: 'app';}
a.c-icon-btn.wa-desk-a:before{content: 'web';}
a.c-icon-btn.cb-a:before{content: 'url';}
a.c-icon-btn.fb-a:before{content: 'app';}
a.c-icon-btn.in-a:before{content: 'app';}
a.c-icon-btn.qr-a:before{content: 'QR';}
a.c-icon-btn.at-a:before{content: '@';}

/*Hide WEB and APP version of whatsapp*/
@media (min-width: 768px){
    body.not-mobile li#share-wa--mob.list-group-item{
        display:none;
    }
}

@media (max-width: 768px){
    body.is-mobile li#share-wa--desk.list-group-item{
        display:none;
    }
}

  /*Clipboard anImation*/
  li.cb-active a,
  li.cb-active a:hover{
    background:var(--opacity-color)!important;
    color:var(--color-main)!important;
}

li.cb-active .c-icon-btn:hover i.c-icon{
    color:var(--main-color)!important;
}

/*============================================================== INTRO BLOCK*/
.c-hr {
    width: 100%;
    max-width:100%;
    padding-bottom:25px;
    margin: 40px 0;
    position:relative;
}

.c-hr:after {
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    background:var(--main-color);
    height:15px;
    border-radius: 10px 10px 10px 10px;
    margin: 0 10px;
}

.intro-col{
    background-color:var(--main-color)!important;
}

.intro-col h3,
.intro-col p{
    color:var(--main-color-bg);
}

#intro-steps .row.intro-row{
    margin: 0px !important;;
}

#intro-steps .intro-col i.c-icon {
    color: #25D366;
    font-size: 1.5rem;
    padding-left:4px;
}

#intro-steps .intro-col span.wa-branding{
  color: #25D366;
}

/*============================================================== NAV BAR MENU*/
.navbar{
    background-color: var(--main-color);
    color: var(--bs-white);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.navbar-toggler{
    color:var(--main-color-bg);
    border: 2px solid;
}

.navbar-toggler i{
    font-size:2.3rem;
}

.navbar:has(
    .navbar-collapse.collapse.show,
    .navbar-collapse.collapsing
    ){
    box-shadow: 0 8px 6px -6px black;
    }

main.c-defocus{
    opacity:0.5;
}

main{
    opacity:1;
    -webkit-transition:opacity 0.25s ease-in;
    -moz-transition:opacity 0.25s ease-in;
    -ms-transition:opacity 0.25s ease-in;
    -o-transition:opacity 0.25s ease-in;
    transition:opacity 0.25s ease-in;

}

/* body:has(
    button.navbar-toggler:not(.collapsed)
    )
    main{
    opacity:0.5;
    transition:opacity 0.2s ease-in;
    }

main{
    opacity:1;
    transition:opacity 0.01s;

} */


/*================================================================= About*/
.c-goto-btn{
color: var(--opposite-color);
background-color: transparent;
border: 2px solid var(--opposite-color);
}

.c-goto-btn:hover{
    color: var(--main-text-color);
    background-color: var(--opposite-color);
    border: 2px solid var(--opposite-color);
}
/*================================================================= FORM*/
.c-input{
    border: var(--main-color) solid 2px;
    /* color:var(--main-color)!important; */
    /* background-color: var(--secondary-color); */
}

.c-input:focus{
    border-color: var(--main-color);
    box-shadow: 0 0 0 0.25rem var(--main-color-soft);
}

.c-submit-btn:disabled{
    font-weight:600;
    color:var(--main-color);
    background:var(--main-contrast);
    border:var(--main-color) solid 2px;
    opacity: 0.4;
}

.c-submit-btn{
    font-weight:600;
    background:var(--main-color);
    border:var(--main-color) solid 2px;
    -webkit-transition:opacity 0.1s ease-in;
    -moz-transition:opacity 0.1s ease-in;
    -ms-transition:opacity 0.1s ease-in;
    -o-transition:opacity 0.1s ease-in;
    transition:opacity 0.1s ease-in;
}

.c-submit-btn:hover{
    font-weight:600;
    background:var(--main-color);
    border:var(--main-color) solid 2px;
    opacity:0.7;
}

#start-box .input-group .c-input {
    border-top-left-radius: 0.5rem!important;
    border-bottom-left-radius: 0.5rem!important;
}

.c-btn-time.btn{
    border-color:var(--opposite-color);
    color:var(--opposite-color);
    background:transparent;
    margin-right:15px;
    margin-top: 15px;
    border:2px solid;
    }
.btn-check:disabled+.c-btn-time.btn{
    opacity:0.4;
}

.btn-check:checked+.c-btn-time.btn{
    border-color:var(--opposite-color);
    background:var(--opposite-color);
    }

.btn-check+.c-btn-time.btn:hover{
    border-color:var(--opposite-color);
    background:var(--opposite-color);
    }

#input-gr-box:not(.input-group) span.input-group-text{
        display:none;
    }

    input#event-title {
        scroll-margin-top: 100px;
    }

#timeBlock{
    cursor: pointer;
}
/*===================================================================== FLATPICKR*/
/*Fix FP altDateFormat that cause permanent floating, as if active*/
.form-floating input.flatpickr-input:not([value]) + input:not(.active) + label,
.form-floating input.flatpickr-input[value=""] + input:not(.active) + label{
opacity: 1;
transform:none;
}

.flatpickr-calendar{
    font-size:16px;

}

.flatpickr-confirm{
    background: var(--secondary-color);
    color:var(--main-contrast);
    font-size:20px;
    font-weight: 700;
    border-radius: 0 0 5px 5px;
}

.flatpickr-confirm:hover{
    background: var(--main-color);
}

.flatpickr-confirm svg path {
    fill: var(--main-contrast);
    stroke: var(--main-contrast);
    stroke-width: 1.5px;
}

.flatpickr-confirm svg{
    margin-left:5px;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover{
    background: var(--main-color);
    border-color: var(--main-color);
}

.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
    border-color: var(--main-color);
    background:var(--main-color);
    color: var(--main-contrast)
}

.flatpickr-day:hover{
    background:var(--secondary-color);
    border-color: var(--main-color);
}

.flatpickr-day.today {
    border-color: var(--main-color);
}

.flatpickr-day.nextMonthDay:hover{
    background:var(--opacity-color);
    border-color: transparent;
}

.flatpickr-day.today.flatpickr-disabled{
    border-color:var(--opacity-color);
}

.flatpickr-day.nextMonthDay:not(.flatpickr-disabled) {
    color: rgba(57,57,57,0.7);
}

/*============================================================== Footer*/
footer .index-col ul li {
    border:0px;
    background: transparent;
}