.table-borderless > tbody > tr > td,
.table-borderless > tbody > tr > th,
.table-borderless > tfoot > tr > td,
.table-borderless > tfoot > tr > th,
.table-borderless > thead > tr > td,
.table-borderless > thead > tr > th {
    border: none;
}

.table {
    margin-bottom: 5px;
}

.table-responsive {
    margin-bottom: 5px;
}

a:hover, a:focus {
    text-decoration: none;
}

a:not([href]) {
    color: inherit;
    text-decoration: none;
}

a:not([href]):hover {
    color: inherit;
    text-decoration: none;
}

* {
    outline: none !important;
}

.modal-title {
    width: calc(100% - 20px)
}

/*Progress*/
.progress {
    @include progress-height($progress-height);

    &.progress-primary {
        @include progress-variant($primary-color);
    }

    &.progress-info {
        @include progress-variant($info-color);
    }

    &.progress-danger {
        @include progress-variant($danger-color);
    }

    &.progress-success {
        @include progress-variant($success-color);
    }

    &.progress-warning {
        @include progress-variant($warning-color);
    }
}

.progress[value]::-moz-progress-bar {
    border-radius: $progress-border-radius;
}

.progress[value]::-webkit-progress-value {
    border-radius: $progress-border-radius;
}

.progress[value="100"]::-moz-progress-bar {
    border-radius: $progress-border-radius;
}

.progress[value="100"]::-webkit-progress-value {
    border-radius: $progress-border-radius;
}

.progress-xs {
    height: 7px;
}

.progress-sm {
    height: 10px;
}

.progress-md {
    height: 13px;
}

.progress-bar-info-striped {
    background-image: linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent);
    background-size: 1rem 1rem;
    background-color: #5bc0de !important;
}

.progress-bar-animated {
    -webkit-animation: progress-bar-stripes 1s linear infinite;
    animation: progress-bar-stripes 1s linear infinite
}

/*Tag*/
.tag {
    font-weight: normal;
    line-height: 1.4;
    letter-spacing: 0.03em;

    &.tag-primary {
        background-color: $primary-color;
    }

    &.tag-info {
        background-color: $info-color;
    }

    &.tag-danger {
        background-color: $danger-color;
    }

    &.tag-success {
        background-color: $success-color;
    }

    &.tag-warning {
        background-color: $warning-color;
    }

    &.tag-default {
        // background-color: $default-color;
        // color: $dark-color;
    }

    &.tag-dark {
        background-color: $dark-color;
    }

    &.tag-main {
        background-color: $main-color;
    }
}

