/* Defintions for icons */
.icon-box       { display:inline-block; position:relative; }
.icon-box .icon {display:inline-block; position:relative; width:100%; height:100%; }

.icon-box.svg-icon { max-width:50px; max-height:50px; }
.icon-box.svg-icon svg { width:100%; height:auto; }

/* At the  moment most other  Icons are CSS Icons*/
/* Valodation Boxes Icons:valid "Checkmark" and invalid "x" */

.validation-box .icon-box,
.checkmark.icon-box { position:absolute; top:calc(50% - 17px); right:1rem; width:35px; height:35px; z-index:4;}

.validation-box.valid .icon::after,
.validation-box.invalid .icon::after,
.validation-box.invalid .icon::before,
.checkmark.icon-box .icon::after   { content:''; position:absolute; z-index:2; }
.validation-box.valid .icon::after,
.checkmark.icon-box .icon::after      {
  width:18px;
  height:29px;
  position:absolute;
  right:9px;
  -webkit-transform:perspective(999px) rotate(45deg);
  transform:perspective(999px) rotate(45deg);
  top:calc(50% - 20px);
  border-style:solid;
  border-width:0 5px 5px 0;
  border-color:currentColor;
  color:currentColor;
}
.validation-box.invalid .icon::after,
.validation-box.invalid .icon::before   { width:29px; height:7px; right:4px; top:45%; background-color:currentColor; color:currentColor;  }
.validation-box.invalid .icon::before   { -webkit-transform:rotate(-45deg); transform:rotate(-45deg); }
.validation-box.invalid .icon::after    { -webkit-transform:rotate(45deg); transform:rotate(45deg); }


/* Button next */
.button.next                            { padding:12px 36px 12px 26px; }
.button.next .icon-box                  { width:25px; position:absolute; top:calc(50% - 1px); right:15px; }
.button.next .icon                      { position:absolute; height:2px; width:15px; background-color:currentColor; right:0;}
.button.next .icon:after  {
  content:'';
  position:absolute;
  top:-5px;
  right:0;
  width:13px;
  height:13px;
  border-width:2px 2px 0 0;
  border-style:solid;
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
  border-color:currentColor;
 }

 /* Button previous */
 .button.previous                { padding:12px 26px 12px 36px; }
 .button.previous .icon-box      { width:25px; position:absolute;  top:calc(50% + 1px); left:15px; transform:rotate(180deg) }
 .button.previous .icon          { position:absolute; height:2px; width:15px; background-color:currentColor;  right:0; }
 .button.previous .icon:after  {
   content:'';
   position:absolute;
   top:-5px;
   right:0;
   width:13px;
   height:13px;
   border-width:2px 2px 0 0;
   border-style:solid;
   -webkit-transform:rotate(45deg);
   transform:rotate(45deg);
   border-color:currentColor;
  }

/* Button Info for tooltip */
.button.info                    { width:32px; min-width:inherit; height:32px; border-radius:50%; padding:0; position:absolute; top:-5px; right:-5rem; z-index:22; }
.button.info:after              { content:'i'; position:absolute; z-index:1; top:0; left:0; font-family:courier; height:100%; width:100%; line-height:3.1rem; font-size:2.4rem; font-weight:700; text-align:center;}



/* open/ Close / Reset*/

.icon-box.open,
.icon-box.close                  { width:50px; height:50px; border:2px solid currentColor; border-radius:50%; position:relative; }
.icon-box.reset                  { width:25px; height:25px;  border:1px solid currentColor; border-radius:50%; position:relative; }
.icon-box.open .icon,
.icon-box.close .icon,
.icon-box.reset .icon            { position:absolute; width:24px; height:2px; background-color:currentColor; top:calc(50% - 1px); left:calc(50% - 12px); }
.icon-box.reset .icon            { width:15px; height:1px; top:50%; left:calc(50% - 7px); }
.icon-box.open .icon:after,
.icon-box.close .icon:after,
.icon-box.reset .icon:after      { content:''; width:100%; height:2px; position:absolute; -webkittransform:rotate(-90deg); transform:rotate(-90deg); background-color:currentColor; left:0;}
.icon-box.reset .icon:after      { height:1px; }
.icon-box.close .icon,
.icon-box.reset .icon            { -webkittransform:rotate(-45deg); transform:rotate(-45deg);  }


