:root {
   --black: #111111;
   --darkgray: #383838;
   --lightgray: #DDDDDD;
   --whitesmoke: #F5F5F5;
   --white: #FFFFFF;
   --main: #2E8ECE;
   --facebook: #23589A;
   --twitter: #2C70C3;
   --red: #E53935;
   --blue: #1E88E5;
   --green: #43A047;
   --darkpink: #D81B60;
   --darkblue: #3949AB;
   --purple: #8E24AA;
   --orange: #F4511E;
   --cadet: #536872;
   --yellow: #FDD835;
   --rgb-midnight: 51, 51, 102;
   --rgb-black: 0, 0, 0;
   --rgb-white: 255, 255, 255;
   --range-thumb-size: 20px;
   --range-track-size: 10px;
   --range-padding: 4px;
   --range-thumb-offset: -7px;
}
input, select, button {
   padding: 10px;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
}

input, select {
   background: rgba(var(--rgb-midnight), 0.075);
   border: 2px solid rgba(var(--rgb-midnight), 0.1);
}

input:focus, select:focus {
   background: rgba(var(--rgb-midnight), 0.1);
}

input[type="range"] {
   padding: var(--range-padding) 0;
   background: transparent;
   border: none;
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
   height: var(--range-thumb-size);
   width: var(--range-thumb-size);
   margin-top: var(--range-thumb-offset);
   background: var(--main);
   border: none;
   cursor: pointer;
   border-radius: 100%;
   -webkit-border-radius: 100%;
   appearance: none;
   -webkit-appearance: none;
}

input[type="range"]::-moz-range-thumb {
   height: var(--range-thumb-size);
   width: var(--range-thumb-size);
   margin-top: var(--range-thumb-offset);
   background: var(--main);
   border: none;
   cursor: pointer;
   border-radius: 100%;
   -moz-border-radius: 100%;
   appearance: none;
   -moz-appearance: none;
}

input[type="range"]::-webkit-slider-runnable-track {
   height: var(--range-track-size);
   background: rgba(var(--rgb-midnight), 0.075);
   border: 2px solid rgba(var(--rgb-midnight), 0.1);
   border-radius: 4px;
   -webkit-border-radius: 4px;
}

input[type="range"]::-moz-range-track {
   height: var(--range-track-size);
   background: rgba(var(--rgb-midnight), 0.075);
   border: 2px solid rgba(var(--rgb-midnight), 0.1);
   border-radius: 4px;
   -moz-border-radius: 4px;
}

input[type="range"]:focus::-webkit-slider-runnable-track {
   background: rgba(var(--rgb-midnight), 0.1);
}

input[type="range"]:focus::-moz-range-track {
   background: rgba(var(--rgb-midnight), 0.1);
}



.row > .col6 {
   width: 50%;
}

.row {
   padding: 0;
   margin: 0;
}

.row,
.row:after {
   clear: both;
   zoom: 1;
}

.row:before,
.row:after {
   content: '';
   display: table;
}

.row > * {
   float: left;
}
*,
*:before,
*:after {
   position: relative;
   font: inherit;
   line-height: inherit;
   color: inherit;
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
}

*:focus {
   outline: 0;
}




/* icon list styles */
#ig-icon-list>div {
   left: -1%;
   right: -1%;
}

#ig-icon-list>div {
   padding: 1%;
}

#ig-icon-list>div>a {
   width: 100%;
   color: var(--white);
   text-decoration: none;
   overflow: hidden;
   border-radius: 8px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
}

#ig-icon-list>div>a:nth-of-type(9n+1) {
   background: var(--red);
}

#ig-icon-list>div>a:nth-of-type(9n+2) {
   background: var(--blue);
}

#ig-icon-list>div>a:nth-of-type(9n+3) {
   background: var(--green);
}

#ig-icon-list>div>a:nth-of-type(9n+4) {
   background: var(--darkpink);
}

#ig-icon-list>div>a:nth-of-type(9n+5) {
   background: var(--darkblue);
}

