/*
  	Flaticon icon font: Flaticon
  	Creation date: 30/08/2020 10:33
  	*/
@font-face {
  font-family: "Flaticon";
  src: url("./Flaticon.eot");
  src: url("./Flaticon.eot?#iefix") format("embedded-opentype"),
       url("./Flaticon.woff2") format("woff2"),
       url("./Flaticon.woff") format("woff"),
       url("./Flaticon.ttf") format("truetype"),
       url("./Flaticon.svg#Flaticon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "Flaticon";
    src: url("./Flaticon.svg#Flaticon") format("svg");
      font-display: swap;
  }
}
[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {   
    font-family: Flaticon;
    font-size: 20px;
    font-style: normal;
}

.flaticon-network:before { content: "\f100"; }
.flaticon-coffee-break:before { content: "\f101"; }
.flaticon-home-security:before { content: "\f102"; }
.flaticon-work:before { content: "\f103"; }
.flaticon-wifi-router:before { content: "\f104"; }
.flaticon-pendrive:before { content: "\f105"; }
.flaticon-growing:before { content: "\f106"; }
.flaticon-pie-chart:before { content: "\f107"; }
.flaticon-company:before { content: "\f108"; }
.flaticon-workflow:before { content: "\f109"; }
.flaticon-cloud:before { content: "\f10a"; }
.flaticon-printer:before { content: "\f10b"; }
.flaticon-online-chat:before { content: "\f10c"; }
.flaticon-teleworking:before { content: "\f10d"; }
.flaticon-home:before { content: "\f10e"; }
.flaticon-video:before { content: "\f10f"; }
.flaticon-food-delivery:before { content: "\f110"; }
.flaticon-cloud-1:before { content: "\f111"; }
.flaticon-working-at-home:before { content: "\f112"; }
.flaticon-video-call:before { content: "\f113"; }
.flaticon-loudspeaker:before { content: "\f114"; }
.flaticon-working-at-home-1:before { content: "\f115"; }
.flaticon-headset:before { content: "\f116"; }
.flaticon-file:before { content: "\f117"; }
.flaticon-file-1:before { content: "\f118"; }
.flaticon-presentation:before { content: "\f119"; }
.flaticon-money-transfer:before { content: "\f11a"; }
.flaticon-online-education:before { content: "\f11b"; }
.flaticon-file-2:before { content: "\f11c"; }
.flaticon-working-at-home-2:before { content: "\f11d"; }
.flaticon-login:before { content: "\f11e"; }
.flaticon-email:before { content: "\f11f"; }
.flaticon-server:before { content: "\f120"; }
.flaticon-sofa:before { content: "\f121"; }
.flaticon-online-conference:before { content: "\f122"; }
.flaticon-video-1:before { content: "\f123"; }
.flaticon-computer-keyboard:before { content: "\f124"; }
.flaticon-sticky-notes:before { content: "\f125"; }
.flaticon-group-chat:before { content: "\f126"; }
.flaticon-conference:before { content: "\f127"; }
.flaticon-phone-call:before { content: "\f128"; }
.flaticon-work-space:before { content: "\f129"; }
.flaticon-working-at-home-3:before { content: "\f12a"; }
.flaticon-checklist:before { content: "\f12b"; }
.flaticon-working-at-home-4:before { content: "\f12c"; }
.flaticon-working:before { content: "\f12d"; }
.flaticon-webcam:before { content: "\f12e"; }
.flaticon-home-1:before { content: "\f12f"; }
.flaticon-working-at-home-5:before { content: "\f130"; }
.flaticon-to-do-list:before { content: "\f131"; }
.flaticon-right-arrow:before { content: "\f132"; }
.flaticon-left-arrow:before { content: "\f133"; }


    .main-icons-field{
        position: relative;
        width: 100%;
    }
    .main-icons-field:after{
        position: relative;
        content: '';
        width: 100%;
        height: 0;
        clear: both;
        display: block;
    }

    .icons-field {
        position: relative;
        float: left;
        width: 25%;
        height: 55px;
        display: block;
        cursor: pointer;
        font-size: 22px;
        text-align: center;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .icons-field i{
        position: relative;
        z-index: 1;
        margin-top: 5px;
        display: block;
    }
    .icons-field i:before{
        font-size: 30px;
    }

    .icons-field input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: #eee;
    }

    .icons-field:hover input ~ .checkmark {
        background-color: #ccc;
    }

    .icons-field input:checked ~ .checkmark {
        background-color: #2196F3;
    }
    .icons-field input:checked ~ i:before{
        color: #fff;
    }
    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }
    .icons-field input:checked ~ .checkmark:after {
        display: block;
    }