/* bookmark */
.icon-box.bookmarks              { overflow:hidden;
position:relative;
width:23px;
height:34px;
background-color:currentColor;}
.icon-box.bookmarks .icon        { position:absolute;
width:19px;
height:19px;
transform:rotate(-45deg);
top:28px;
left:2px;}


/* Shrink / Enlarge */
.shrink-enlarge .icon-box        { width:50px; height:50px; border:2px solid currentColor; border-radius:50%; position:relative; }
.shrink-enlarge .icon            { width:100%; height:100%; }
.shrink-enlarge .icon-box:after,
.shrink-enlarge .icon-box:before,
.shrink-enlarge .icon:after,
.shrink-enlarge .icon:before      { content:''; position:absolute;  display:block; width:15px; }
.shrink-enlarge .icon-box:after,
.shrink-enlarge .icon-box:before { height:2px; background-color:currentColor; -webkit-transform:rotate(-45deg); transform:rotate(-45deg); top:12px; right:4px;}
.shrink-enlarge .icon-box:after  { top:inherit; right:inherit; left:4px; bottom:12px;}

.shrink-enlarge .shrink .icon:after,
.shrink-enlarge .shrink .icon:before    {  height:15px; border-style:solid; border-width:2px 2px 0 0; border-color:currentColor; -webkit-transform:rotate(180deg); transform:rotate(180deg); top:7px; right:6px;}
.shrink-enlarge .shrink .icon:before    { top:inherit; right:inherit; left:6px; bottom:7px; transform:rotate(0);}

.shrink-enlarge .enlarge.icon-box:after,
.shrink-enlarge .enlarge.icon-box:before { height:2px; background-color:currentColor; -webkit-transform:rotate(-45deg); transform:rotate(-45deg); top:14px; right:8px;}
.shrink-enlarge .enlarge.icon-box:after  { top:inherit; right:inherit; left:8px; bottom:14px;}
.shrink-enlarge .enlarge .icon:after,
.shrink-enlarge .enlarge .icon:before    {  height:15px; border-style:solid; border-width:2px 2px 0 0; border-color:currentColor; -webkit-transform:rotate(0deg); transform:rotate(0deg); top:8px; right:9px;}
.shrink-enlarge .enlarge .icon:before    { top:inherit; right:inherit; left:9px; bottom:8px; transform:rotate(180deg);}


/* Delete Icon*/
.delete .icon {
  display:inline-block;
  vertical-align:middle;
  position:relative;
  width:22px;
  height:22px;
  border-radius:0 0 3px 3px;
  border-top:none;
  margin:9px 6px 3px;
  border:2px solid;
}
.delete .icon::before {
    content:'';
    position:absolute;
    width:8px;
    height:2px;
    top:-7px;
    box-shadow:inset 0 0 0 32px,-10px 2px 0 0,-6px 2px 0 0,0 2px 0 0,6px 2px 0 0,10px 2px 0 0;
    left:50%;
    -webkit-transform:translateX(-50%);
    transform:translateX(-50%);
}
.delete .icon::after {
  content:'';
  position:absolute;
  height:10px;
  width:7px;
  border-style:solid;
  border-width:0 2px 0px 2px;
  top:4px;
  left:50%;
  -webkit-transform:translateX(-50%);
  transform:translateX(-50%);
}

/* Add Item (+) */
.add-item .icon-box              { width:100%; height:100%; position:relative; }
.add-item .icon-box .icon        { width:14px;height:2px; position:absolute; top:calc(50% - 1px); left:calc(50% - 7px); }
.add-item .icon-box .icon:after  { content:''; position:absolute; width:14px; height:2px; top:0; left:0; -webkit-transform:rotate(90deg); transform:rotate(90deg); }

/* Icon Upload */
.icon-box.upload                { width:35px; height:35px; position:absolute; }
.upload .icon                   { position:absolute; margin-top:12px; width:22px; height:9px; border-style:solid; border-width:2px; border-top:none; border-radius:1px; margin:18px 0 0 6px; border-color:currentColor;  }
.upload .icon:before            { content:''; position:absolute; top:-7px; left:8px; width:2px; height:11px; background-color:currentColor;  }
.upload .icon:after  {
  border-color:currentColor;
    content:'';
    position:absolute;
    top:-10px;
    left:5px;
    width:8px;
    height:8px;
    border-style:solid;
    border-width:2px 2px 0 0;
    -webkit-transform:rotate(-45deg);
            transform:rotate(-45deg);
  }

