.zypento-agilecrm-settings{
    box-sizing: border-box;
    width: 100%;
    max-width: 900px;
    background: #DEE2E6;
    margin: 1em 0 0 0;
    & *{
        box-sizing: border-box;
    }
}
.zypento-agilecrm-settings-heading{
    padding: 1em 2em;
    font-size: 1.6rem;
    background: #bdc5cd;
    & h2{
        margin: 0;
    }
}
.zypento-agilecrm-settings-sub-heading{
    padding: 1em 2em;
    font-size: 1.6rem;
    background: #ced4d9;
    margin: 0;
}
.zypento-agilecrm-settings-content{
    padding: 3em;
    font-size: 1rem;
}
.zypento-agilecrm-settings-item{
    font-size: 1rem;
    margin: 0 0 2em 0;
    background: rgba($color: #000000, $alpha: 0.1);
}
.zypento-agilecrm-settings-item-heading{
    font-size: 1.6rem;
    padding: 1em 2em;
    margin: 0;
    cursor: pointer;
    background: rgba($color: #000000, $alpha: 0.1);
}
.zypento-agilecrm-settings-item-content{
    display: none;
    font-size: 1rem;
    padding: 3em;
}

.zypento-agilecrm-option{
    margin: 0 0 3em 0;
    &>h3{
        margin: 0 0 0.6em 0;
    }
    &>p{
        font-size: 1rem;
        margin: 0 0 0.6em 0;
        & input[type="text"]{
            width: 100%;
            max-width: 400px;
            padding: 0.5em 1em;
        }
        & input[type="password"]{
            width: 100%;
            max-width: 400px;
            padding: 0.5em 1em;
        }
        &.message{
            &[data-type="error"]{
                color: #fb2323;
            }
        }
    }
}
.zypento-agilecrm-message{
    display: none;
    font-size: 1rem;
    padding: 0.5em 1em;
    margin: 1em 0;
    border: 1px dotted #000000;
    &[data-type="error"]{
        color: #fb2323;
    }
}
.zypento-agilecrm-submit{
    margin: 0;
    &>span{
        display: inline-block;
        font-size: 1.2rem;
        padding: 0.5em 2em;
        border-radius: 2em;
        background: #343A40;
        color: #ffffff;
        cursor: pointer;
    }
}

.zypento-agilecrm-settings-content-error{
    font-size: 1rem;
    padding: 0.5em 2em;
    border: 1px dotted #fb2323;
}

.zypento-agilecrm-field-map{
    width: 100%;
    margin: 0 0 2em 0;
    background: rgba($color: #000000, $alpha: 0.05);
}
.zypento-agilecrm-field-map-heading{
    font-size: 1rem;
    padding: 1em 2.0em;
    background: rgba($color: #000000, $alpha: 0.05);
    margin: 0;
    cursor: pointer;
}
.zypento-agilecrm-field-map-items{
    font-size: 1rem;
    padding: 1em 2.0em;
    display: none;
}
.zypento-agilecrm-field-map-item{
    margin: 0 0 1em 0;
    padding: 1em;
    border-radius: 4px;
    background: rgba($color: #000000, $alpha: 0.05);
    &>p{
        font-size: 0.8rem;
        margin: 0 0 5px 0;
        padding: 0 50px 0 0;
        position: relative;
        flex-basis: 100%;
        &[data-type="error"]{
            color: #fb2323;
        }
        &>span{
            cursor: pointer;
            width: 20px;
            height: 20px;
            position: absolute;
            top: 5px;
            right: 10px;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20px' height='20px' viewBox='0 0 32 32'%3E%3Cpath fill='%23000000' d='M16 2C8.2 2 2 8.2 2 16s6.2 14 14 14s14-6.2 14-14S23.8 2 16 2m5.4 21L16 17.6L10.6 23L9 21.4l5.4-5.4L9 10.6L10.6 9l5.4 5.4L21.4 9l1.6 1.6l-5.4 5.4l5.4 5.4z'/%3E%3C/svg%3E") center no-repeat;
        }
    }
}
.zypento-agilecrm-field-map-item-content{
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    &>div{
        flex-basis: 100%;
        &:nth-child(1){
            &>span{
                font-size: 0.8rem;
                padding: 5px 10px;
                border-radius: 4px;
                background: rgba($color: #000000, $alpha: 0.05);
            }
            &>p{
                font-size: 1rem;
                margin: 0;
            }
        }
        @media screen and (min-width : 781px) {
            flex-basis: 50%;
        }
    }
}
.zypento-agilecrm-field-map-message{
    display: none;
    margin: 0 0 1em 0;
    border: 1px dashed #212121;
    padding:10px 20px;
    &[data-type="error"]{
        border: 1px dashed #fb2323;
        padding: 10px 20px;
    }
}
.zypento-agilecrm-field-map-actions{
    padding: 2.0em 0;
    text-align: right;
    &>span{
        display: inline-block;
        padding: 0.5em 2.0em;
        border-radius: 2em;
        font-size: 1rem;
        margin: 0 0 0 1em;
        background: #343A40;
        color: #ffffff;
        cursor: pointer;
        &[data-process="disabled"]{
            opacity: 0.3;
            cursor: default;
        }
    }
}