/*buttons*/

    .btn {
        display:  flex;
        justify-content:  center;
        align-items:  center;
        outline:  none;
        border:  0rem;
        border-radius:  0rem;
        text-decoration:  none;
        transition:  all ease 0.24s;
        cursor:  pointer;
        padding: 0rem 2rem;
        height: 3.5rem;
        font-size: 1rem;
        border-radius: 0.375rem;
        background-color: transparent;
    }


    .btn.--fill-blue {
        background-color: var(--color__fill-1);
        font-weight: 700;
        color:  var(--color__white);
        box-shadow: 0.25rem 0.5rem 1.5rem -0.25rem rgba(0, 87, 177, 0.48);
    }

    .btn.--fill-blue:hover {
        background-color: var(--color__fill-1-h);
        box-shadow: 0.25rem 0.5rem 1.5rem -0.25rem var(--color__fill-1-h);
    }

    .btn.--fill-blue:active {
        background-color: var(--color__fill-1-a);
        box-shadow: 0.25rem 0.5rem 1.5rem -0.25rem var(--color__fill-1-a);
    }


    .btn.--fill-green {
        background-color: var(--color__fill-2);
        font-weight: 700;
        color:  var(--color__white);
        box-shadow: 0.25rem 0.5rem 1.5rem -0.25rem rgba(0, 87, 177, 0.48);
    }

    .btn.--fill-green:hover {
        background-color: var(--color__fill-2-h);
        box-shadow: 0.25rem 0.5rem 1.5rem -0.25rem var(--color__fill-2-h);
        color: white;
    }

    .btn.--fill-green:active {
        background-color: var(--color__fill-1-a);
        box-shadow: 0.25rem 0.5rem 1.5rem -0.25rem var(--color__fill-2-a);
    }

    .btn.--fill-white {
        background-color: white;
        font-weight: 700;
        color:  var(--color_fill-1);
    }

    .btn.--fill-white:hover {
        opacity: .8;
    }

    .btn.--fill-white:active {
        opacity: .64;
    }





    .btn.--no-fill {
        background-color: transparent;
        font-weight: 700;
        color:  var(--color__fill-1);
    }

    .btn.--no-fill:hover {
        background-color: hsla(213, 100%, 37%, 0.16) !important;
        color: var(--color__fill-1);
    }

    .btn.--no-fill:active {
        background-color: var(--color__gray-2);
    }

     

    .btn.--border {
        font-weight: 700;
        color: var(--color__fill-1);
        box-shadow: inset 0rem 0rem 0rem 0.1875rem var(--color__fill-1);
    }

    .btn.--border:hover,
	.btn.--border.--active {
        background-color: var(--color__fill-1);
        box-shadow: inset 0rem 0rem 0rem 0.1875rem var(--color__fill-1);
        color: var(--color__white);
    }

    .btn.--border:active {
        background-color: var(--color__fill-1-a);
        box-shadow: inset 0rem 0rem 0rem 0.1875rem var(--color__fill-1-a);
    }



/*checkbox*/

    .checkbox {
        cursor:  pointer;
    }

    .checkbox input {
        display:  none;
    }

    .checkbox__trigger {
        width:  1.5rem;
        height:  1.5rem;
        background-color: transparent;
        border-radius:  0rem;
        box-shadow: inset 0px 0px 0px 0.1875rem var(--color__fill-1);
        transition: all ease 0.24s;
        background-position:  center;
        background-repeat:  no-repeat;
        background-position: center 0.18rem;
        background-size: 1rem;
        border-radius: .25rem;
    }

    .checkbox__label {
        margin:  0rem;
        flex: 1;
        padding-left:  1rem;
        transition: all ease 0.32s;
        font-weight: 600;
    }

    .checkbox:hover .checkbox__label {
        opacity: .56;
    }

    .checkbox:hover .checkbox__trigger {
        /*opacity: .56;*/
    }

    .checkbox input:checked + * > .checkbox__label {
        color: var(--color__fill-1);
    }

    .checkbox input:checked + * > .checkbox__trigger {
        background-color: var(--color__fill-1);
        background-image: url(../img/element__check--white.svg);
        top: -.15rem;
    }

    .checkbox input:disabled + * > .checkbox__label {
        color: var(--color__black);
        opacity: 0.24;
        pointer-events: none;
    }

    .checkbox input:disabled + * > .checkbox__trigger {
        box-shadow: inset 0px 0px 0px 0.1875rem var(--color__dark);
        opacity: 0.16;
        pointer-events: none;
    }

    .checkbox:hover input:disabled + * > .checkbox__trigger {
        background-color: transparent;
    }


    .checkbox input:checked + * > .checkbox__trigger.--radio {
        background-image: url(../img/element__radio--white.svg);
        background-size: .75rem;
        background-position: center;
    }

    .checkbox__trigger.--radio {
        border-radius: 1.5rem;
    }

    .checkbox input:disabled + * > .checkbox__trigger.--radio {}