/*Card*/
.card {
    // background: rgba($default-color,0.1);
    border: none;
    border-radius: 0;
    width: 100%;
    overflow: hidden;
    margin-bottom: 29px;
    -webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.25);
    //Flex sulle card non me ne faccio nulla
    display: block;

    .card-header {
        background: $sidebar-bg-color; //rgba($main-color,0.4);
        color: $default-color;
        line-height: 10px;
        border-radius: 0;
        border: none;

        a {
            color: $default-color;

            &:hover {
                color: rgba($default-color, 0.8);
            }
        }
    }

    .card-footer {
        background: $sidebar-bg-color; //rgba($main-color,0.2);
        color: $default-color;
        line-height: 6px;
        border-radius: 0;
        border: none;
    }

    .card-body {
        // color: $default-color;
    }

    &.card-body {
        //color: $default-color;
    }

    &.card-outline-default {
        background: transparent;
        border: 1px solid $default-color;
    }

    &.card-primary {
        background: rgba($primary-color,1);

        &.medium-opacity {
            background: rgba($primary-color, 0.5);
        }
    }

    &.card-outline-primary {
        background: transparent;
        border: 1px solid $primary-color;
    }

    &.card-success {
        background: rgba($success-color,1);
        margin-bottom: 15px;

        &.medium-opacity {
            background: rgba($success-color, 0.5);
        }
    }

    &.card-outline-success {
        background: transparent;
        border: 1px solid $success-color;
    }

    &.card-info {
        background: rgba($info-color,1);
        margin-bottom: 15px;

        &.medium-opacity {
            background: rgba($info-color, 0.5);
        }
    }

    &.card-outline-info {
        background: transparent;
        border: 1px solid $info-color;
    }

    &.card-warning {
        background: rgba($warning-color,1);
        margin-bottom: 15px;

        &.medium-opacity {
            background: rgba($warning-color, 0.5);
        }
    }

    &.card-outline-warning {
        background: transparent;
        border: 1px solid $warning-color;
    }

    &.card-danger {
        background: rgba($danger-color,1);
        margin-bottom: 15px;

        &.medium-opacity {
            background: rgba($danger-color, 0.5);
        }
    }

    &.card-outline-danger {
        background: transparent;
        border: 1px solid $danger-color;
    }

    &.card-primary, &.card-success, &.card-info, &.card-danger, &.card-warning {
        .card-header {
            background: rgba($dark-color,0.4);
        }

        .card-body {
            color: $default-color;
        }

        .card-footer {
            background: rgba($dark-color,0.2);
        }
    }

    &.overlay {
        .card-img {
            border-radius: 0;
            -webkit-filter: brightness(100%);
            -moz-filter: brightness(100%);
            -ms-filter: brightness(100%);
            -o-filter: brightness(100%);
            filter: brightness(100%);
        }

        &:hover .card-img {
            -webkit-filter: brightness(80%);
            -moz-filter: brightness(80%);
            -ms-filter: brightness(80%);
            -o-filter: brightness(80%);
            filter: brightness(80%);
        }

        .card-img-overlay {
            color: $default-color;

            &.overlay-bottom {
                top: auto;
            }

            &.slide-up {
                -webkit-transform: translateY(100%);
                -moz-transform: translateY(100%);
                -ms-transform: translateY(100%);
                -o-transform: translateY(100%);
                transform: translateY(100%);
            }

            &.slide-down {
                -webkit-transform: translateY(-100%);
                -moz-transform: translateY(-100%);
                -ms-transform: translateY(-100%);
                -o-transform: translateY(-100%);
                transform: translateY(-100%);
            }

            &.slide-left {
                -webkit-transform: translateX(-100%);
                -moz-transform: translateX(-100%);
                -ms-transform: translateX(-100%);
                -o-transform: translateX(-100%);
                transform: translateX(-100%);
            }

            &.slide-right {
                -webkit-transform: translateX(100%);
                -moz-transform: translateX(100%);
                -ms-transform: translateX(100%);
                -o-transform: translateX(100%);
                transform: translateX(100%);
            }

            &.hover-opacity {
                opacity: 0;
            }
        }

        &:hover .slide-up {
            -webkit-transform: translateY(0);
            -moz-transform: translateY(0);
            -ms-transform: translateY(0);
            -o-transform: translateY(0);
            transform: translateY(0);
        }

        &:hover .slide-down {
            -webkit-transform: translateY(0);
            -moz-transform: translateY(0);
            -ms-transform: translateY(0);
            -o-transform: translateY(0);
            transform: translateY(0);
        }

        &:hover .slide-left {
            -webkit-transform: translateX(0);
            -moz-transform: translateX(0);
            -ms-transform: translateX(0);
            -o-transform: translateX(0);
            transform: translateX(0);
        }

        &:hover .slide-right {
            -webkit-transform: translateX(0);
            -moz-transform: translateX(0);
            -ms-transform: translateX(0);
            -o-transform: translateX(0);
            transform: translateX(0);
        }

        &:hover .hover-opacity {
            opacity: 1;
        }
    }
}

@media (min-width: 1400px) {
    .d-xxl-block {
        display: block !important;
    }
}

@media (min-width: 576px) {
    .card-columns {
        -moz-column-count: 3;
        -moz-column-gap: 1.25rem;
    }
}

/*Buttons*/
.btn {
    border-radius: 0;

    &:focus {
        outline: 0;
    }

    &:active {
        outline: 0 !important;
    }
}

.btn-rounded {
    border-radius: 25rem;
}

.btn-xs {
    padding: 0.2rem 0.4rem;
    font-size: 0.715rem;
}

