/* ==============================
   Icons for Advertiser Platform

   author: Peter Tizzard
   02/2014

   The file 'icons-sprite3.svg' contains icons first implemented on the conversation page.

   If additional icons are required both 'icons-sprite3.svg' and 'icons-sprite3.png' need changing.


   Example HTML
   <i class="icon icon-green-tick"></i>

   If you require additional margin, padding etc around your icon add those rules to your
   page CSS file not in here.

   ============================== */
.icon,
.lyh .wrapper .icon {
    border:0;
    background-image:url("//resources.holidaylettings.co.uk/images/platform/icons-sprite30.svg");
    background-repeat:no-repeat;
    background-color: transparent;
    box-shadow:none;
    display:inline-block;
    width:24px;
    height:24px;
    margin:0 0.5em 0 0;
    font-size:12px;
    line-height: 0;
    position: relative;
    text-indent: -2000px;
}

.no-svg .icon,
.lyh .no-svg .mainPane .icon {
    background-image:url("//resources.holidaylettings.co.uk/images/platform/icons-sprite30.png");
}


.icon-bin,
.icon-questionmark {
    cursor: pointer;
    position: relative;
    vertical-align: middle;
}

.lft-padding-for-icon {
    padding-left:30px;
}
.lft-padding-for-icon .icon {
    margin:0 .5em -.5em -30px;
}



/* Date Picker */
.icon-datepicker {
    background-position: -32px -20px;
}


.icon-close-form {
    background-position: -28px -105px;
}

/* Green tick */
.icon-green-tick {
    background-position: -29px -877px;
}

/* White tick */
.icon-white-tick {
    background-position: -26px -1130px;
    height: 15px;
    width:20px;
}

/* Green circle with white tick */
.icon-green-circle-tick {
    background-position: -29px -321px;
}

/* Orange circle with exclamation mark */
.icon-circle-exclamation {
    background-position: -29px -279px;
}

/* Happy Face */
.icon-circle-happy-face {
    background-position: -29px -751px;
}

/* Happy Face with grey triangle below */
.icon-circle-happy-face-triangle {
    background-position: -29px -1034px;
    height: 40px;
}


/* Normal Face */
.icon-circle-normal-face {
    background-position: -29px -710px;
}

/* Sad Face */
.icon-circle-sad-face {
    background-position: -29px -671px;
}

/* Left blue Arrow */
.icon-left-blue-arrow {
    background-position: -36px -484px;
    position: relative;
    width: 10px;
}

/* Right blue Arrow */
.icon-right-blue-arrow {
    background-position: -36px -519px;
    position: relative;
    width: 10px;
}

/* Left light grey Arrow */
.icon-left-light-grey-arrow {
    background-position: -36px -2128px;
    position: relative;
    width: 10px;
}

/* Right light grey Arrow */
.icon-right-light-grey-arrow {
    background-position: -36px -2163px;
    position: relative;
    width: 10px;
}

/* Down blue arrow */
.icon-down-blue-arrow {
    background-position: -31px -383px;
}

/* Up blue arrow */
.icon-up-blue-arrow {
    background-position: -31px -359px;
    height:15px;
}
.ap-button .icon-down-blue-arrow {
    background-position: -31px -388px;
    height:15px;
}

/* Mail envelope */
.icon-mail {
    background-position: -29px -448px;
    margin-right: 0;
    position: relative;
}

/* Dustbin */
.icon-bin {
    background-position: -24px -199px;
    height: 32px;
    width: 32px;
}

/* Question mark */
.icon-questionmark {
    background-position: -24px -149px;
    height: 32px;
    outline:none;
    width: 32px;
}

/* Search */
.icon-search {
    background-position: -29px -1165px;
    height: 20px;
    width: 21px;
}

/* Down white arrow */
.icon-down-white-arrow {
    background-position: -31px -1218px;
}

/* Up white arrow */
.icon-up-white-arrow {
    background-position: -31px -1190px;
}

/* Left white arrow */
.icon-left-white-arrow {
    background-position: -31px -1916px;
}

/* Right white arrow */
.icon-right-white-arrow {
    background-position: -31px -1949px;
}

/* White cross in black circle */
.icon-white-cross-on-black {
    background-position: -24px -106px;
    height: 23px;
    width: 30px;
}