/*tumbler*/

    .tumbler {
        cursor:  pointer;
    }

    .tumbler input {
        display:  none;
    }

    .tumbler .tumbler__trigger {
        width: 3.5rem;
        height: 2rem;
        background-color: var(--color__fill-4);
        border-radius:  0.25rem;
        transition: all ease 0.32s;
        background-position:  center;
        background-repeat:  no-repeat;
        border-radius: 2rem;
        position:  relative;
    }

    .tumbler .tumbler__label {
        margin:  0rem;
        flex: 1;
        padding-left:  1rem;
        transition: all ease 0.32s;
    }

    .tumbler:hover .tumbler__label {
       
    }

    .tumbler:hover .tumbler__trigger {
        background-color: var(--color__fill-4-h);    
    }

    .tumbler input:checked + * > .tumbler__label {
        color: var(--color__fill-2);
    }

    .tumbler input:checked + * > .tumbler__trigger {
        background-color: var(--color__fill-2);
    }

    .tumbler input:disabled + * > .tumbler__label {
        opacity: 0.4;
        pointer-events: none;
    }

    .tumbler input:disabled + * > .tumbler__trigger {
        opacity: 0.4;
        pointer-events: none;
    }

    .tumbler:hover input:disabled + * > .tumbler__trigger {
        background-color: transparent;
    }

    .tumbler .tumbler__trigger:after{
        content: "";
        width:  1.5rem;
        height:  1.5rem;
        position:  absolute;
        left: 0.25rem;
        top: 0.25rem;
        background-color:  white;
        border-radius:  1.5rem;
        transition:  all ease 0.32s;
    }

    .tumbler input:checked + * > .tumbler__trigger:after {
        left: calc(100% - 1.75rem);
    }

    .tumbler input:checked + * > .tumbler__trigger::before {
        z-index: 2;
        content: "";
        width:  0.8rem;
        height:  0.8rem;
        position:  absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color:  var(--color__fill-2);
        border-radius:  1.5rem;
        transition:  all ease 0.32s;
    }




/*inputs*/

    .input {
        padding: 0px;
        margin: 0px;
        width: 100%;
        outline: none;
        border: 0px;
        font-size: 1rem;
        border-left: .25rem solid var(--color__fill-1);
        height: 4rem;
        font-weight: 500;
        transition: all 0.24s;
        padding: 0px 1.5rem;
        background-color: var(--color__fill-4);
        border-radius: .375rem;
    }

    .input::placeholder {
        color: var(--color__text-3);
    }

    .input:hover {
        border-left: .25rem solid var(--color__fill-1-h);
    }

    .input:hover::placeholder {
        color: var(--color__text-2);
    }

    .input:focus {
        color: var(--color__fill-1-h);
        border-left: .25rem solid var(--color__fill-1-h);
    }


    .input__wrap {
        z-index: 2;
        position: relative;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        margin-bottom: 2rem;
    }

    .input__wrap .input__title {
        margin-bottom: 1rem;
        font-weight: 600;
        font-size: 1rem;
    }

    .input__wrap .input__error {
        position: absolute;
        right: 0px;
        top: 0px;
        display: none;
        color: var(--color__fill-3);
        font-weight: 600;
        font-size: 0.875rem;
    }
    
    .input__wrap.--error .input__title {
        color: var(--color__fill-3);
    }

    .input__wrap.--error .input__error {
        display: block;
    }

    .input__wrap.--error .input {
        border-left: .25rem solid var(--color__fill-3);
        color: var(--color__fill-3);
    }

    .input__wrap.--error .input::placeholder {
        color: var(--color__fill-3);
    }

    .input__wrap.--2-coll {
        width: calc(50% - 1rem);
    }

    .input.--textarea {
        padding-top: 1.5rem;
        min-height: 7.25rem;
    }

/*select*/

    .select {
        padding: 0px;
        margin: 0px;
        width: 100%;
        outline: none;
        border: 0px;
        font-size: 1rem;
        border-left: .185rem solid transparent;
        height: 4rem;
        font-weight: 500;
        transition: all 0.24s;
        -webkit-appearance: none;
        background-color: transparent;
        border-radius: 0px;
        padding-right: 2rem;
        background-repeat: no-repeat;
        background-image: url(../img/element__arrow-s--bottom.svg);
        background-position: calc(100% - 1.5rem) center;
        padding: 0px 1.5rem;
        background-color: var(--color__fill-4);
        padding-right: 3rem;
    }

    .select::placeholder {
        color: var(--color__text-3);
    }

    .select:hover {}


    .select:hover {
        color: var(--color__fill-1);
        border-left: .185rem solid var(--color__fill-1);
    }






/*MEDIA*/

    @media screen and (max-width: 640px) {  
        .input__wrap.--2-coll {
            width: 100%;
        } 
    }

    @media screen and (max-width: 768px) {  

    }

    @media screen and (max-width: 991px) {  
        
    }

    @media screen and (max-width: 1024px) {  


    }
    
    @media screen and (max-width: 1199px) {  

    }

    @media screen and (max-width: 1359px) {  

    }

    @media screen and (max-width: 1366px) {  

    }

    @media screen and (max-width: 1440px) {  

    }

    @media screen and (max-width: 1680px) {  

    }