.btn-secondary {
    // background: rgba($default-color, 0.9);
    // border-color:  rgba($default-color, 0.9);
    // color: $dark-color;
    // &.medium-opacity{
    //     background: rgba($default-color, 0.5);
    //     border-color:  rgba($default-color, 0.1);
    // }
    // &:hover, &:focus{
    //     background: rgba($default-color, 1);
    //     border-color:  rgba($default-color, 1);
    // }
    // &:active{
    //     background: rgba($default-color, 0.95) !important;
    //     border-color:  rgba($default-color, 0.95) !important;
    // }
}

.btn-primary {
    background: rgba($primary-color, 0.8) !important;
    border-color: rgba($primary-color, 0.8) !important;

    &.medium-opacity {
        background: rgba($primary-color, 0.5);
        border-color: rgba($primary-color, 0.1);
    }

    &:hover, &:focus {
        background: rgba($primary-color, 1);
        border-color: rgba($primary-color, 1);
    }

    &:active {
        background: rgba($primary-color, 0.95) !important;
        border-color: rgba($primary-color, 0.95) !important;
    }
}

.btn-success {
    background: rgba($success-color, 0.8);
    border-color: rgba($success-color, 0.8);

    &.medium-opacity {
        background: rgba($success-color, 0.5);
        border-color: rgba($success-color, 0.1);
    }

    &:hover, &:focus {
        background: rgba($success-color, 1);
        border-color: rgba($success-color, 1);
    }

    &:active {
        background: rgba($success-color, 0.95) !important;
        border-color: rgba($success-color, 0.95) !important;
    }
}

.btn-info {
    background: rgba($info-color, 0.8);
    border-color: rgba($info-color, 0.8);

    &.medium-opacity {
        background: rgba($info-color, 0.5);
        border-color: rgba($info-color, 0.1);
    }

    &:hover, &:focus {
        background: rgba($info-color, 1);
        border-color: rgba($info-color, 1);
    }

    &:active {
        background: rgba($info-color, 0.95) !important;
        border-color: rgba($info-color, 0.95) !important;
    }
}

.btn-warning {
    background: rgba($warning-color, 0.8);
    border-color: rgba($warning-color, 0.8);

    &.medium-opacity {
        background: rgba($warning-color, 0.5);
        border-color: rgba($warning-color, 0.1);
    }

    &:hover, &:focus {
        background: rgba($warning-color, 1);
        border-color: rgba($warning-color, 1);
    }

    &:active {
        background: rgba($warning-color, 0.95) !important;
        border-color: rgba($warning-color, 0.95) !important;
    }
}

.btn-danger {
    background: rgba($danger-color, 0.8);
    border-color: rgba($danger-color, 0.8);

    &.medium-opacity {
        background: rgba($danger-color, 0.5);
        border-color: rgba($danger-color, 0.1);
    }

    &:hover, &:focus {
        background: rgba($danger-color, 1);
        border-color: rgba($danger-color, 1);
    }

    &:active {
        background: rgba($danger-color, 0.95) !important;
        border-color: rgba($danger-color, 0.95) !important;
    }
}

.btn-dark {
    background: rgba($dark-color, 0.8);
    border-color: rgba($dark-color, 0.8);
    color: $default-color;

    &.medium-opacity {
        background: rgba($dark-color, 0.5);
        border-color: rgba($dark-color, 0.1);
    }

    &:hover {
        background: rgba($dark-color, 1);
        border-color: rgba($dark-color, 1);
    }

    &:active {
        background: rgba($dark-color, 0.95) !important;
        border-color: rgba($dark-color, 0.95) !important;
    }
}

.btn-main {
    background: rgba($main-color, 0.8);
    border-color: rgba($main-color, 0.8);
    color: $default-color;

    &.medium-opacity {
        background: rgba($main-color, 0.5);
        border-color: rgba($main-color, 0.1);
    }

    &:hover {
        color: $default-color !important;
        background: rgba($main-color, 1);
        border-color: rgba($main-color, 1);
    }

    &:active {
        background: rgba($main-color, 0.95) !important;
        border-color: rgba($main-color, 0.95) !important;
    }
}

.btn-outline-secondary {
    // color: $default-color;
    // border-color: $default-color;
    // &:hover, &:focus{
    //     color: $dark-color;
    //     background: $default-color;
    //     border-color: $default-color;
    // }
    // &:active, &.active{
    //     color: $dark-color !important;
    //     background: $default-color !important;
    //     border-color: $default-color !important;
    // }
}

