/* Icon font definition */
@font-face {
    font-family: 'IconFont';
    src: url('fonts/icomoon.eot?v=1');
    src: url('fonts/icomoon.eot?v=1#iefix') format('embedded-opentype'), url('fonts/icomoon.woff2?v=1') format('woff2'), url('fonts/icomoon.ttf?v=1') format('truetype'), url('fonts/icomoon.woff?v=1') format('woff'), url('fonts/icomoon.svg?v=1#icomoon') format('svg');
    font-weight: normal;
    font-style: normal
}

/* apply font to elements containing classes that start with i360-icon */
[class^="i360-icon"], [class*=" i360-icon"] {
    font-family: 'IconFont' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    color: var(--cerulean-blue);
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Icon sizes, feel free to add whatever sizes you need */
.i360-icon-12 {
    font-size: 12px;
}

.i360-icon-15 {
    font-size: 15px;
}

.i360-icon-16 {
    font-size: 16px;
}

.i360-icon-18 {
    font-size: 18px;
}

.i360-icon-20 {
    font-size: 20px;
}

.i360-icon-24 {
    font-size: 24px;
}

.i360-icon-28 {
    font-size: 28px;
}

.i360-icon-40 {
    font-size: 40px;
}

/* grey icons, just add "grey" class to your icon and this will be applied */
[class^="i360-icon"].grey, [class*=" i360-icon"].grey,
button:hover [class^="i360-icon"].grey, button:hover [class*=" i360-icon"].grey,
[class^="i360-icon"].grey:hover, [class*=" i360-icon"].grey:hover,
button:focus [class^="i360-icon"].grey, button:focus [class*=" i360-icon"].grey,
[class^="i360-icon"].grey:focus, [class*=" i360-icon"].grey:focus,
button.active [class^="i360-icon"].grey, button.active [class*=" i360-icon"].grey,
[class^="i360-icon"].active.grey, [class*=" i360-icon"].active.grey,
button:active [class^="i360-icon"].grey, button:active [class*=" i360-icon"].grey,
[class^="i360-icon"].grey:active, [class*=" i360-icon"].grey:active {
    color: var(--light-grey-blue);
}

/* orange icons, just add "orange" class to your icon and this will be applied */
[class^="i360-icon"].orange, [class*=" i360-icon"].orange,
button:hover [class^="i360-icon"].orange, button:hover [class*=" i360-icon"].orange,
[class^="i360-icon"].orange:hover, [class*=" i360-icon"].orange:hover,
button:focus [class^="i360-icon"].orange, button:focus [class*=" i360-icon"].orange,
[class^="i360-icon"].orange:focus, [class*=" i360-icon"].orange:focus,
button.active [class^="i360-icon"].orange, button.active [class*=" i360-icon"].orange,
[class^="i360-icon"].active.orange, [class*=" i360-icon"].active.orange,
button:active [class^="i360-icon"].orange, button:active [class*=" i360-icon"].orange,
[class^="i360-icon"].orange:active, [class*=" i360-icon"].orange:active {
    color: #f0634c;
}

/* green icons, just add "green" class to your icon and this will be applied */
[class^="i360-icon"].green, [class*=" i360-icon"].green,
button:hover [class^="i360-icon"].green, button:hover [class*=" i360-icon"].green,
[class^="i360-icon"].green:hover, [class*=" i360-icon"].green:hover,
button:focus [class^="i360-icon"].green, button:focus [class*=" i360-icon"].green,
[class^="i360-icon"].green:focus, [class*=" i360-icon"].green:focus,
button.active [class^="i360-icon"].green, button.active [class*=" i360-icon"].green,
[class^="i360-icon"].active.green, [class*=" i360-icon"].active.green,
button:active [class^="i360-icon"].green, button:active [class*=" i360-icon"].green,
[class^="i360-icon"].green:active, [class*=" i360-icon"].green:active {
    color: var(--tealish-green);
}

/* icon states for buttons and non-buttons */
button:hover [class^="i360-icon"], button:hover [class*=" i360-icon"],
[class^="i360-icon"]:hover, [class*=" i360-icon"]:hover,
button:focus [class^="i360-icon"], button:focus [class*=" i360-icon"],
[class^="i360-icon"]:focus, [class*=" i360-icon"]:focus {
    color: var(--hover-blue);
}

button.active [class^="i360-icon"], button.active [class*=" i360-icon"],
[class^="i360-icon"].active, [class*=" i360-icon"].active,
button:active [class^="i360-icon"], button:active [class*=" i360-icon"],
[class^="i360-icon"]:active, [class*=" i360-icon"]:active {
    color: var(--pressed-blue);
}

button:disabled [class^="i360-icon"], button:disabled [class*=" i360-icon"],
.disabled[class^="i360-icon"], .disabled[class*=" i360-icon"] {
    color: var(--light-grey-blue);
}

/* icon states for elements with classes containing "btn-icon" */
[class^="btn-icon"], [class*=" btn-icon"] {
    box-shadow: none;
    border: none;
    padding: 0;
    border-radius: 0;
    background-color: transparent;
    width: auto;
    height: auto;
    display: flex;
    color: var(--cerulean-blue);
}

    [class^="btn-icon"]:focus,
    [class*=" btn-icon"]:focus,
    [class^="btn-icon"]:hover,
    [class*=" btn-icon"]:hover {
        color: var(--hover-blue);
        outline: none;
    }

    [class^="btn-icon"]:active,
    [class*=" btn-icon"]:active {
        color: var(--pressed-blue);
        outline: none;
    }

    [class^="btn-icon"]:disabled,
    [class*=" btn-icon"]:disabled {
        color: var(--light-grey-blue);
        outline: none;
    }

/* INDIVIDUAL ICONS, see Style Guide or IcoMoon for what these icons look like */
.i360-text-inactive-2:before {
    content: "\e962";
}

.i360-text-inactive:before {
    content: "\e963";
}

.i360-text-active-2:before {
    content: "\e964";
    /*color: #15c46f;*/
}

.i360-text-active:before {
    content: "\e966";
    /*color: #15c46f;*/
}

.i360-text-logo:before {
    content: "\e961";
    color: #28ace2;
}

.i360-portal-logo:before {
    content: "\e922";
    color: #28ace2;
}

/* black account nav icon */
.i360-account.black,
.i360-account.black:active,
.i360-account.black:hover, .i360-account.black:focus {
    color: var(--dark-grey-blue);
}

.i360-account:before {
    content: "\e960";
}

.i360-satellite:before {
    content: "\e95e";
}

.i360-map:before {
    content: "\e95f";
}

.i360-call-badge:before {
    content: "\e981";
}

.i360-not-home:before {
    content: "\e988";
}

.i360-call-refused-bad-number:before {
    content: "\e989";
}

.i360-not-hashtag:before {
    content: "\e992";
}

.i360-feedback:before {
    content: "\e990";
}

.i360-walk-badge:before {
    content: "\e982";
}

.i360-field:before {
    content: "\e955";
}

.i360-user:before {
    content: "\e957";
}

.i360-digital:before {
    content: "\e959";
}

.i360-volunteer:before {
    content: "\e95b";
}

.i360-location:before {
    content: "\e952";
}

.i360-advanced-audience:before {
    content: "\e953";
}

.i360-basic-audience:before {
    content: "\e954";
}

.i360-caret-up-dbl:before {
    content: "\e900";
}

.i360-caret-down-dbl:before {
    content: "\e91b";
}

.i360-caret-left-dbl:before {
    content: "\e901";
}

.i360-caret-right-dbl:before {
    content: "\e95c";
}

.i360-caret-right-sm:before {
    content: "\e902";
}

.i360-caret-left-sm:before {
    content: "\e903";
}

.i360-caret-down-sm:before {
    content: "\e904";
}

.i360-caret-up-sm:before {
    content: "\e905";
}

.i360-caret-left:before {
    content: "\e951";
}

.i360-caret-right:before {
    content: "\e906";
}

.i360-caret-right-2:before {
    content: "\e907";
}

.i360-close:before {
    content: "\e908";
}
/* red 'x' icon */
.i360-close.red,
.i360-close.red:focus, .i360-close.red:hover,
.i360-close.red:active {
    color: var(--red);
}

.i360-close-sm:before {
    content: "\e909";
}

.i360-hamburger:before {
    content: "\e90a";
}

.i360-hamburger-sm:before {
    content: "\e90b";
}
/* green hamburger icon */
.i360-hamburger-sm.green,
.i360-hamburger-sm.green:focus, .i360-hamburger-sm.green:hover,
.i360-hamburger-sm.green:active {
    color: var(--tealish-green);
}

.i360-admin:before {
    content: "\e90c";
}
/* black admin nav icon */
.i360-admin.black,
.i360-admin.black:active,
.i360-admin.black:hover, .i360-admin.black:focus {
    color: var(--dark-grey-blue);
}

.i360-admin:disabled {
    color: var(--light-grey-blue);
}

.i360-eq:before {
    content: "\e90d";
}

.i360-more-h:before {
    content: "\e90e";
}

.i360-more-v:before {
    content: "\e90f";
}

.i360-kanban-presets:before {
    content: "\e910";
}

.i360-list:before {
    content: "\e911";
}

.i360-hide-column:before {
    content: "\e912";
}

.i360-download:before {
    content: "\e913";
}

.i360-l-arrow-down:before {
    content: "\e914";
}

.i360-analytics:before {
    content: "\e915";
}
/* black analytics nav icon */
.i360-analytics.black,
.i360-analytics.black:active,
.i360-analytics.black:hover, .i360-analytics.black:focus {
    color: var(--dark-grey-blue);
}

.i360-analytics:disabled {
    color: var(--light-grey-blue);
}


.i360-home:before {
    content: "\e916";
}
/* black home nav icon */
.i360-home.black,
.i360-home.black:active,
.i360-home.black:hover, .i360-home.black:focus {
    color: var(--dark-grey-blue);
}

.i360-home:disabled {
    color: var(--light-grey-blue);
}


.i360-kanban:before {
    content: "\e917";
}

.i360-house:before {
    content: "\e918";
}

.i360-plus-circle:before {
    content: "\e919";
}

.i360-plus-circle-2:before {
    content: "\e91a";
}

.i360-plus:before {
    content: "\e91c";
}

.i360-minus:before {
    content: "\e95d";
}

.i360-check:before {
    content: "\e91d";
}
/* green check */
.i360-check,
.i360-check:active,
.i360-check:focus, .i360-check:hover {
    color: var(--tealish-green);
}

    .i360-check:disabled,
    .disabled.i360-check {
        color: var(--light-grey-blue);
    }

.i360-l-arrow-left:before {
    content: "\e91e";
}

.i360-l-arrow-right:before {
    content: "\e91e";
    transform: rotate(180deg);
}

.i360-smile:before {
    content: "\e967";
}


.i360-calendar:before {
    content: "\e91f";
}

.i360-websites:before {
    content: "\e920";
}

.i360-message:before {
    content: "\e98a";
}

.i360-message:before {
    content: "\e98a";
}

.i360-share:before {
    content: "\e98c";
}

.i360-enterprise:before {
    content: "\e983";
}

.i360-enterprise-private:before {
    content: "\e984";
}

.i360-copy:before {
    content: "\e985";
}

.i360-link:before {
    content: "\e986";
}

.i360-websites-2:before {
    content: "\e921";
}
/* black websites nav icon */
.i360-websites.black,
.i360-websites.black:active,
.i360-websites.black:hover, .i360-websites.black:focus {
    color: var(--dark-grey-blue);
}

.i360-websites:disabled {
    color: var(--light-grey-blue);
}

.i360-calendar-2:before {
    content: "\e927";
}
/* black calendar nav icon */
.i360-calendar-2.black,
.i360-calendar-2.black:active,
.i360-calendar-2.black:hover, .i360-calendar-2.black:focus {
    color: var(--dark-grey-blue);
}

.i360-calendar-2:disabled {
    color: var(--light-grey-blue);
}

.i360-envelope:before {
    content: "\e928";
}

.i360-envelope-fill:before {
    content: "\e929";
}

.i360-garbage:before {
    content: "\e92a";
}

/* garbage icon is red by default */
.i360-garbage,
.i360-garbage:active,
.i360-garbage:focus, .i360-garbage:hover,
button:active .i360-garbage,
button:focus .i360-garbage, button:hover .i360-garbage {
    color: var(--red);
}

    .i360-garbage:disabled,
    .disabled.i360-garbage,
    button:disabled .i360-garbage,
    button.disabled .i360-garbage {
        color: var(--light-grey-blue);
    }

.i360-garbage-2:before {
    content: "\e92b";
}
/* garbage icon is red by default */
.i360-garbage-2,
.i360-garbage-2:active,
.i360-garbage-2:focus, .i360-garbage-2:hover {
    color: var(--red);
}

    .i360-garbage-2:disabled,
    .disabled.i360-garbage-2 {
        color: var(--light-grey-blue);
    }

.i360-do-not-contact:before {
    content: "\e96c";
}

.i360-opt-in:before {
    content: "\e96d";
}

.i360-cell-phone:before {
    content: "\e970";
}

.i360-assign:before {
    content: "\e92c";
}

.i360-contacts-2:before {
    content: "\e92d";
}

.i360-phone:before {
    content: "\e931";
}

.i360-phone-fill:before {
    content: "\e932";
}

.i360-attach:before {
    content: "\e933";
}

.i360-attach-2:before {
    content: "\e934";
}

.i360-bell:before {
    content: "\e935";
}

.i360-chat:before {
    content: "\e936";
}

.i360-chat-2:before {
    content: "\e937";
}

.i360-note:before {
    content: "\e938";
}
/* green note icon */
.i360-note.green,
.i360-note.green:hover, .i360-note.green:focus,
.i360-note.green:active {
    color: var(--tealish-green);
}
/* black note icon */
.i360-note.black,
.i360-note.black:hover, .i360-note.black:focus,
.i360-note.black:active {
    color: var(--dark-grey-blue);
}

.i360-note-2:before {
    content: "\e939";
}

.i360-clipboard:before {
    content: "\e93a";
}
/* purple clipboard icon */
.i360-clipboard.purple,
.i360-clipboard.purple:hover, .i360-clipboard.purple:focus,
.i360-clipboard.purple:active {
    color: purple;
}

.i360-tag:before {
    content: "\e93b";
}
/* yellow tag icon */
.i360-tag.yellow,
.i360-tag.yellow:active,
.i360-tag.yellow:focus, .i360-tag.yellow:hover {
    color: var(--yellow);
}

.i360-tag-2:before {
    content: "\e93c";
}

.i360-search:before {
    content: "\e93d";
}

.i360-favorite:before {
    content: "\e93e";
}

.i360-favorite:active,
.i360-favorite.active {
    color: var(--yellow);
}

.i360-audience:before {
    content: "\e93f";
}
/* black audience nav icon */
.i360-audience.black,
.i360-audience.black:active,
.i360-audience.black:hover, .i360-audience.black:focus {
    color: var(--dark-grey-blue);
}

.i360-audience:disabled {
    color: var(--light-grey-blue);
}

.i360-actions:before {
    content: "\e940";
}
/* black actions nav icon */
.i360-actions.black,
.i360-actions.black:active,
.i360-actions.black:hover, .i360-actions.black:focus {
    color: var(--dark-grey-blue);
}

.i360-actions:disabled {
    color: var(--light-grey-blue);
}

.i360-contacts:before {
    content: "\e941";
}
/* black contacts nav icon */
.i360-contacts.black,
.i360-contacts.black:active,
.i360-contacts.black:hover, .i360-contacts.black:focus {
    color: var(--dark-grey-blue);
}

.i360-contacts:disabled {
    color: var(--light-grey-blue);
}

.i360-document:before {
    content: "\e942";
}

.i360-edit:before {
    content: "\e943";
}

.i360-lock:before {
    content: "\e944";
}

.i360-pause:before {
    content: "\e945";
}

.i360-play:before {
    content: "\e946";
}

.i360-check-circle:before {
    content: "\e947";
}

.i360-tasks:before {
    content: "\e948";
}

.i360-check-circle-2:before {
    content: "\e949";
}
/* green check circle */
.i360-check-circle-2.green,
.i360-check-circle-2.green:active,
.i360-check-circle-2.green:hover, .i360-check-circle-2.green:focus {
    color: var(--tealish-green);
}

.i360-phone-circle:before {
    content: "\e94a";
}

.i360-info:before {
    content: "\e94b";
}

.i360-info.red {
    color: var(--red);
}

.i360-question:before {
    content: "\e94c";
}

.i360-walk-logo .path1:before {
    content: "\e968";
    color: rgb(46, 52, 73);
}

.i360-walk-logo .path2:before {
    content: "\e969";
    margin-left: -1em;
    color: rgb(255, 255, 255);
}

.i360-walk-logo .path3:before {
    content: "\e96a";
    margin-left: -1em;
    color: rgb(255, 255, 255);
}

.i360-walks:before {
    content: "\e94d";
}

.i360-info-2:before {
    content: "\e94e";
}

.i360-info-2.red {
    color: var(--red);
}


.i360-polygon:before {
    content: "\e923";
}

.i360-square:before {
    content: "\e924";
}

.i360-circle:before {
    content: "\e925";
}

.i360-sm-info:before {
    content: "\e92e";
}

.i360-sm-garbage:before {
    content: "\e930";
}

.i360-move:before {
    content: "\e958";
}

.i360-selected-criteria:before {
    content: "\e95a";
}

.i360-background-circle:before {
    content: "\e92f";
}

.i360-email-edit-outline:before {
    content: "\e96b";
}

/* don't know what this one is for */
.i360-partly-cloudy:before {
    content: "\e94f";
}

.i360-filter:before {
    content: "\e950";
}

.i360-submitted:before {
    content: "\e965";
}

.i360-floppy-save:before {
    content: "\e987";
}

/* INDIVIDUAL ICONS END */


/* inherit color from parent, just add "unset" class to your icon and this will be applied */
/* keep this style last in the style sheet so that it's CSS rules win without using the !important flag*/
[class^="i360-icon"].unset, [class*=" i360-icon"].unset,
button:hover [class^="i360-icon"].unset, button:hover [class*=" i360-icon"].unset,
[class^="i360-icon"].unset:hover, [class*=" i360-icon"].unset:hover,
button:focus [class^="i360-icon"].unset, button:focus [class*=" i360-icon"].unset,
[class^="i360-icon"].unset:focus, [class*=" i360-icon"].unset:focus,
button.active [class^="i360-icon"].unset, button.active [class*=" i360-icon"].unset,
[class^="i360-icon"].active.unset, [class*=" i360-icon"].active.unset,
button:active [class^="i360-icon"].unset, button:active [class*=" i360-icon"].unset,
[class^="i360-icon"].unset:active, [class*=" i360-icon"].unset:active {
    color: unset;
}