/* ---- button ---- */
.button {
    display: inline-block;
    padding: 0.5em 1.0em;
    border: none;
    border-radius: 0.375rem;
    margin: 0;
    cursor: pointer;
    text-decoration: underline;
}

.button:hover {

    --tw-bg-opacity: 0.3;
    background-color: rgb(var(--brand-green) / var(--tw-bg-opacity));

    /*text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);*/
    /*color: #222;*/
}

.button:focus {
    outline: 0;
    /*box-shadow: inset 0 0 0 2px blue;*/
    z-index: 2;
}

.button:active,
.button.is-checked {

    --tw-bg-opacity: 0.8;
    background-color: rgb(var(--brand-green) / var(--tw-bg-opacity));


}

.button.is-checked {
    /*color: white;*/
    /*text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);*/
}

.button:active {
    /*box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);*/
}


/* ---- button-group ---- */
.button-group {
    margin-bottom: 20px;
}

.button-group:after {
    content: '';
    display: block;
    clear: both;
}

.button-group .button {
    float: left;
    border-radius: 0.375rem;
    margin-left: 0;
    margin-right: 1px;
    margin-bottom: 1px;
}


/* ---- isotope ---- */
.grid {
}

/* clear fix */
.grid:after {
    content: '';
    display: block;
    clear: both;
}


/* ---- .element-item ---- */
.element-item {
    position: relative;
    /*width: 100px;
    height: 100px;*/
    margin-top: 0;
    border-radius: 0.5rem;
    border-width: 1px;
    border-style: solid;

    /*--tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity));*/

    /*--tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));*/


  --tw-bg-opacity: 0.1;
  background-color: rgb(var(--brand-green) / var(--tw-bg-opacity));


    /*--tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));*/

    /*padding: 2rem;*/
}

/*.element-item,
.element-item > * {
    margin: 0;
    padding: 0;
}*/

.element-item > * {
    margin: 0;
    padding: 0;
}


.element-item .name {
    position: absolute;
    left: 10px;
    top: 3.5rem;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.9rem;
    font-weight: normal;
    padding-right: 50px;
}

.element-item .symbol {
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 0.9rem;
    /*font-size: 42px;*/
    font-weight: bold;
    /*opacity: 0.4;*/
    padding: 0.5rem;	
    border-radius: 0.5rem;	

    --tw-bg-opacity: 1;
    background-color: rgb(var(--brand-yellow) / var(--tw-bg-opacity));

}

.element-item .number {
    position: absolute;
    right: 8px;
    top: 5px;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;	
}

.element-item .weight {
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 0.7rem;
}


.element-item .distance {
    position: absolute;
    left: 10px;
    bottom: 10px;
    font-size: 0.7rem;
}


/* ---- view table ---- */
.view-table {
    display: flex;
    flex-flow: column nowrap;
}

/*.view-table .element-item {
    position: relative;
    width: 100%;
    flex: 0 0 100%;
    height: 100px;
    
}*/

.view-table .element-item {
    width: 100%;
    height: 15rem;
    margin-bottom: 0.5rem;
}













.badge {
    position: relative;
    /*width: 32px;
    height: 32px;*/
}

.badge::before {
    content: "";
    position: absolute;

top: calc(50% - 24px); /* 24 = половина от 48px */
right: 8px;
width: 48px;
height: 48px;
display: block;

    background-position: right 0.5rem center;

    pointer-events: none;


    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}


@-webkit-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}	
	40% {-webkit-transform: translateY(-30px);}
	60% {-webkit-transform: translateY(-15px);}
}
 
@-moz-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
	40% {-moz-transform: translateY(-30px);}
	60% {-moz-transform: translateY(-15px);}
}
 
@-o-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
	40% {-o-transform: translateY(-30px);}
	60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px);}
	60% {transform: translateY(-15px);}
}

.badge.new::before {

transform-origin: center;
	animation: bounce 2s infinite;
	-webkit-animation: bounce 2s infinite;
	-moz-animation: bounce 2s infinite;
	-o-animation: bounce 2s infinite;

    --tw-bg-opacity: 1;
    background-color: rgb(var(--brand-green) / var(--tw-bg-opacity));

    -webkit-mask: url("https://api.iconify.design/material-symbols:fiber-new-rounded.svg")
                  no-repeat center / 100%;
    mask: url("https://api.iconify.design/material-symbols:fiber-new-rounded.svg")
          no-repeat center / 100%;

}