.btn-outline-primary {
    color: $primary-color;
    border-color: $primary-color;

    &:hover, &:focus {
        color: $default-color;
        background: $primary-color;
        border-color: $primary-color;
    }

    &:active, &.active {
        color: $default-color !important;
        background: $primary-color !important;
        border-color: $primary-color !important;
    }
}

.btn-outline-success {
    color: $success-color;
    border-color: $success-color;

    &:hover, &:focus {
        color: $default-color;
        background: $success-color;
        border-color: $success-color;
    }

    &:active, &.active {
        color: $default-color !important;
        background: $success-color !important;
        border-color: $success-color !important;
    }
}

.btn-outline-info {
    color: $info-color;
    border-color: $info-color;

    &:hover, &:focus {
        color: $default-color;
        background: $info-color;
        border-color: $info-color;
    }

    &:active, &.active {
        color: $default-color !important;
        background: $info-color !important;
        border-color: $info-color !important;
    }
}

.btn-outline-warning {
    color: $warning-color;
    border-color: $warning-color;

    &:hover, &:focus {
        color: $default-color;
        background: $warning-color;
        border-color: $warning-color;
    }

    &:active, &.active {
        color: $default-color !important;
        background: $warning-color !important;
        border-color: $warning-color !important;
    }
}

.btn-outline-danger {
    color: $danger-color;
    border-color: $danger-color;

    &:hover, &:focus {
        color: $default-color;
        background: $danger-color;
        border-color: $danger-color;
    }

    &:active, &.active {
        color: $default-color !important;
        background: $danger-color !important;
        border-color: $danger-color !important;
    }
}

.btn-outline-dark {
    color: $dark-color;
    border-color: $dark-color;
    background: transparent;

    &:hover, &:focus {
        color: $default-color;
        background: $dark-color;
        border-color: $dark-color;
    }
}

.btn-outline-main {
    color: $main-color;
    border-color: $main-color;
    background: transparent;

    &:hover, &:focus {
        color: $default-color;
        background: $main-color;
        border-color: $main-color;
    }
}

.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn:last-child:not(:first-child), .btn-group > .dropdown-toggle:not(:first-child) {
    border-radius: 0;
}

.form-control-sm,
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn {
    border-radius: 0;
}

.btn.disabled, .btn:disabled {
    cursor: not-allowed;
    opacity: .65;
}

.btn-file-upload {
    height: 35px;
    padding-top: 3px !important;
}

/*Text*/
.text-primary {
    color: $primary-color !important;
}

.text-success {
    color: $success-color !important;
}

.text-info {
    color: $info-color !important;
}

.text-warning {
    color: $warning-color !important;
}

.text-danger {
    color: $danger-color !important;
}

.background-success {
    background-color: $success-color !important;
}

.background-info {
    background-color: $info-color !important;
}

.background-warning {
    background-color: $warning-color !important;
}

.background-danger {
    background-color: $danger-color !important;
}

.blockquote {
    font-size: 1.2rem;
}

.blockquote-footer {
    font-size: 70%;
}

