.anim
{
    transition: .3s all ease-in-out;
}

.btn:focus, .btn.focus
{
    outline: 0;
    box-shadow: none !important;
}
.font-underline
{
    text-decoration: underline;
}

.a-absolute
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.scroll-bar-style
{
    overflow: auto;

    &::-webkit-scrollbar 
    {
        width: 5px;
    }

    &::-webkit-scrollbar-track 
    {
        background: #EBEBEB;
        border-radius: 2rem;
    }

    &::-webkit-scrollbar-thumb 
    {
        -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.2); 
        border-radius: 2rem;
	background: $primary;
    }
}


.blur
{
    backdrop-filter: blur(4px);
}

.see-more
{
    .icon
    {
        @extend .anim;
    }

    &:hover
	{
        .icon
        {
            transform: translateX(25%);
        }
    }
}

.go-back
{
    .icon
    {
        @extend .anim;
    }

    &:hover
        {
        .icon
        {
            transform: translateX(-25%);
        }
    }
}

.white-filter
{
    filter: grayscale(100) brightness(10);
}

.text-shadow
{
    text-shadow: 0px 3px 6px #666666;
}

.text-shadow-none
{
    text-shadow: none !important;
}

.index-1
{
    z-index: 1 !important;
}

.index-2
{
    z-index: 2 !important;
}

.index-1020
{
    z-index: 1020 !important;
}

.index-minus-1
{
    z-index: -1 !important;
}

.shadow-md
{
    box-shadow: 0 0.125rem .25rem 3px rgba(0, 0, 0, 0.075) !important;
}

.shadow-lg
{
    box-shadow: 0 0rem 1rem rgba(0, 0, 0, .18) !important;
}

.rotate-45
{
    transform: rotate(45deg);
}

.rotate-90
{
    transform: rotate(90deg);
}

.rotate-180
{
    transform: rotate(180deg);
}

.font-base
{
    font-family: $font-base !important;
}

button
{
    color: $color-base;
}

button:focus
{
    outline: none;
    box-shadow: none;
}


.form-control:focus
{
    box-shadow: none;
}

.opacity-1
{
    opacity: 1 !important;
}

.opacity-0
{
    opacity: 0 !important;
}

.opacity-08
{
    opacity: .8 !important;
}

.rounded-md-pill
{
    @include media-breakpoint-up(md)
    {
	border-radius: 50rem !important;
    }
}

.rounded-sm
{
    border-radius: 12px !important;
}


.rounded-md
{
    border-radius: 16px !important;
}

.rounded-lg
{
    border-radius: 24px !important;
}


.rounded-xl
{
    border-radius: 3rem !important;
}



.w-lg-50
{
    @include media-breakpoint-up(lg)
    {
	width: 50% !important;
    }
}

.w-xl-50
{
    @include media-breakpoint-up(xl)
    {
	width: 50% !important;
    }
}

.col-xl-25
{
    padding-right: 15px;
    padding-left: 15px;

    @include media-breakpoint-up(xl)
    {
	flex: 0 0 20%;
	max-width: 20%;
    }
}

.col-25
{
    padding-right: 15px;
    padding-left: 15px;

    flex: 0 0 20%;
    max-width: 20%;

}

.col-md-25
{
    padding-right: 15px;
    padding-left: 15px;

    @include media-breakpoint-up(md)
    {
	flex: 0 0 20%;
	max-width: 20%;
    }

}

.col-xxl-25
{
    padding-right: 15px;
    padding-left: 15px;

    @include media-breakpoint-up(xxl)
    {
	flex: 0 0 20%;
	max-width: 20%;
    }
}


.container-fluid-max
{
    max-width: 1920px;
}

.cursor-pointer
{
    cursor: pointer !important;
}

.cursor-context-menu
{
    cursor: context-menu !important;
}


.transform-none
{
    transform: none !important;
}

.object-cover
{
    object-fit: cover;
}

.object-contain
{
    object-fit: contain;
}

.flex-none
{
    flex: none;
}

.rotate-90ccw
{
    transform: rotate(-90deg);
}


.bg-gradient-x
{
    background: linear-gradient(to right, $primary, $secondary);
}

.bg-gradient-x-reverse
{
    background: linear-gradient(to right, $secondary, $primary);
}

.bg-gradient-y
{
    background: linear-gradient(to top, $primary, $secondary);
}

.bg-gradient-y-reverse
{
    background: linear-gradient(to bottom, $primary, $secondary);
}

.pointer-events-none
{
    pointer-events: none !important;
}


@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(359deg); }
}