.badge.open::before {


    --tw-bg-opacity: 0;
    background-color: rgb(var(--brand-green) / var(--tw-bg-opacity));

    -webkit-mask: url("https://api.iconify.design/material-symbols:task-alt-rounded.svg")
                  no-repeat center / 100%;
    mask: url("https://api.iconify.design/material-symbols:task-alt-rounded.svg")
          no-repeat center / 100%;

}

.badge.closed::before {

    --tw-bg-opacity: 1;
    background-color: rgb(var(--brand-green) / var(--tw-bg-opacity));

    -webkit-mask: url("https://api.iconify.design/material-symbols:do-not-disturb-on-rounded.svg")
                  no-repeat center / 100%;
    mask: url("https://api.iconify.design/material-symbols:do-not-disturb-on-rounded.svg")
          no-repeat center / 100%;

}

.badge.development::before {

    --tw-bg-opacity: 1;
    background-color: rgb(var(--brand-green) / var(--tw-bg-opacity));

    -webkit-mask: url("https://api.iconify.design/mdi:tools.svg")
                  no-repeat center / 100%;
    mask: url("https://api.iconify.design/mdi:tools.svg")
          no-repeat center / 100%;

}




.flatpickr-calendar.inline {
    margin: 0 auto;
}

#calendar {
    display: none;
}


.flatpickr-calendar.inline {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    --tw-bg-opacity: 0.8;
    background-color: rgb(var(--brand-green) / var(--tw-bg-opacity)) !important;
    border-color: rgb(var(--brand-green) / var(--tw-bg-opacity)) !important;
    color: #fff !important;
}

.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--brand-green) / var(--tw-bg-opacity)) !important;
    border-color: rgb(var(--brand-green) / var(--tw-bg-opacity)) !important;
}



.flatpickr-calendar.inline {
    width: 100%;
    max-width: 310px;   /* подберите значение */
    margin: 0 auto;
}

.flatpickr-days {
    width: 100% !important;
}

.dayContainer {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

/*.flatpickr-calendar.inline {
    width: 100%;
    max-width: 100%;
}

.flatpickr-days {
    width: 100% !important;
}

.dayContainer {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}*/



#mail,
#buy_tg {
    transition: transform .18s ease, background-color .25s ease, color .25s ease;
}

#mail img,
#buy_tg img {
    transition: transform .25s ease, opacity .25s ease;
}

#mail.sent,
#buy_tg.sent {
    background: rgb(var(--brand-green) / .9);
    /* color: #fff; */
    transform: scale(1);
}

#mail.sending,
#buy_tg.sending {
    transform: scale(.95);
}

#mail.sent img,
#buy_tg.sent img {
    transform: rotate(360deg) scale(1);
}



@media (min-width: 992px){
  #order {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	left: -9999px;
  }

}


@media (min-width: 991px){
   .center {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	left: -9999px;
  }

}


.center {
	text-align: center;
	margin-bottom: 1rem;
}


.remind {
    animation: remind 1.1s cubic-bezier(.25,.8,.25,1);
}

@keyframes remind {
    0%   { transform: translateY(0) scale(1); }

    15%  { transform: translateY(-14px) scale(1.03); }
    30%  { transform: translateY(0) scale(1); }

    45%  { transform: translateY(-9px) scale(1.02); }
    60%  { transform: translateY(0) scale(1); }

    75%  { transform: translateY(-4px); }
    100% { transform: translateY(0) scale(1); }
}




/* 60-degree folded corner */
.sharp-fold {
    position: relative;
    --tw-bg-opacity: 1;
    background:
        linear-gradient(-150deg,
            transparent 1.5em,
            rgb(var(--brand-yellow) / var(--tw-bg-opacity)) 0);
    border-radius: .5em;
}

.sharp-fold::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1.73em;
    height: 3em;
    transform: translateY(-1.3em) rotate(-30deg);
    transform-origin: bottom right;

    background:
        linear-gradient(
            to left bottom,
            transparent 50%,
            color-mix(in srgb, rgb(var(--brand-yellow)) 85%, black) 0,
            color-mix(in srgb, rgb(var(--brand-yellow)) 65%, black)
        ) no-repeat 100% 0;

    border-bottom-left-radius: inherit;
    box-shadow: -.2em .2em .3em -.1em rgb(0 0 0 / .15);
}