/*Tabs*/
.nav-tabs {
    background-color: $gray-light;
    border: 1px solid $gray-light;

    .nav-item {
        .nav-link {
            color: rgba($main-color, 0.8);
            background-color: transparent;
            border: none;
            cursor: default;

            &.active {
                background-color: $default-color;
                color: $main-color;
            }

            &:not(.active):hover {
                background-color: transparent;
                color: $main-color;
                cursor: pointer;
            }
        }
    }

    &.top {
        border-top-left-radius: 0.3rem;
        border-top-right-radius: 0.3rem;
    }

    &.bottom {
        border-bottom-left-radius: 0.3rem;
        border-bottom-right-radius: 0.3rem;

        .nav-item {
            margin-bottom: 0;
            margin-top: -1px;

            .nav-link {
                border-radius: 0 0 0.3rem 0.3rem;
            }
        }
    }

    &.tabs-primary {
        background-color: rgba($primary-color, 0.4);
        border: 1px solid $primary-color;

        .nav-item {
            .nav-link {
                color: rgba($default-color, 0.8);

                &.active {
                    background-color: $primary-color;
                    color: $default-color;
                }

                &:not(.active):hover {
                    color: $default-color;
                }
            }
        }
    }

    &.tabs-success {
        background-color: rgba($success-color, 0.4);
        border: 1px solid $success-color;

        .nav-item {
            .nav-link {
                color: rgba($default-color, 0.8);

                &.active {
                    background-color: $success-color;
                    color: $default-color;
                }

                &:not(.active):hover {
                    color: $default-color;
                }
            }
        }
    }

    &.tabs-info {
        background-color: rgba($info-color, 0.4);
        border: 1px solid $info-color;

        .nav-item {
            .nav-link {
                color: rgba($default-color, 0.8);

                &.active {
                    background-color: $info-color;
                    color: $default-color;
                }

                &:not(.active):hover {
                    color: $default-color;
                }
            }
        }
    }

    &.tabs-warning {
        background-color: rgba($warning-color, 0.4);
        border: 1px solid $warning-color;

        .nav-item {
            .nav-link {
                color: rgba($default-color, 0.8);

                &.active {
                    background-color: $warning-color;
                    color: $default-color;
                }

                &:not(.active):hover {
                    color: $default-color;
                }
            }
        }
    }

    &.tabs-danger {
        background-color: rgba($danger-color, 0.4);
        border: 1px solid $danger-color;

        .nav-item {
            .nav-link {
                color: rgba($default-color, 0.8);

                &.active {
                    background-color: $danger-color;
                    color: $default-color;
                }

                &:not(.active):hover {
                    color: $default-color;
                }
            }
        }
    }
}

.tab-content {
    position: relative;
    z-index: 1;
    border: 1px solid $gray-light;
    background: #fff;

    .tab-pane {
        padding: 1rem;
    }

    &.tab-content-primary {
        background-color: $primary-color;
        color: $default-color;
        border-color: $primary-color;
    }

    &.tab-content-success {
        background-color: $success-color;
        color: $default-color;
        border-color: $success-color;
    }

    &.tab-content-info {
        background-color: $info-color;
        color: $default-color;
        border-color: $info-color;
    }

    &.tab-content-warning {
        background-color: $warning-color;
        color: $default-color;
        border-color: $warning-color;
    }

    &.tab-content-danger {
        background-color: $danger-color;
        color: $default-color;
        border-color: $danger-color;
    }

    &.top {
        border-top: none;
    }

    &.bottom {
        border-bottom: none;
    }
}

.vertical-tabs {
    .nav {
        padding-right: 0;
        overflow: hidden;
        background-color: $gray-light;
        border: 1px solid $gray-light;

        &.left {
            border-top-left-radius: 0.25rem;
            border-bottom-left-radius: 0.25rem;
            border-right: none;
            margin-right: -1px;
            z-index: 2;
        }

        &.right {
            border-top-right-radius: 0.25rem;
            border-bottom-right-radius: 0.25rem;
            border-left: none;
            margin-left: -1px;
            z-index: 2;
        }

        .nav-item {
            .nav-link {
                color: rgba($main-color, 0.8);
                background-color: transparent;
                border-radius: 0;
                cursor: default;

                &.active {
                    background-color: $default-color;
                }

                &:not(.active):hover {
                    background-color: transparent;
                    color: $main-color;
                    cursor: pointer;
                }

                &.disabled {
                    color: rgba($main-color, 0.6);
                    cursor: not-allowed !important;
                }
            }
        }
    }
}

/*ALERTS*/
.alert {
    &.alert-success {
        background-color: $success-color;
        border-color: $success-color;
        color: $default-color;

        &.medium-opacity {
            background: rgba($success-color, 0.5);
            border-color: rgba($success-color, 0.6);
        }
    }

    &.alert-info {
        background-color: $info-color;
        border-color: $info-color;
        color: $default-color;

        &.medium-opacity {
            background-color: rgba($info-color, 0.5);
            border-color: rgba($info-color, 0.6);
        }
    }

    &.alert-warning {
        background-color: $warning-color;
        border-color: $warning-color;
        color: $default-color;

        &.medium-opacity {
            background-color: rgba($warning-color, 0.5);
            border-color: rgba($warning-color, 0.6);
        }
    }

    &.alert-danger {
        background-color: $danger-color;
        border-color: $danger-color;
        color: $default-color;

        &.medium-opacity {
            background-color: rgba($danger-color, 0.5);
            border-color: rgba($danger-color, 0.6);
        }
    }
}