.fa-spin
{
    animation: spin 1s linear infinite;
    display: inline-block;
}

.custom-toggle
{
    padding-left: 0 !important;
    .custom-control-label
    {
	padding-left: 0 !important;

	&:before, &:after
	    {
	    display: none;
	}

	.toggle
	{
	    width: 60px;
	    height: 25px;
	    border-radius: 2rem;
	    background: #EDEDED;
	    position: relative;
	    cursor: pointer;

	    &:before
		{
		content: "";
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		height: 19px;
		width: 19px;
		left: 3px;
		border-radius: 50%;
		background: $danger;
		@extend .anim;
	    }
	}
    }


    .custom-control-input:checked ~ .toggle::before
	{
	transform: translate(34px, -50%);
	background: $green;
    }


}

.select-custom-2
{
    position: relative;
    width: 100%;

    .select2
    {
	display: block;
	width: 100% !important;
    }

    select {
	-webkit-appearance: none;
	-moz-appearance: none;
	text-indent: 1px;
	text-overflow: '';
    }

    .select2-selection
    {
	height: 3rem !important;
	display: flex;
	align-items: center;
	border: none;
    }

    .select2-selection__arrow
    {
	display: none;
    }

    .selection
    {
	/*width: 100% !important;*/
    }


    .form-control
    {
	border: none;
	background: transparent;
	/*padding-right: 1.5rem;*/
    }

    &.has-arrow
    {
	&:before
	    {
	    content: "\e905";
	    font-family: 'icomoon' !important;
	    position: absolute;
	    top: 50%;
	    transform: translateY(-50%);
	    right: 2px;
	    font-size: .7rem;
	    color: lighten($dark, 30%);
	    pointer-events: none;
	    z-index: 1;
	}
    }
}


.select-custom
{
    position: relative;
    @extend .border;

    &:before
	{
	content: "\e905";
	font-family: 'icomoon' !important;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 10px;
	font-size: .7rem;
	color: lighten($dark, 30%);
	pointer-events: none;
    }

    select
    {
	-webkit-appearance: none;
	-moz-appearance: none;
	text-indent: 1px;
	text-overflow: '';
    }

    .form-control
    {
	border: none;
	background: transparent;
	/*padding-right: 1.5rem;*/
    }
}


.custom-radio-check .custom-control-input:checked  
{
    ~ .custom-control-label
    {
	&:after
	    {
	    background-image: none;
	    content: "\e909";
	    font-family: 'icomoon' !important;
	    left: -1.35rem;
	    top: .6rem;

	    @include media-breakpoint-up(md)
	    {
		top: 43%;
	    }
	}

    }

    .custom-control-label
    {
	&:before, &:after
	    {
	    border-radius: 0 !important;
	}
    }
}


.custom-control-label
{
    padding-left: .5rem;

    &:before, &:after
	{
	width: 1.3rem;
	height: 1.3rem;
	color: #fff;
	font-weight: 700;
	top: 50%;
	transform: translateY(-50%);

    }

    /*    &:before
	    {
	    border-color: $primary;
	}*/
}


/* Change autocomplete styles in WebKit */
/*input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    border: 1px solid green;
    -webkit-box-shadow: 0 0 0px 1000px $light inset;
    transition: background-color 5000s ease-in-out 0s;
}*/

///

/* Change autocomplete styles in WebKit */


/* Change autocomplete styles in WebKit */

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    border: 2px solid $gray-300;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
    transition: background-color 5000s ease-in-out 0s;
}

.accent-color-primary
{
    accent-color: $primary !important;
}


.border-width-2
{
    border-width: 2px;
}

.btn-custom
{
    background: $primary;
    border-radius: 3rem;
    padding: .8rem 2rem;
    font-weight: 700;
    border: none !important;
    color: #000;

    &:hover
	{
	background: $yellow !important;
    }
}

button:focus {
    outline: none !important;
    box-shadow: none !important;
}

a
{
    text-decoration: none;
}

.btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show
{
    /*border-color: transparent !important;*/
}

.w-md-auto
{
    @include media-breakpoint-up(md)
    {
	width: auto !important;
    }
}

.w-md-75
{
    @include media-breakpoint-up(md)
    {
	width:75% !important;
    }
}



.bg-white-50
{
    background: rgba(#fff, .5);
}

input:focus::placeholder {
    color: transparent;
}

h1
{
    margin-bottom: 0;
}

.container
{
    max-width: 100%;

    @include media-breakpoint-up(xl)
    {
	max-width: 1200px;
    }
}


