.flag-icon {
    height: 20px;
    width: 38px;
    background-size: cover;
    display: inline-block;
}

.flag-icon-us {
    background-image: url("../images/us.svg");
}

.flag-icon-mx {
    background-image: url("../images/mexico.svg");
}

.arrow-icon {
    height: 38px;
    width: 26px;
    background-size: cover;
    display: inline-block;
}

.arrow-right {
    background-image: url("../images/arrow.svg");
}

.arrow-left {
    background-image: url("../images/arrow.svg");
    transform: rotate(180deg);
}

.red-x {
    height: 30px;
    width: 30px;
    background-size: cover;
    display: inline-block;
    background-image: url("../images/red_x.svg");
}

.gray-x {
    height: 30px;
    width: 30px;
    background-size: cover;
    display: inline-block;
    background-image: url("../images/gray_x.svg");
}

.check {
    height: 24px;
    width: 24px;
    background-size: cover;
    display: inline-block;
    background-image: url("../images/check.svg");
}

.red-x2 {
    height: 24px;
    width: 24px;
    background-size: cover;
    display: inline-block;
    background-image: url("../images/red_x.svg");
}

.red-x3 {
    height: 18px;
    width: 18px;
    background-size: cover;
    display: inline-block;
    background-image: url("../images/red_x.svg");
    vertical-align: top;
    margin-top: 3px;
}

.red-x4 {
    height: 12px;
    width: 12px;
    background-size: cover;
    display: inline-block;
    background-image: url("../images/red_x.svg");
    vertical-align: top;
    margin-top: 14px;
    margin-left: -26px;
    position: relative;
    z-index: 100;
}

.paperclip {
    height: 25px;
    width: 22px;
    background-size: cover;
    display: inline-block;
    background-image: url("../images/paperclip.svg");
    vertical-align: top;
}

.paperclip .tooltiptext {
    visibility: hidden;
    font-style: normal;
    padding: 0.25em 0.5em;
    background-color: #323d95;
    color: white;
    text-align: center;
    border-radius: 0.25em;
    white-space: nowrap;
    /* Position the tooltip */
    position: relative;
    z-index: 1;
    top: 100%;
    left: 100%;
    transition-property: visibility;
    transition-delay: 0s;
}

.paperclip:hover .tooltiptext {
    visibility: visible;
    transition-delay: 0.3s;
}

.plus {
    height: 24px;
    width: 24px;
    background-size: cover;
    display: inline-block;
    background-image: url("../images/plus.svg");
}

.edit {
    height: 24px;
    width: 24px;
    background-size: cover;
    display: inline-block;
    background-image: url("../images/edit.svg");
}

.trash {
    height: 24px;
    width: 24px;
    background-size: cover;
    display: inline-block;
    background-image: url("../images/trash.svg");
}

.impand {
    height: 24px;
    width: 24px;
    background-size: cover;
    display: inline-block;
    background-image: url("../images/collapse.svg");
}

.expand {
    transform: rotate(180deg);
}

.mini {
    height: 14px;
    width: 14px;
    background-size: cover;
    display: inline-block;
    vertical-align: top;
    margin-top: 5px;
}

.yes {
    background-image: url("../images/circle-yes.svg");
}

.no {
    background-image: url("../images/circle-no.svg");
}

.na {
    background-image: url("../images/circle-na.svg");
}

.edit-big {
    height: 32px;
    width: 32px;
    background-size: cover;
    display: inline-block;
    background-image: url("../images/edit.svg");
    vertical-align: top;
    margin-top: 9px;
    margin-left: 4px;
}

.camera {
    height: 24px;
    width: 24px;
    background-size: cover;
    display: inline-block;
    background-image: url("../images/camera.svg");
    filter: invert(24%) sepia(98%) saturate(3496%) hue-rotate(112deg) brightness(105%) contrast(105%);
}

.file {
    height: 24px;
    width: 24px;
    background-size: cover;
    display: inline-block;
    background-image: url("../images/file-earmark-plus.svg");
    filter: invert(24%) sepia(98%) saturate(3496%) hue-rotate(112deg) brightness(105%) contrast(105%);
}