/* MODALS */
.modal {
    z-index: 99999;
    padding-top: 10%;
}

.modal-dialog {
    .modal-content {
        color: $dark-color;

        .modal-header {
            border-top-left-radius: 0.2rem;
            border-top-right-radius: 0.2rem;
            padding: 10px 15px;

            &.modal-primary {
                color: $default-color;
                background-color: $primary-color;
            }

            &.modal-success {
                color: $default-color;
                background-color: $success-color;
            }

            &.modal-info {
                color: $default-color;
                background-color: $info-color;
            }

            &.modal-warning {
                color: $default-color;
                background-color: $warning-color;
            }

            &.modal-danger {
                color: $default-color;
                background-color: $danger-color;
            }

            i {
                margin-right: 10px;
            }
        }

        .modal-footer {
            padding: 10px 15px;
        }
    }
}

/*List Group*/
.list-group {
    .list-group-item {
        border-radius: 0;
        padding: 0.55rem 1.25rem;
        color: rgba($dark-color, 0.8);

        &.active {
            color: rgba($default-color, 0.9);
            background-color: $primary-color;
            border-color: $primary-color;

            &:hover, &:focus {
                color: $default-color !important;
            }
        }

        &.disabled {
            color: #818a91;
            background-color: #ddd;
        }

        &:not(.disabled):focus {
            color: $dark-color;
        }

        &.list-group-item-primary {
            color: $default-color;
            background-color: $primary-color;
        }

        &.list-group-item-success {
            color: $default-color;
            background-color: $success-color;
        }

        &.list-group-item-info {
            color: $default-color;
            background-color: $info-color;
        }

        &.list-group-item-warning {
            color: $default-color;
            background-color: $warning-color;
        }

        &.list-group-item-danger {
            color: $default-color;
            background-color: $danger-color;
        }
    }
}

/*Forms*/

@function url-friendly-colour($colour) {
    @return '%23' + str-slice('#{$colour}', 2, -1);
}

// Form validation icons
$az-form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{url-friendly-colour($success-color)}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default;

$az-form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{url-friendly-colour($warning-color)}' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") !default;

$az-form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{url-friendly-colour($danger-color)}' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default;

// Form validation states
.has-success {
    .form-control-success {
        background-image: $az-form-icon-success;
    }

    .form-control {
        border-color: rgba($success-color, 0.8);

        &:focus {
            box-shadow: none;
            border-color: rgba($success-color, 0.5);
        }
    }

    .form-control-feedback, .form-control-label, .form-check-label, .form-check-inline, .custom-control {
        color: $success-color;
    }
}

.has-warning {
    .form-control-warning {
        background-image: $az-form-icon-warning;
    }

    .form-control {
        border-color: rgba($warning-color, 0.8);

        &:focus {
            box-shadow: none;
            border-color: rgba($warning-color, 0.5);
        }
    }

    .form-control-feedback, .form-control-label, .form-check-label, .form-check-inline, .custom-control {
        color: $warning-color;
    }
}

.has-danger {
    .form-control-danger {
        background-image: $az-form-icon-danger;
    }

    .form-control {
        border-color: rgba($danger-color, 0.8);

        &:focus {
            box-shadow: none;
            border-color: rgba($danger-color, 0.5);
        }
    }

    .form-control-feedback, .form-control-label, .form-check-label, .form-check-inline, .custom-control {
        color: $danger-color;
    }
}

.form-group {
    label {
        margin-bottom: 2px;
    }
}

.help-block {
    color: $gray;
    font-size: 12px;
}