.icon-box.download         { width:35px; height:35px; position:absolute; top:calc(50% - 16px); }
.download .icon            { position:absolute; margin-top:12px; width:22px; height:9px; border-style:solid; border-width:2px; border-top:none; border-radius:1px; margin:18px 0 0 6px; border-color:currentColor;  }
.download .icon:before     { content:''; position:absolute; top:-10px; left:8px; width:2px; height:11px; background-color:currentColor;  }
.download .icon:after  {
    border-color:currentColor;
      content:'';
      position:absolute;
      bottom:3px;
      left:5px;
      width:8px;
      height:8px;
      border-style:solid;
      border-width:2px 2px 0 0;
      -webkit-transform:rotate(135deg);
              transform:rotate(135deg);
}

/* Icon Simple arrow */
.icon-box.arrow .icon      { position:absolute; top:calc(50% - 6px); left:calc(50% - 6px);  width:12px; height:12px; border-style:solid; border-width:2px 2px 0 0; border-color:currentColor;  }


/* Icon Bell/Notification*/
.icon-box.bell,
.icon-box.bell:before,
.icon-box.bell .icon:after { border-top-left-radius:100px; border-top-right-radius:100px }
.icon-box.bell             { display:block; border-width:2px; border-style:solid; border-bottom:0; width:28px; height:34px; position:absolute; top:3px; left:calc(50% - 14px); }
.icon-box.bell::before,
.icon-box.bell .icon:after { content:''; display:block; position:absolute; background:currentColor; width:8px; height:6px; top:-6px; left:calc(50% - 4px); }
.icon-box.bell .icon       { position:absolute; height:2px; width:32px; background:currentColor; bottom:-3px; left:-4px; }
.icon-box.bell .icon:after { top:0; transform:rotate(180deg); }

/* Icon Chat*/
.icon-box.chat             { position:absolute; width:41px; height:33px; border-radius:7px 7px 8px 8px; margin:5px 0 0 0; border:2px solid; border-color:currentColor; border-bottom-color:transparent; top:0; left:0; }

.icon-box.chat::after,
.icon-box.chat::before,
.icon-box.chat .icon::after,
.icon-box.chat .icon::before { content:'';  display:inline-block;  position:absolute; }
.icon-box.chat::before      { border:2px solid; width:10px; height:10px; border-width:0 0 2px 2px; border-style:solid; -webkit-transform:rotate(-45deg); transform:rotate(-45deg); bottom:-4px; left:8px; }

.icon-box.chat::after       { border:2px solid; width:calc(100% - 2px); height:2px; border-width:0 17px 0 6px; border-style:solid; bottom:0; left:1px; }
.icon-box.chat .icon        { border:4px solid; border-color:currentcolor currentcolor transparent transparent; width:28px; position:absolute; right:-12px; bottom:-3px; height:23px; border-radius:5px; border-width:0 12px 5px 0; }
.icon-box.chat .icon::after { right:-7px; bottom:-10px; width:0; height:0; border-style:solid; border-width:8px 4.5px 0 8.5px;   border-color:currentColor transparent transparent transparent;  }
.icon-box.chat .icon::before { left:0; bottom:-4px; width:25px; height:0; border-style:solid; border-width:0 0 4px 0; border-color:currentColor; border-radius:0 0 0 3px; }




/* Icon Agenda simple Box */
.agenda .icon-box {
    width:27px;
    height:38px;
    border-radius:5px;
    border-width:2px;
    border-style:solid;
    border-color:currentColor;
    position:absolute;
    top:3px;
    right:0;
    display:flex;
}
.agenda .icon-box .icon   { margin:auto; height:auto; width:auto; font-style:normal;}

/* Seacrh */
.icon-box.search         { position:absolute; right:13px; top:calc(50% - 12px);  width:20px; height:20px; border:2px solid; border-radius:100%; border-color:currentColor;}
.icon-box.search .icon   { position:absolute; border-radius:3px; width:3px; height:10px; background:currentColor; top:12px; left:16px; -webkit-transform:rotate(-45deg); transform:rotate(-45deg); }

