ic-icon-box-styles.css

/*////////////////////////// Color Variables //////////////////////////*/
:root {
    /*Purple*/
    --theme1: #7245F1;
    --theme1-light: #F0ECFD;
    /*Orange*/
    --theme2: #FFA630;
    --theme2-light: #FFF7EC;
    /*Blue*/
    --theme3: #0076FF;
    --theme3-light: #E4EEF6;
    /*Aqua*/
    --theme4: #48D6D2;
    --theme4-light: #EAFFFE;
}
/*////////////////////////// Purple Styles //////////////////////////*/
.ic-icon-box .theme1.image-choices-field .image-choices-choice{
    background:var(--theme1-light);
}
.ic-icon-box .theme1.image-choices-field .image-choices-choice:hover {
    border:2px solid var(--theme1);
}
.ic-icon-box .theme1.image-choices-field.image-choices-show-labels .image-choices-choice-text {
    color:var(--theme1);
}
.ic-icon-box .theme1.image-choices-field .image-choices-choice.image-choices-choice-selected {
    background:var(--theme1);
}
/*////////////////////////// Orange Styles //////////////////////////*/
.ic-icon-box .theme2.image-choices-field .image-choices-choice{
    background:var(--theme2-light);
}
.ic-icon-box .theme2.image-choices-field .image-choices-choice:hover {
    border:2px solid var(--theme2);
}
.ic-icon-box .theme2.image-choices-field.image-choices-show-labels .image-choices-choice-text {
    color:var(--theme2);
}
.ic-icon-box .theme2.image-choices-field .image-choices-choice.image-choices-choice-selected {
    background:var(--theme2);
}
/*////////////////////////// Blue Styles //////////////////////////*/
.ic-icon-box .theme3.image-choices-field .image-choices-choice{
    background:var(--theme3-light);
}
.ic-icon-box .theme3.image-choices-field .image-choices-choice:hover {
    border:2px solid var(--theme3);
}
.ic-icon-box .theme3.image-choices-field.image-choices-show-labels .image-choices-choice-text {
    color:var(--theme3);
}
.ic-icon-box .theme3.image-choices-field .image-choices-choice.image-choices-choice-selected {
    background:var(--theme3);
}
/*////////////////////////// Blue Styles //////////////////////////*/
.ic-icon-box .theme4.image-choices-field .image-choices-choice{
    background:var(--theme4-light);
}
.ic-icon-box .theme4.image-choices-field .image-choices-choice:hover {
    border:2px solid var(--theme4);
}
.ic-icon-box .theme4.image-choices-field.image-choices-show-labels .image-choices-choice-text {
    color:var(--theme4);
}
.ic-icon-box .theme4.image-choices-field .image-choices-choice.image-choices-choice-selected {
    background:var(--theme4);
}


/*////////////////////////// Default Styles //////////////////////////*/
/*Optional wrapper styles*/
.ic-icon-box {
    background: white;
    border-radius: 10px;
    padding: 50px;
    border: 2px dotted #cbd0d4;
}
/*Background choice styles*/
.ic-icon-box .image-choices-field .image-choices-choice {
    position: relative;
    padding: 25px;
    border:2px solid  transparent;
    border-radius: 10px;
    transition: all 0.3s;
    width: 100%;
}
/*Label choice selected styles*/
.ic-icon-box .image-choices-field .image-choices-choice.image-choices-choice-selected .image-choices-choice-text  {
    color: white;
}
/*Text label styles*/
.ic-icon-box .image-choices-field.image-choices-show-labels .image-choices-choice-text {
    display: block;
    font-size: 14px;
    letter-spacing: -0.17px;
    text-align: left;
    font-weight:700;
    margin-top:13px;
}
/*Icon styles*/
.ic-icon-box .image-choices-field .image-choices-choice .image-choices-choice-image-wrap {
    display: block!important;
    background-size: contain;
    width: 25px;
    height: 30px;
    text-align: left;
    position: relative;
    z-index: 2;
    top: 3px;
    left: 11px;
}
/*Label resets*/
.ic-icon-box .image-choices-field .image-choices-choice label {
    cursor: pointer;
    display: block !important;
    line-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left;
    width: auto!important;
    border: none;
    max-width: unset!important;
}
/*White box behind icon*/
.ic-icon-box .image-choices-field .image-choices-choice label:before {
    content: "";
    position: absolute;
    top: 20px;
    left: 26px;
    background: white;
    border-radius: 10px;
    z-index: 1;
    width: 45px;
    height: 45px;
}