#ig-icon-list>div>a:nth-of-type(9n+6) {
   background: var(--purple);
}

#ig-icon-list>div>a:nth-of-type(9n+7) {
   background: var(--orange);
}

#ig-icon-list>div>a:nth-of-type(9n+8) {
   background: var(--cadet);
}

#ig-icon-list>div>a:nth-of-type(9n+9) {
   background: var(--yellow);
}

#ig-icon-list>div>a>span,
#ig-icon-list>div>a>i,
#ig-icon-list>div>a>i:after {
   position: absolute;
   display: block;
   width: 100%;
   height: inherit;
   text-align: center;
}

#ig-icon-list>div>a>span {
   top: 0;
   left: 0;
   padding: 5%;
   font-size: 0.938rem;
   font-weight: bold;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
}

#ig-icon-list>div>a>i {
   top: 50%;
   left: 0;
   font-size: 3.125rem;
   transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
}

#ig-icon-list>div:hover>a>i {
   font-size: 3.90625rem;
}

#ig-icon-list>div>a>i:after {
   top: 0;
   left: 0;
   content: attr(data-icon);
   color: transparent;
   opacity: 0.2;
   z-index: -1;
   text-shadow: 1px 1px 0 var(--black),
      2px 2px 0 var(--black),
      3px 3px 0 var(--black),
      4px 4px 0 var(--black),
      5px 5px 0 var(--black),
      6px 6px 0 var(--black),
      7px 7px 0 var(--black),
      8px 8px 0 var(--black),
      9px 9px 0 var(--black),
      10px 10px 0 var(--black),
      11px 11px 0 var(--black),
      12px 12px 0 var(--black),
      13px 13px 0 var(--black),
      14px 14px 0 var(--black),
      15px 15px 0 var(--black),
      16px 16px 0 var(--black),
      17px 17px 0 var(--black),
      18px 18px 0 var(--black),
      19px 19px 0 var(--black),
      20px 20px 0 var(--black),
      21px 21px 0 var(--black),
      22px 22px 0 var(--black),
      23px 23px 0 var(--black),
      24px 24px 0 var(--black),
      25px 25px 0 var(--black),
      26px 26px 0 var(--black),
      27px 27px 0 var(--black),
      28px 28px 0 var(--black),
      29px 29px 0 var(--black),
      30px 30px 0 var(--black),
      31px 31px 0 var(--black),
      32px 32px 0 var(--black),
      33px 33px 0 var(--black),
      34px 34px 0 var(--black),
      35px 35px 0 var(--black),
      36px 36px 0 var(--black),
      37px 37px 0 var(--black),
      38px 38px 0 var(--black),
      39px 39px 0 var(--black),
      40px 40px 0 var(--black),
      41px 41px 0 var(--black),
      42px 42px 0 var(--black),
      43px 43px 0 var(--black),
      44px 44px 0 var(--black),
      45px 45px 0 var(--black),
      46px 46px 0 var(--black),
      47px 47px 0 var(--black),
      48px 48px 0 var(--black),
      49px 49px 0 var(--black),
      50px 50px 0 var(--black),
      51px 51px 0 var(--black),
      52px 52px 0 var(--black),
      53px 53px 0 var(--black),
      54px 54px 0 var(--black),
      55px 55px 0 var(--black),
      56px 56px 0 var(--black),
      57px 57px 0 var(--black),
      58px 58px 0 var(--black),
      59px 59px 0 var(--black),
      60px 60px 0 var(--black),
      61px 61px 0 var(--black),
      62px 62px 0 var(--black),
      63px 63px 0 var(--black),
      64px 64px 0 var(--black),
      65px 65px 0 var(--black),
      66px 66px 0 var(--black),
      67px 67px 0 var(--black),
      68px 68px 0 var(--black),
      69px 69px 0 var(--black),
      70px 70px 0 var(--black),
      71px 71px 0 var(--black),
      72px 72px 0 var(--black),
      73px 73px 0 var(--black),
      74px 74px 0 var(--black),
      75px 75px 0 var(--black),
      76px 76px 0 var(--black),
      77px 77px 0 var(--black),
      78px 78px 0 var(--black),
      79px 79px 0 var(--black),
      80px 80px 0 var(--black),
      81px 81px 0 var(--black),
      82px 82px 0 var(--black),
      83px 83px 0 var(--black),
      84px 84px 0 var(--black),
      85px 85px 0 var(--black),
      86px 86px 0 var(--black),
      87px 87px 0 var(--black),
      88px 88px 0 var(--black),
      89px 89px 0 var(--black),
      90px 90px 0 var(--black),
      91px 91px 0 var(--black),
      92px 92px 0 var(--black),
      93px 93px 0 var(--black),
      94px 94px 0 var(--black),
      95px 95px 0 var(--black),
      96px 96px 0 var(--black),
      97px 97px 0 var(--black),
      98px 98px 0 var(--black),
      99px 99px 0 var(--black),
      100px 100px 0 var(--black);
}



