.dmt-agreement-wrapper {
    position: relative;
    border: 1px solid transparent;
    @include border-radius(7px);

    &.dmt-error {
        border-color: $offline;
    }

    &.dmt-disabled {

        > input[type=checkbox] {
            &:hover {
                cursor: auto;
            }
        }

        > .dmt-label {
            opacity: 0.3;

            .dmt-link {
                &:hover {
                    cursor: auto;
                }
            }
        }
    }

    > input[type=checkbox] {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: 0;
        width: 30px;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        z-index: 9999;

        &:checked {
            + .dmt-label {
                .dmt-agreement-checkbox {
                    .icon {
                        display: block;
                    }
                }
            }
        }
        &:hover {
            + .dmt-label {
                cursor: pointer;
            }

            &:checked {
                + .dmt-label {
                    cursor: pointer;
                }
            }
        }
    }

    > .dmt-label {
        @include flexbox-align(row, flex-start, center, center);
        @include border-radius(5px);
        display: inline-flex;
        position: relative;
        padding: 5px;
        margin-bottom: 3px;
        color: $light-gray;
        font-size: 12px;

        .dmt-link {
            text-decoration: underline;

            &:hover {
                cursor: pointer;
            }
        }

        .dmt-agreement-checkbox {
            position: relative;
            display: inline-block;
            @include border-radius(3px);

            width: 15px;
            height: 15px;
            border: 1px solid $light-gray;
            margin-right: 10px;

            .icon {
                font-size: 14px;
                position: relative;
                color: $light-blue;
                display: none;
                top: -5px;
                left: 1px;
            }
        }

        label.dmt-agreement-label{
            &:hover {
                cursor: pointer;
            }
        }

    }

    .dmt-error {
        display: block;
        position: relative;
        color: #fff;
        font-size: 12px;
        line-height: 14px;
        width: 100%;
        background: $offline;
        @include border-radius(3px);
        border-radius: 0 0 3px 3px;
        padding: 0 5px;
    }

}