.form-control {
    &.checking-field {
        &.forced-invalid {
            padding-right: 2.25rem !important;
            background-repeat: no-repeat !important;
            background-position: center right 0.625rem !important;
            background-size: 1.25rem 1.25rem !important;
            border-color: $danger-color !important;
            background-image: $az-form-icon-danger !important;
        }
    }

    &.checking-combo {
        &.forced-invalid {
            padding-right: 2.25rem !important;
            background-repeat: no-repeat !important;
            background-position: center right 0.625rem !important;
            background-size: 1.25rem 1.25rem !important;
            border-color: $danger-color !important;
            background-image: $az-form-icon-danger !important;
            background-position: calc(100% - 20px) !important
        }
    }
}

.form-control {
    border-radius: 0;
    font-size: 14px;

    &:focus {
        border-color: rgba($gray, 0.5);
    }

    &.checking-field.ng-touched {
        padding-right: 1.75rem;
        background-repeat: no-repeat;
        background-position: center right 0.625rem;
        background-size: 1.25rem 1.25rem;

        &.ng-invalid {
            border-color: $danger-color;
            background-image: $az-form-icon-danger;
        }

        &.ng-valid {
            border-color: $success-color;
            background-image: $az-form-icon-success;
        }
    }

    &.checking-combo.ng-touched {
        padding-right: 1.75rem;
        background-repeat: no-repeat;
        background-position: center right 0.625rem;
        background-size: 1.25rem 1.25rem;

        &.ng-invalid {
            border-color: $danger-color;
            background-image: $az-form-icon-danger;
            background-position: calc(100% - 20px)
        }

        &.ng-valid {
            border-color: $success-color;
            background-image: $az-form-icon-success;
            background-position: calc(100% - 20px)
        }
    }
}

.form-control-rounded {
    border-radius: 16px;
}

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    color: rgba($gray, 0.7);
}

.input-group .input-group-addon {
    padding: .3rem .7rem .3rem .7rem;
    border-radius: 0;
}

.input-group-btn .btn {
    padding: .36rem .9rem .36rem .9rem;
    font-size: 17px;
}

.input-group .form-control:not(:first-child),
.input-group-addon:not(:first-child),
.input-group-btn:not(:first-child) > .btn,
.input-group-btn:not(:first-child) > .btn-group > .btn,
.input-group-btn:not(:first-child) > .dropdown-toggle,
.input-group-btn:not(:last-child) > .btn:not(:first-child),
.input-group-btn:not(:last-child) > .btn-group:not(:first-child) > .btn {
    border-radius: 0;
}

select.form-control:not([multiple]) option {
    color: rgba($dark-color, 0.8);
}

select.form-control:not([size]):not([multiple]) {
    height: calc(2.5rem - 5px);
}

input[type="color"].form-control {
    padding: 0;
}

.form-inline .form-group input {
    width: 100%;
}

.form-space-md .form-group {
    margin-bottom: .750rem;
}

.form-space-lg .form-group {
    margin-bottom: 1rem;
}

.form-group {
    margin-bottom: .500rem;
}

.dropdown-menu {
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 0;
    font-size: 14px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);

    a {
        color: $main-color;

        &:hover {
            color: $navbar-text-color;
            background-color: $main-color;
        }
    }

    &:before {
        content: " ";
        position: absolute;
        top: -12px;
        right: 30px;
        display: block;
        width: 0;
        height: 0;
        border: 6px solid transparent;
        border-bottom-color: #fff;
    }
}

// Checkboxes and Radio buttons
$az-custom-checkbox-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default;
$az-custom-radio-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E") !default;
$az-custom-select-indicator: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") !default;

// Checkboxes and Radio buttons
.custom-control-label::before,
.custom-control-label::after {
    top: 0.2rem;
}

.custom-checkbox.checkbox-circle .custom-control-label::before,
.custom-checkbox.checkbox-circle .custom-control-label::after {
    border-radius: 50%;
}