/* icon form styles */
#ig-icon-form>div {
   left: -1%;
   right: -1%;
}

#ig-icon-form>div>* {
   padding: 0 1%;
}

#ig-icon-form>div>div:nth-of-type(1)>div {
   width: 100%;
   padding: 50% 0;
   background-color: var(--darkgray);
   background-repeat: repeat;
   background-image: url('../img/canvas.svg');
   overflow: hidden;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
}

#ig-icon-form>div>div:nth-of-type(1)>div>canvas {
   position: absolute;
   top: 50%;
   left: 50%;
   max-width: 90%;
   border: 2px dashed rgba(var(--rgb-white), 0.5);
   background: rgba(var(--rgb-white), 0.1);
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
}

#ig-icon-form>div>div:nth-of-type(2)>div {
   width: 100%;
   margin: 10px 0;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
}

#ig-icon-form>div>div:nth-of-type(2)>div:first-of-type {
   margin-top: 0;
}

#ig-icon-form>div>div:nth-of-type(2)>div:last-of-type {
   margin-bottom: 0;
   border-radius: 0;
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
}

#ig-icon-form>div>div:nth-of-type(2)>div:last-of-type>button {
   width: 49%;
   float: left;
   background: transparent;
   border: 2px solid;
   padding: 12px 4px;
   color: var(--main);
}

#ig-icon-form>div>div:nth-of-type(2)>div:last-of-type>button:nth-of-type(1) {
   margin-right: 1%;
}

#ig-icon-form>div>div:nth-of-type(2)>div:last-of-type>button:nth-of-type(2) {
   margin-left: 1%;
}

#ig-icon-form>div>div:nth-of-type(2)>div>span {
   display: block;
   padding: 7px 0;
   font-weight: bold;
   font-size: 13px;
   color: var(--white);
   text-align: center;
   background: var(--main);
   cursor: pointer;
}

#ig-icon-form>div>div:nth-of-type(2)>div>span:not(.active)+div {
   display: none;
}

#ig-icon-form>div>div:nth-of-type(2)>div>div {
   border: 1px solid var(--lightgray);
   border-top: none;
}

#ig-icon-form>div>div:nth-of-type(2)>div>div>div {
   margin: 20px;
}

#ig-icon-form>div>div:nth-of-type(2)>div>div>div:last-of-type {
   border-bottom: none;
}

#ig-icon-form>div>div:nth-of-type(2)>div>div>div>label {
   font-size: 0.875rem;
   padding: 0 0 10px 0;
}

#ig-icon-form>div>div:nth-of-type(2)>div>div>div>label:after {
   content: ' ' attr(data-value) attr(data-suffix);
   white-space: pre;
   display: inline-block;
   color: var(--green);
}





/* responsive styles */
@media (max-width: 800px) {



   #ig-sort-options>div>div:first-of-type,
   #ig-icon-form>div>* {
      display: block;
      width: 100%;
   }




   #ig-icon-form>div>div:nth-of-type(2) {
      margin-top: 50px;
   }
}