﻿/* ===== iCheck square-green (Angular-safe) ===== */

.icheck {
    display: inline-flex;
    align-items: center;
    position: relative;
    cursor: pointer;
}

    .icheck input {
        position: absolute;
        opacity: 0;
        margin: 0;
        cursor: pointer;
    }

/* BOX */
.icheck-box {
    display: inline-block;
    min-width: 18px;
    min-height: 18px;
    width: 18px;
    height: 18px;
    border-radius: 0;
    flex-shrink: 0;
    border: 1px solid #c3c3c3;
    background: linear-gradient(#ffffff, #f0f0f0);
    margin-right: 8px;
    position: relative;
    transition: all 0.15s ease;
}

    /* CHECK MARK */
    .icheck-box::after {
        content: "";
        position: absolute;
        left: 6px;
        top: 2px;
        width: 5px;
        height: 9px;
        border: solid #ffffff;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg) scale(0.6);
        opacity: 0;
        transition: all 0.15s ease;
    }

/* CHECKED */
.icheck input:checked + .icheck-box {
    background: #2C8F7B;
    border-color: #2C8F7B;
}

    .icheck input:checked + .icheck-box::after {
        opacity: 1;
        transform: rotate(45deg) scale(1);
    }

/* HOVER */
.icheck:hover input:not(:disabled) + .icheck-box {
    border-color: #2C8F7B;
}

/* DISABLED (unchecked) */
.icheck input:disabled + .icheck-box {
    background: #eeeeee;
    border-color: #cccccc;
    box-shadow: none;
    cursor: not-allowed;
}

/* DISABLED + CHECKED (IMPORTANT) */
.icheck input:disabled:checked + .icheck-box {
    background: #2C8F7B;
    border-color: #2C8F7B;
}

    .icheck input:disabled:checked + .icheck-box::after {
        opacity: 1;
    }

/* TEXT */
.icheck-text {
    white-space: nowrap;
}

/* DISABLED TEXT */
.icheck input:disabled ~ .icheck-text {
    color: #aaaaaa;
    cursor: not-allowed;
}