/* Icon Play Movie */
.icon-box.play-movie,
.recent-stream .icon-box { width:100%; height:100%; border-style:solid; border-width:2px; background-color:currentColor; border-radius:3px; }
.icon-box.play-movie .icon,
.recent-stream .icon {
  position:absolute;
  top:calc(50% - 5px);
  left:calc(50% - 4px);
  width:0;
  height:0;
  border-style:solid;
  border-width:6px 0 6px 12px;
  border-color:transparent transparent transparent currentColor;
  border-style:solid;
  -webkit-transform:perspective(999px) rotate(360deg);
  transform:perspective(999px) rotate(360deg);
}
/* IconFeedback */
.icon-box.feedback       { width:100%; height:100%; border-style:solid; border-width:2px; background-color:currentColor; border-radius:3px; }
.icon-box.feedback .icon {
  position:absolute;
  top:calc(50% - 23px);
  left:6px;
  width:22px;
  height:22px;
  border-style:solid;
  border-width:0 2px 2px 0;
  border-color:currentColor;
  border-style:solid;
  -webkit-transform:perspective(999px) rotate(360deg);
  transform:perspective(999px) rotate(45deg);
}

.icon-box.locator {
  position:relative;
  display:block;
  -webkit-transform:rotate(45deg) scale(1) translate(-1px,-1px);
  transform:rotate(45deg) scale(1) translate(-1px,-1px);
  width:26px;
  height:26px;
  border-radius:100% 100% 0 100%;
  border:2px solid;
}
.icon-box.locator .icon       { display:block; box-sizing:border-box; position:absolute; width:12px; height:12px; border:2px solid; top:5px; left:5px; border-radius:40px }


/* questions/accordions */
.selector .icon-box,
.icon-box.select         { position:absolute; right:0; height:100%; width:50px; top:-1px; right:-1px; z-index:1; }
.selector .icon-box      { height:calc(100% + 2px); }
.selector  .icon,
.icon-box.select .icon {
    width:16px;
    height:16px;
    border-style:solid;
    border-width:2px 2px 0 0;
    position:absolute;
    z-index:2;
    right:18px;
    top:calc(50% - 8px);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
    display:block;
}
.selector.active .icon,
.selector:hover .icon,
.icon-box.select .icon         { -webkit-transform:rotate(135deg) translate(-3px, 0px); transform:rotate(135deg) translate(-3px, 0px); }

/* Create PDF / PDF / Whitelabel */
.create-pdf .icon-box,
.icon-box.whitepaper         { position:relative; display:inline-block; width:22px; height:27px; border:2px solid currentColor;  border-top-right-radius:9px; overflow:hidden; }
.create-pdf .icon-box::before,
.icon-box.whitepaper:before { content:''; position:absolute; right:0; top:0; width:7px; height:7px; border-style:solid; border-width:0 0 2px 2px; background-color:currentColor; }
.create-pdf .icon-box::after,
.icon-box.whitepaper:after  { content:'PDF'; position:absolute; text-align:center; top:7px; width:100%; color:currentColor; font-size:9px; z-index:1; left:0; }


.icon-box.podcast,
.icon-box.podcast::after,
.icon-box.podcast::before {
    box-sizing: border-box;
    position: relative;
    display: block;
    width: 14px;
    height: 14px;
    border: 2px solid;
    border-bottom-color: transparent;
    border-radius: 50%;
    text-align: center;
}
.icon-box.podcast .icon { width:2px; background-color:currentColor; }
.icon-box.podcast::after,
.icon-box.podcast::before {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    top: 2px;
    left: 2px
}
.icon-box.podcast:after {
    width: 22px;
    height: 22px;
    top: -6px;
    left: -6px
}
.icon-box.read {
    display: block;
    position: relative;
    box-sizing: border-box;
    width: 2px;
    height: 17px;
    border-bottom: 4px solid;
    border-radius: 4px
}
.icon-box.read::after,
.icon-box.read::before {
    content: "";
    display: block;
    position: absolute;
    box-sizing: border-box;
    width: 8px;
    height: 12px;
    box-shadow: 0 0 0 2px;
    border-radius: 1px;
    bottom: -1px;
    background:
        linear-gradient(to left,
            currentColor 4px,transparent 0)
            no-repeat center 5px/4px 2px,
        linear-gradient(to left,
            currentColor 4px,transparent 0)
            no-repeat center 2px/4px 2px,
        linear-gradient(to left,
            currentColor 4px,transparent 0)
            no-repeat center 8px/4px 2px
}
.icon-box.read::before {
    border-top-right-radius: 3px;
    left: -8px
}
.icon-box.read::after {
    border-top-left-radius: 3px;
    right: -8px
}


