.btn{
    display: flex;
    position: relative;
    font-family: var(--font_Helvethaica_Med);
    font-size: var(--font-md);
    width: fit-content;
    align-items: center;
    padding: 8px 32px;
    border-radius: 24px;
    z-index: 0;
    transition: var(--transition-300);
    background-color: var(--color_light);
    box-shadow: 0px 4px 4px rgba(132, 132, 132, 0.33);
}

.btn.btn-icon .icon,
.btn.btn-icon img{position: absolute; top: 50%; transform: translate(0, -50%);}

.btn.btn-icon.btn-icon-l{padding: 8px 19px 8px 45px;}
.btn.btn-icon.btn-icon-l .icon,
.btn.btn-icon.btn-icon-l img{left: 15px;}

.btn.btn-icon.btn-icon-r{padding: 8px 45px 8px 19px;}
.btn.btn-icon.btn-icon-r .icon,
.btn.btn-icon.btn-icon-r img{right: 15px;}

.btn.btn-primary{box-shadow: 0px 4px 4px rgba(14, 88, 196, 0.33); border-color: var(--color_none); background-color: var(--color_secondary); color: var(--color_light);}
.btn.btn-primary:hover{background-color: #003b92;}
.btn.btn-primary.active,
.btn.btn-primary.active:focus,
.btn.btn-primary:focus,
.btn.btn-primary:hover:focus{background-color: #1973F8;}

.btn.btn-secondary{box-shadow: 0px 4px 4px rgba(14, 88, 196, 0.33);  border-color: var(--color_none); background-color: var(--color_light); color: var(--color_secondary);}
.btn.btn-secondary:hover{background-color: #EDF4FF; color: #003b92;}
.btn.btn-secondary.active,
.btn.btn-secondary.active:focus,
.btn.btn-secondary:focus,
.btn.btn-secondary:hover:focus{background-color: #EAF2FF; color: #1973F8;}

.btn.btn-yellow{box-shadow: 0px 4px 4px rgba(14, 88, 196, 0.33);  border-color: var(--color_none); background-color: var(--color_light); color: var(--color_yellow);}
.btn.btn-yellow:hover{background-color: #fff2e2; color: var(--color_yellow);}
.btn.btn-yellow.active,
.btn.btn-yellow.active:focus,
.btn.btn-yellow:focus,
.btn.btn-yellow:hover:focus{background-color: #fff2e2; color: var(--color_yellow);}

.btn.btn-green{box-shadow: 0px 4px 4px rgba(14, 88, 196, 0.33);  border-color: var(--color_none); background-color: var(--color_light); color: var(--color_green);}
.btn.btn-green:hover{background-color: #e2fff9; color: var(--color_green);}
.btn.btn-green.active,
.btn.btn-green.active:focus,
.btn.btn-green:focus,
.btn.btn-green:hover:focus{background-color: #e2fff9; color: var(--color_green);}

.btn.btn-brown{box-shadow: 0px 4px 4px rgba(14, 88, 196, 0.33);  border-color: var(--color_none); background-color: var(--color_light); color: var(--color_brown);}
.btn.btn-brown:hover{background-color: #fff6e2; color: var(--color_brown);}
.btn.btn-brown.active,
.btn.btn-brown.active:focus,
.btn.btn-brown:focus,
.btn.btn-brown:hover:focus{background-color: #fff6e2; color: var(--color_brown);}

.btn.btn-blue{box-shadow: 0px 4px 4px rgba(14, 88, 196, 0.33);  border-color: var(--color_none); background-color: var(--color_light); color: var(--color_primary);}
.btn.btn-blue:hover{background-color: #e2fdff; color: var(--color_primary);}
.btn.btn-blue.active,
.btn.btn-blue.active:focus,
.btn.btn-blue:focus,
.btn.btn-blue:hover:focus{background-color: #e2fdff; color: var(--color_primary);}

.btn.btn-darkgreen{box-shadow: 0px 4px 4px rgba(14, 88, 196, 0.33);  border-color: var(--color_none); background-color: var(--color_light); color: var(--color_darkgreen);}
.btn.btn-darkgreen:hover{background-color: #e2ffef; color: var(--color_darkgreen);}
.btn.btn-darkgreen.active,
.btn.btn-darkgreen.active:focus,
.btn.btn-darkgreen:focus,
.btn.btn-darkgreen:hover:focus{background-color: #e2ffef; color: var(--color_darkgreen);}

/* btn outline */
.btn.btn-primary.btn-outline{color: var(--color_secondary); background-color: var(--color_light);}
.btn.btn-primary.btn-outline.active,
.btn.btn-primary.btn-outline:hover{color: var(--color_light); background-color: var(--color_secondary);}

.btn.btn-secondary.btn-outline{color: #1973F8; background-color: var(--color_light);}
.btn.btn-secondary.btn-outline.active,
.btn.btn-secondary.btn-outline:hover{color: var(--color_light); background-color: #1973F8;}

.btn.btn-yellow.btn-outline{color: var(--color_yellow); background-color: var(--color_light);}
.btn.btn-yellow.btn-outline.active,
.btn.btn-yellow.btn-outline:hover{color: var(--color_light); background-color: var(--color_yellow);}

.btn.btn-green.btn-outline{color: var(--color_green); background-color: var(--color_light);}
.btn.btn-green.btn-outline.active,
.btn.btn-green.btn-outline:hover{color: var(--color_light); background-color: var(--color_green);}

.btn.btn-brown.btn-outline{color: var(--color_brown); background-color: var(--color_light);}
.btn.btn-brown.btn-outline.active,
.btn.btn-brown.btn-outline:hover{color: var(--color_light); background-color: var(--color_brown);}

.btn.btn-blue.btn-outline{color: var(--color_primary); background-color: var(--color_light);}
.btn.btn-blue.btn-outline.active,
.btn.btn-blue.btn-outline:hover{color: var(--color_light); background-color: var(--color_primary);}

.btn.btn-darkgreen.btn-outline{color: var(--color_darkgreen); background-color: var(--color_light);}
.btn.btn-darkgreen.btn-outline.active,
.btn.btn-darkgreen.btn-outline:hover{color: var(--color_light); background-color: var(--color_darkgreen);}
/* end btn outline */

.btn.btn-disable,
.btn.btn-outline.btn-disable,
.btn.btn-outline.btn-disable:hover,
.btn.btn-outline.btn-disable.active,
.btn.btn-outline.btn-disable:focus,
.btn.btn-outline.btn-disable:hover:focus,
.btn.btn-disable.active,
.btn.btn-disable.active:focus,
.btn.btn-disable:hover,
.btn.btn-disable:hover:focus,
.btn.btn-disable:focus,
.btn.btn-icon.btn-disable{background-color: #e2e2e2; color: #7F7F7F; box-shadow: inherit; cursor: no-drop;}
.btn.btn-icon.btn-disable .icon{background-color: #7F7F7F !important;}


.btn .bg-icon{
    position: absolute; top: 50%; transform: translate(0, -50%);
    --size: 30px; width: var(--size); height: var(--size);
    border-radius: 50%;
    transition: var(--transition-300);
}
.btn .bg-icon.bg-icon-r{right: 10px;}
.btn .bg-icon.bg-icon-l{left: 10px;}
.btn.btn-blue .bg-icon{background-color: var(--color_primary);}
.btn.btn-darkgreen .bg-icon{background-color: var(--color_darkgreen);}
.btn.btn-green .bg-icon{background-color: var(--color_green);}
.btn.btn-brown .bg-icon{background-color: var(--color_brown);}

.btn .bg-icon .icon{right: inherit; left: 50%; transform: scaleY(-1) translate(-50%, 50%); transition: all 0.4s ease-in-out;}
.btn.active .bg-icon .icon{transform: scaleY(1) translate(-50%, -50%);}