@import url('fontawesome_all_5_4_1.min.css');

/* GENERAL ICON SETTINGS */

.icon {
    text-decoration: none !important;
}

.icon::before {
    font-family: "Font Awesome 5 Pro";
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    text-decoration: none;
    font-size: 20px;
}

.icon.light {
    opacity: 0.8;
}

.icon.smaller::before {
    font-size: 16px !important;
}

.icon.large::before {
    font-size: 24px !important;
}

.icon.larger::before {
    font-size: 30px !important;
}

.icon.clickable {
    cursor: pointer;
}

.icon.spin {
    animation: fa-spin 2s infinite linear;
}

.icon.outline::before {
    font-weight: 400;
}

.icon.solid::before {
    font-weight: 900;
}

/* ICONS (NOT NECESSARY) */

.icon.pen::before {
    content: "\f304";
}

.icon.spinner::before {
    content: "\f110";
}

.icon.toggle-on::before {
    content: "\f205";
}

.icon.toggle-off::before {
    content: "\f204";
}

.icon.arrow-up::before {
    content: "\f357";
}

.icon.clone::before {
    content: "\f24d";
}

/* COLORS */

.icon.red {
    color: #ff4242 !important;
}

.icon.red.clickable:hover {
    color: #ff2525 !important;
}

.icon.red.clickable:active {
    color: #e01010 !important;
}

.icon.orange {
    color: #ff8242 !important;
}

.icon.orange.clickable:hover {
    color: #ff6a1e !important;
}

.icon.orange.clickable:active {
    color: #dc530d !important;
}

.icon.yellow {
    color: #ffdf31 !important;
}

.icon.yellow.clickable:hover {
    color: #eccd1f !important;
}

.icon.yellow.clickable:active {
    color: #c7ac19 !important;
}

.icon.green {
    color: #73c242 !important;
}

.icon.green.clickable:hover {
    color: #5ba92c !important;
}

.icon.green.clickable:active {
    color: #569a2b !important;
}

.icon.blue {
    color: #307bb2 !important;
}

.icon.blue.clickable:hover {
    color: #1a5f92 !important;
}

.icon.blue.clickable:active {
    color: #154c75 !important;
}

.icon.purple {
    color: #6c467d !important;
}

.icon.purple.clickable:hover {
    color: #652682 !important;
}

.icon.purple.clickable:active {
    color: #411f50 !important;
}

.icon.white {
    color: white !important;
}

.icon.white.clickable:hover {
    color: #f5f5f5 !important;
}

.icon.white.clickable:active {
    color: #d8d8d8 !important;
}

.icon.gray {
    color: dimgray !important;
}

.icon.gray.clickable:hover {
    color: #585858 !important;
}

.icon.gray.clickable:active {
    color: #444444 !important;
}

.icon.black {
    color: black !important;
}

.icon.black.clickable:hover {
    color: #2d2d2d !important;
}

.icon.black.clickable:active {
    color: #191919 !important;
}