.attached-file {
    height: 100px;
    width: 98px;
    background-size: cover;
    display: block;
    margin-top: 10px;
    margin-bottom: 2px;
}

.unknown {
    background-image: url("../images/bsicons/file-earmark.svg");
}

.pdf {
    background-image: url("../images/bsicons/filetype-pdf.svg");
    filter: invert(11%) sepia(75%) saturate(6927%) hue-rotate(277deg) brightness(59%) contrast(112%);
}

.csv {
    background-image: url("../images/bsicons/filetype-csv.svg");
    filter: invert(30%) sepia(44%) saturate(4593%) hue-rotate(4deg) brightness(106%) contrast(103%);
}

.txt {
    background-image: url("../images/bsicons/filetype-txt.svg");
    filter: invert(30%) sepia(44%) saturate(4593%) hue-rotate(4deg) brightness(106%) contrast(103%);
}

.doc {
    background-image: url("../images/bsicons/filetype-doc.svg");
    filter: invert(18%) sepia(23%) saturate(7146%) hue-rotate(230deg) brightness(79%) contrast(147%);
}

.docx {
    background-image: url("../images/bsicons/filetype-docx.svg");
    filter: invert(18%) sepia(23%) saturate(7146%) hue-rotate(230deg) brightness(79%) contrast(147%);
}

.xls {
    background-image: url("../images/bsicons/filetype-xls.svg");
    filter: invert(19%) sepia(25%) saturate(7500%) hue-rotate(103deg) brightness(101%) contrast(102%);
}

.xlsx {
    background-image: url("../images/bsicons/filetype-xlsx.svg");
    filter: invert(19%) sepia(25%) saturate(7500%) hue-rotate(103deg) brightness(101%) contrast(102%);
}

.filediv {
    display: inline-block;
    width: 110px;   
}

.filename {
    font-size: x-small;
    overflow: hidden;
    white-space: wrap;
    line-height: 10px;
    display: block;
    width: 100px;
    height: 20px;
    text-align: center;
}

.arrow-up {
    height: 30px;
    width: 30px;
    background-size: cover;
    display: inline-block;
    background-image: url("../images/bsicons/arrow-up-square.svg");
    filter: invert(18%) sepia(19%) saturate(7468%) hue-rotate(225deg) brightness(101%) contrast(89%);
    margin-bottom: -5px;
}

.arrow-up:hover {
    background-image: url("../images/bsicons/arrow-up-square-fill.svg");
}

.arrow-down {
    height: 30px;
    width: 30px;
    background-size: cover;
    display: inline-block;
    background-image: url("../images/bsicons/arrow-down-square.svg");
    filter: invert(18%) sepia(19%) saturate(7468%) hue-rotate(225deg) brightness(101%) contrast(89%);
}

.arrow-down:hover {
    background-image: url("../images/bsicons/arrow-down-square-fill.svg");
}

.mini {
    height: 18px;
    width: 18px;
    background-size: cover;
    display: inline-block;
    vertical-align: top;
}

.miniplus {
    height: 22px;
    width: 22px;
    background-size: cover;
    display: inline-block;
    vertical-align: top;
}

.has-attachments {
    background-image: url("../images/bsicons/paperclip.svg");
}

.has-notes {
    background-image: url("../images/bsicons/file-earmark.svg");
}

i.red {
    filter: invert(21%) sepia(41%) saturate(6443%) hue-rotate(351deg) brightness(90%) contrast(129%);
}

i.green {
    filter: invert(31%) sepia(78%) saturate(3824%) hue-rotate(107deg) brightness(99%) contrast(101%);
}

i.white {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(5deg) brightness(102%) contrast(102%);
}

i.x {
    background-image: url("../images/bsicons/x.svg");
}

i.check2 {
    background-image: url("../images/bsicons/check2.svg");
}

i.edit2 {
    background-image: url("../images/bsicons/pencil-square.svg");
}