.custom-checkbox .custom-control-input {
    &:checked ~ .custom-control-label::before {
        background: rgba($gray, 0.7);
    }

    &:focus ~ .custom-control-label::before {
        border: 1px solid white;
        box-shadow: 0 0 0 1px rgba($gray, 0.7);
    }

    &.checkbox-primary {
        &:checked ~ .custom-control-label::before {
            background: $primary-color;
        }

        &:focus ~ .custom-control-label::before {
            box-shadow: 0 0 0 1px $primary-color;
        }
    }

    &.checkbox-success {
        &:checked ~ .custom-control-label::before {
            background: $success-color;
        }

        &:focus ~ .custom-control-label::before {
            box-shadow: 0 0 0 1px $success-color;
        }
    }

    &.checkbox-info {
        &:checked ~ .custom-control-label::before {
            background: $info-color;
        }

        &:focus ~ .custom-control-label::before {
            box-shadow: 0 0 0 1px $info-color;
        }
    }

    &.checkbox-warning {
        &:checked ~ .custom-control-label::before {
            background: $warning-color;
        }

        &:focus ~ .custom-control-label::before {
            box-shadow: 0 0 0 1px $warning-color;
        }
    }

    &.checkbox-danger {
        &:checked ~ .custom-control-label::before {
            background: $danger-color;
        }

        &:focus ~ .custom-control-label::before {
            box-shadow: 0 0 0 1px $danger-color;
        }
    }

    &.checkbox-main {
        &:checked ~ .custom-control-label::before {
            background: $main-color;
        }

        &:focus ~ .custom-control-label::before {
            box-shadow: 0 0 0 1px $main-color;
        }
    }
}

.custom-radio .custom-control-input {
    &:checked ~ .custom-control-label::before {
        background: rgba($gray, 0.7);
    }

    &:focus ~ .custom-control-label::before {
        border: 1px solid white;
        box-shadow: 0 0 0 1px rgba($gray, 0.7);
    }

    &.radio-primary {
        &:checked ~ .custom-control-label::before {
            background: $primary-color;
        }

        &:focus ~ .custom-control-label::before {
            box-shadow: 0 0 0 1px $primary-color;
        }
    }

    &.radio-success {
        &:checked ~ .custom-control-label::before {
            background: $success-color;
        }

        &:focus ~ .custom-control-label::before {
            box-shadow: 0 0 0 1px $success-color;
        }
    }

    &.radio-info {
        &:checked ~ .custom-control-label::before {
            background: $info-color;
        }

        &:focus ~ .custom-control-label::before {
            box-shadow: 0 0 0 1px $info-color;
        }
    }

    &.radio-warning {
        &:checked ~ .custom-control-label::before {
            background: $warning-color;
        }

        &:focus ~ .custom-control-label::before {
            box-shadow: 0 0 0 1px $warning-color;
        }
    }

    &.radio-danger {
        &:checked ~ .custom-control-label::before {
            background: $danger-color;
        }

        &:focus ~ .custom-control-label::before {
            box-shadow: 0 0 0 1px $danger-color;
        }
    }

    &.radio-main {
        &:checked ~ .custom-control-label::before {
            background: $main-color;
        }

        &:focus ~ .custom-control-label::before {
            box-shadow: 0 0 0 1px $main-color;
        }
    }
}

.custom-select, .custom-select:focus {
    background: rgba($default-color, 0.1) $az-custom-select-indicator no-repeat right .75rem center;
    background-size: 8px 10px;
}

/*BG*/
.bg-primary {
    background: rgba($primary-color,1) !important;

    &.medium-opacity {
        background: rgba($primary-color, 0.5) !important;
    }
}

.bg-success {
    background: rgba($success-color,1) !important;

    &.medium-opacity {
        background: rgba($success-color, 0.5) !important;
    }
}

/*.bg-info {
    background: rgba($info-color,1) !important;

    &.medium-opacity {
        background: rgba($info-color, 0.5) !important;
    }
}*/

.bg-warning {
    background: rgba($warning-color,1) !important;

    &.medium-opacity {
        background: rgba($warning-color, 0.5) !important;
    }
}

.bg-danger {
    background: rgba($danger-color,1) !important;

    &.medium-opacity {
        background: rgba($danger-color, 0.5) !important;
    }
}

.bg-main {
    background: rgba($main-color,1) !important;
    ;

    &.medium-opacity {
        background: rgba($main-color, 0.5) !important;
    }
}

.bg-dark {
    background: rgba($dark-color,1) !important;

    &.medium-opacity {
        background: rgba($dark-color, 0.5) !important;
    }
}

/*Inputs, Select*/
.custom-select {
    width: 100%;
}

code {
    background-color: #e9ebee;
}