/* Make Appointment */
.appointment.icon-box        { box-sizing:border-box; position:relative; display:block; width:35px; height:30px; border:2px solid; }
.appointment.icon-box:after  {  content:''; width:100%; height:4px; background-color:currentColor; position:absolute; top:0; left:0; }
.appointment.icon-box:before  {
  content:'';
  background:currentColor;
  content:''; background:currentColor;
  width:4px;
  box-shadow:12px 0 0,6px 0 0,0 6px 0,12px 6px 0,6px 6px 0;
  top:10px;
  display:block;
  box-sizing:border-box;
  position:absolute;
  height:4px;
  left:6px;
}

.appointment.icon-box .icon { width:16px; height:16px; border:2px solid currentColor; background-color:#ffffff; border-radius:50%; position:absolute; bottom:-6px; right:-6px;}
.appointment.icon-box .icon::after { content:""; display:block; position:absolute; width:7px; height:7px; border-style:solid; border-width:0 0 3px 2px; top:1px; left:5px; }


/* Top Match & Partner Icon*/
.top-match + .icon-box,
.top-match + .icon-box:before,
.top-match + .icon-box:after,
.icon-box.PREMIUM,
.icon-box.PREMIUM:before,
.icon-box.PREMIUM:after        { position:absolute; display:block; content:''; width:0px; height:0px; color:currentColor;}

.top-match + .icon-box,
.icon-box.PREMIUM              { right:-87px; top:-24px; border-right:100px solid transparent; border-bottom:70px solid  currentColor; border-left:100px solid transparent; transform:rotate(35deg)  scale(0.20); -webkit-transform:rotate(35deg)  scale(0.20); }
.top-match + .icon-box:before,
.icon-box.PREMIUM:before       { border-bottom:80px solid  currentColor; border-left:30px solid transparent; border-right:30px solid transparent; top:-45px; left:-65px; -webkit-transform:rotate(-35deg); transform:rotate(-35deg); }
.top-match + .icon-box:after,
.icon-box.PREMIUM:after        { top:3px; left:-105px; border-right:100px solid transparent; border-bottom:70px solid currentColor; border-left:100px solid transparent; -webkit-transform:rotate(-70deg);transform:rotate(-70deg); }

.good-match + .icon-box,
.good-match + .icon-box:before,
.MASTER.icon-box,
.MASTER.icon-box:before        { position: absolute; background: currentColor;width: 80px;height: 80px;}
.good-match + .icon-box,
.MASTER.icon-box               { right: -28px; top: -28px; text-align: center; -webkit-transform: rotate(20deg) scale(0.30); transform: rotate(20deg) scale(0.30); }
.good-match + .icon-box:before,
.MASTER.icon-box:before         { content:''; top: 0; left: 0; -webkit-transform: rotate(135deg); transform: rotate(135deg); }

.match + .icon-box,
.BASIC.icon-box                { background: currentColor; width: 80px; height: 80px; position: absolute; text-align: center; -webkit-transform: scale(0.30); transform: scale(0.30); right: -28px; top: -28px; }
.match + .icon-box:before,
.match + .icon-box:after,
.BASIC.icon-box:before,
.BASIC.icon-box:after          { content:''; position: absolute; top: 0; left: 0; height: 80px; width: 80px; background: currentColor; -webkit-transform: scale(0.30); transform: scale(0.30) }
.match + .icon-box:before,
.BASIC.icon-box:before         { -webkit-transform: rotate(30deg); transform: rotate(30deg); }
.match + .icon-box:after,
.BASIC.icon-box:after          { -webkit-transform: rotate(60deg); transform: rotate(60deg); }

/* SVG Icons */
/*.top-match .top-match        { display:block; background-image:url('../images/icon-star-premium-black.svg');   background-position:top right; background-repeat:no-repeat; }

.good-match .good-match      {  display:block; background-image:url('../images/icon-star-master-black.svg');  background-position:top right; background-repeat:no-repeat;  }
.match .match                {  display:block; background-image:url('../images/icon-star-basic-black.svg');  background-position:top right; background-repeat:no-repeat;  }*/
.speaker                     { background-image:url(../images/icon-speaker.svg);  background-position:0 0; background-repeat:no-repeat; }
.exhibitor                   { background-image:url(../images/icon-exhibitor.svg);  background-position:0 0; background-repeat:no-repeat; }