/* paper clip */
.icon-paperclip {
    background-position: -27px -1316px;
    height: 18px;
    width: 30px;
}

/* Down black arrow */
.icon-down-black-arrow {
    background-position: -31px -1277px;
}

.ap-button  .icon-down-black-arrow {
    background-position: -31px -1284px;
}

/* Up black arrow */
.icon-up-black-arrow {
    background-position: -31px -1250px;
}
.ap-button .icon-up-black-arrow {
    background-position: -31px -1257px;
}

/* Left black arrow */
.icon-left-black-arrow {
    background-position: -31px -1984px;
}

/* Right black arrow */
.icon-right-black-arrow {
    background-position: -31px -2018px;
}

/* White tick in green circle */
.icon-white-tick-green-circle {
    background-position: -26px -1592px;
    height: 30px;
    width: 30px;
}

/* White tick in grey circle */
.icon-white-tick-grey-circle {
    background-position: -26px -1544px;
    height: 30px;
    width: 30px;
}

/* White cross in red circle */
.icon-white-cross-red-circle {
    background-position: -25px -1496px;
    height: 30px;
    width: 30px;
}

/* White cross in grey circle */
.icon-white-cross-grey-circle {
    background-position: -25px -1448px;
    height: 30px;
    width: 30px;
}

/* Discuss cross in red circle */
.icon-discuss-green-circle {
    background-position: -25px -1400px;
    height: 30px;
    width: 30px;
}

/* Discuss cross in grey circle */
.icon-discuss-grey-circle {
    background-position: -25px -1352px;
    height: 30px;
    width: 30px;
}

/* White circle green tick */
.icon-green-tick-white-circle {
    background-position: -25px -1754px;
    height: 30px;
    width: 30px;
}

/* White hamburger */
.icon-white-hamburger {
    background-position: -32px -1640px;
    height: 17px;
    width: 16px;
}

/* White cross */
.icon-white-cross {
    background-position: -32px -1676px;
    height: 14px;
    width: 16px;
}

/* White cross in blue circle */
.icon-white-cross-blue-circle {
    background-position: -25px -1842px;
    height: 30px;
    width: 30px;
}

/* White dash in blue circle */
.icon-white-dash-blue-circle {
    background-position: -25px -1802px;
    height: 30px;
    width: 30px;
}

/* Grey user icon */
.icon-user-grey {
    background-position: -30px -2058px;
    height: 20px;
    width: 20px;
}

/* White dash in blue circle */
.icon-filter {
    background-position: -30px -2095px;
    height: 21px;
    width: 20px;
}


/* white right-facing arrow in orange circle */
.icon-right-arrow {
    background-position:-31px -2518px;
    width:18px;
    height:18px;
}

/* White dash in blue circle */
.icon-white-long-up-arrow {
    background-position: -30px -2202px;
    height: 34px;
    width: 20px;

}

/* green question mark in a white circle */
.icon-question-mark {
    background-position:-31px -1882px;
    width:18px;
    height:18px;
    cursor: pointer;
}
/* Green eye */
.icon-green-eye {
    background-position: -25px -2249px;
    width: 30px;
}

/* Green question mark */
.icon-green-speach {
    background-position: -25px -2290px;
}

/* Green play in circle */
.icon-green-play {
    background-position: -28px -2329px;
}

/* Blue eye */
.icon-blue-eye {
    background-position: -25px -2368px;
    height: 30px;
    width: 30px;
}

/* Blue question mark */
.icon-blue-speech {
    background-position: -25px -2417px;
    height: 30px;
    width: 30px;
}

/* Blue play */
.icon-blue-play {
    background-position: -25px -2468px;
    height: 30px;
    width: 30px;}

/* light grey back arrow */
.icon-grey-back {
    background-position: -31px -2750px;
    width: 18px;
    height: 18px;
}

/* divider on mobile app header */
.icon-grey-divider {
    background-position: -39px -2789px;
    width: 2px;
    height: 30px;
}

.icon-grey-cross {
    background-position: -33px -2946px;
    width:14px;
    height:14px;
}

.icon-white-headphones {
    background-position: -31px -2750px;
    width: 18px;
    height: 18px;
}