.ICON {
    height: 100%;
    width: 100%;
    background-color: var(--FC);
}

.LOG-OUT-ICON {
    height: 100%;
    width: 100%;
    background-color: #c04747;
}

.INFO-ICON {
    height: 100%;
    width: 100%;
    background-color: #507cff;
}

.TOOLBAR-ICON {
    height: 100%;
    width: 100%;
    background-color: var(--MB);
}

.GRID-ICON {
    height: 100%;
    width: 100%;
    background-color: var(--TB);
}

.ICON-25px {
    height: 25px;
    width: 25px;
    background-color: var(--FC);
    margin-left: 1px;
}

.ICON-30px {
    height: 30px;
    width: 30px;
    background-color: var(--FC);
    margin-left: 1px;
}

.ICON-40px {
    height: 40px;
    width: 40px;
    background-color: var(--FC);
    margin-left: 1px;
}

.ICON-80 {
    height: 80%;
    width: 80%;
    background-color: var(--FC);
    margin-left: 1px;
}

.ICON-FAV {
    height: 13px;
    width: 16px;
    background-color: var(--FC);
}

.ICON-PATH {
    height: 15px;
    width: 20px;
    background-color: var(--FC);
    flex-shrink: 0;
}

.ICON-INPUT {
    background-color: var(--FC-PH);
}

.ICON-LOGO {
    height: 100%;
    width: 60%;
    background-color: var(--FC);
}

.ICON-MB {
    background-color: var(--FC);
}

.ICON-NC {
    height: 30px;
    width: 30px;
}

.ICON-SETT {
    height: 30px;
    width: 50px;
    background-color: var(--FC);
    transition: transform 0.2s ease-in-out;
}

.ICON-SETTINGS {
    height: 80%;
    width: 80%;
    background-color: var(--SE-B);
}

.ICON-TD {
    height: 20px;
    width: 20px;
    background-color: var(--FC);
}

.ICON-TH {
    height: 50%;
    width: 100%;
    background-color: var(--FC);
}

[class^="SVG-"],
[class*=" SVG-"] {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.SVG-ARROW-DOWN {
    -webkit-mask-image: url('/img/Arrow-down.svg');
    mask-image: url('/img/Arrow-down.svg');
}

.SVG-ARROW-LEFT {
    -webkit-mask-image: url('/img/Arrow-left.svg');
    mask-image: url('/img/Arrow-left.svg');
}

.SVG-ARROW-RIGHT {
    -webkit-mask-image: url('/img/Arrow-right.svg');
    mask-image: url('/img/Arrow-right.svg');
}

.SVG-BACK {
    -webkit-mask-image: url('/img/Back.svg');
    mask-image: url('/img/Back.svg');
}

.SVG-BRANCH {
    -webkit-mask-image: url('/img/branch.svg');
    mask-image: url('/img/branch.svg');
}

.SVG-BURGERMENU {
    -webkit-mask-image: url('/img/burger-menu.svg');
    mask-image: url('/img/burger-menu.svg');
}

.SVG-BOX {
    -webkit-mask-image: url('/img/Box.svg');
    mask-image: url('/img/Box.svg');
}

.SVG-CALENDARPLUS {
    -webkit-mask-image: url('/img/calendarplus.svg');
    mask-image: url('/img/calendarplus.svg');
}

.SVG-CHECK {
    -webkit-mask-image: url('/img/Check.svg');
    mask-image: url('/img/Check.svg');
}

.SVG-CIRCLE {
    -webkit-mask-image: url('/img/Circle.svg');
    mask-image: url('/img/Circle.svg');
}

.SVG-CLOSELOCK {
    -webkit-mask-image: url('/img/CloseLock.svg');
    mask-image: url('/img/CloseLock.svg');
}

.SVG-CLOCK {
    -webkit-mask-image: url('/img/Clock.svg');
    mask-image: url('/img/Clock.svg');
}

.SVG-COUPLE {
    -webkit-mask-image: url('/img/Couple.svg');
    mask-image: url('/img/Couple.svg');
}

.SVG-COPY {
    -webkit-mask-image: url('/img/copy.svg');
    mask-image: url('/img/copy.svg');
}

.SVG-CURSOR {
    -webkit-mask-image: url('/img/Cursor.svg');
    mask-image: url('/img/Cursor.svg');
}

.SVG-DASHBOARD {
    -webkit-mask-image: url('/img/dashboard.svg');
    mask-image: url('/img/dashboard.svg');
}

.SVG-DOOR {
    -webkit-mask-image: url('/img/door.svg');
    mask-image: url('/img/door.svg');
}

.SVG-DOWNLOAD {
    -webkit-mask-image: url('/img/Download.svg');
    mask-image: url('/img/Download.svg');
}

.SVG-DROP {
    -webkit-mask-image: url('/img/Drop.svg');
    mask-image: url('/img/Drop.svg');
}

.SVG-FLAG {
    -webkit-mask-image: url('/img/flag.svg');
    mask-image: url('/img/flag.svg');
}

.SVG-FILTER {
    -webkit-mask-image: url('/img/Filter.svg');
    mask-image: url('/img/Filter.svg');
}

.SVG-FILE {
    -webkit-mask-image: url('/img/File.svg');
    mask-image: url('/img/File.svg');
}

.SVG-FILEUPLOAD {
    -webkit-mask-image: url('/img/file_upload.svg');
    mask-image: url('/img/file_upload.svg');
}

.SVG-FILELOCK {
    -webkit-mask-image: url('/img/lockfile.svg');
    mask-image: url('/img/lockfile.svg');
}

.SVG-FOLDERUPLOAD {
    -webkit-mask-image: url('/img/OpenFolderUpload.svg');
    mask-image: url('/img/OpenFolderUpload.svg');
}

.SVG-FORWARD {
    -webkit-mask-image: url('/img/Forward.svg');
    mask-image: url('/img/Forward.svg');
}

.SVG-FALLBACK {
    -webkit-mask-image: url('/img/fallback.svg');
    mask-image: url('/img/fallback.svg');
}

.SVG-GRID {
    -webkit-mask-image: url('/img/Grid.svg');
    mask-image: url('/img/Grid.svg');
}

.SVG-GROUP {
    -webkit-mask-image: url('/img/group.svg');
    mask-image: url('/img/group.svg');
}

.SVG-HELP {
    -webkit-mask-image: url('/img/Support.svg');
    mask-image: url('/img/Support.svg');
}

.SVG-HOME {
    -webkit-mask-image: url('/img/Home.svg');
    mask-image: url('/img/Home.svg');
}

.SVG-INFO {
    -webkit-mask-image: url('/img/Info.svg');
    mask-image: url('/img/Info.svg');
}

.SVG-CIRCLEINFO {
    -webkit-mask-image: url('/img/info.svg');
    mask-image: url('/img/info.svg');
}

.SVG-KEY {
    -webkit-mask-image: url('/img/key_2.svg');
    mask-image: url('/img/key_2.svg');
}

.SVG-LINK {
    -webkit-mask-image: url('/img/link.svg');
    mask-image: url('/img/link.svg');
}

.SVG-LIST {
    -webkit-mask-image: url('/img/List.svg');
    mask-image: url('/img/List.svg');
}

.SVG-LOGIN {
    -webkit-mask-image: url('/img/LogIn.svg');
    mask-image: url('/img/LogIn.svg');
}

.SVG-LOGO2 {
    -webkit-mask-image: url('/img/ProdLogo.svg');
    mask-image: url('/img/ProdLogo.svg');
}

.SVG-LOGOSINGLE {
    -webkit-mask-image: url('/img/ProdLogo.svg');
    mask-image: url('/img/ProdLogo.svg');
}

.SVG-LOGOUT {
    -webkit-mask-image: url('/img/LogOut.svg');
    mask-image: url('/img/LogOut.svg');
}

.SVG-MAIL {
    -webkit-mask-image: url('/img/Mail.svg');
    mask-image: url('/img/Mail.svg');
}

.SVG-MICRO {
    -webkit-mask-image: url('/img/Micro.svg');
    mask-image: url('/img/Micro.svg');
}

.SVG-MINUS {
    -webkit-mask-image: url('/img/Minus.svg');
    mask-image: url('/img/Minus.svg');
}

.SVG-OPENFOLDER {
    -webkit-mask-image: url('/img/openfolder.svg');
    mask-image: url('/img/openfolder.svg');
}

.SVG-CLOSEDFOLDER {
    -webkit-mask-image: url('/img/closedfolder.svg');
    mask-image: url('/img/closedfolder.svg');
}

.SVG-OPENLOCK {
    -webkit-mask-image: url('/img/OpenLock.svg');
    mask-image: url('/img/OpenLock.svg');
}

.SVG-PARAGRAPH {
    -webkit-mask-image: url('/img/paragraph.svg');
    mask-image: url('/img/paragraph.svg');
}

.SVG-PASSWORD {
    -webkit-mask-image: url('/img/Password.svg');
    mask-image: url('/img/Password.svg');
}

.SVG-PEN {
    -webkit-mask-image: url('/img/Pen.svg');
    mask-image: url('/img/Pen.svg');
}

.SVG-PHONE {
    -webkit-mask-image: url('/img/Phone.svg');
    mask-image: url('/img/Phone.svg');
}

.SVG-POLICY {
    -webkit-mask-image: url('/img/Policy.svg');
    mask-image: url('/img/Policy.svg');
}

.SVG-PLUS {
    -webkit-mask-image: url('/img/Plus.svg');
    mask-image: url('/img/Plus.svg');
}

.SVG-QRCODE {
    -webkit-mask-image: url('/img/Qrcode.svg');
    mask-image: url('/img/Qrcode.svg');
}

.SVG-QUESTSTION {
    -webkit-mask-image: url('/img/Question.svg');
    mask-image: url('/img/Question.svg');
}

.SVG-ROLL {
    -webkit-mask-image: url('/img/Roll.svg');
    mask-image: url('/img/Roll.svg');
}

.SVG-RESET {
    -webkit-mask-image: url('/img/reset.svg');
    mask-image: url('/img/reset.svg');
}

.SVG-ROTATE {
    -webkit-mask-image: url('/img/Rotate.svg');
    mask-image: url('/img/Rotate.svg');
}

.SVG-SAVE {
    -webkit-mask-image: url('/img/Save.svg');
    mask-image: url('/img/Save.svg');
}

.SVG-SEARCH {
    -webkit-mask-image: url('/img/Search.svg');
    mask-image: url('/img/Search.svg');
}

.SVG-SETTINGS {
    -webkit-mask-image: url('/img/Settings.svg');
    mask-image: url('/img/Settings.svg');
}

.SVG-SHIELD {
    -webkit-mask-image: url('/img/Shield.svg');
    mask-image: url('/img/Shield.svg');
}

.SVG-SIGNAL {
    -webkit-mask-image: url('/img/Signal.svg');
    mask-image: url('/img/Signal.svg');
}

.SVG-SINGLECHECK {
    -webkit-mask-image: url('/img/Single-check.svg');
    mask-image: url('/img/Single-check.svg');
}

.SVG-SINGLECROSS {
    -webkit-mask-image: url('/img/Single-cross.svg');
    mask-image: url('/img/Single-cross.svg');
}

.SVG-STAR {
    -webkit-mask-image: url('/img/Star.svg');
    mask-image: url('/img/Star.svg');
}

.SVG-TOOLBARSWITCH {
    -webkit-mask-image: url('/img/toolbarswitch.svg');
    mask-image: url('/img/toolbarswitch.svg');
}

.SVG-GRIDSWITCH {
    -webkit-mask-image: url('/img/gridswitch.svg');
    mask-image: url('/img/gridswitch.svg');
}

.SVG-TOTOP {
    -webkit-mask-image: url('/img/TT.svg');
    mask-image: url('/img/TT.svg');
}

.SVG-TOBOTTOM {
    -webkit-mask-image: url('/img/TB.svg');
    mask-image: url('/img/TB.svg');
}

.SVG-TREE {
    -webkit-mask-image: url('/img/Tree.svg');
    mask-image: url('/img/Tree.svg');
}

.SVG-TRASH {
    -webkit-mask-image: url('/img/Trash.svg');
    mask-image: url('/img/Trash.svg');
}

.SVG-UPLOAD {
    -webkit-mask-image: url('/img/Upload.svg');
    mask-image: url('/img/Upload.svg');
}

.SVG-USER {
    -webkit-mask-image: url('/img/User.svg');
    mask-image: url('/img/User.svg');
}

.SVG-USERPLUS {
    -webkit-mask-image: url('/img/UserPlus.svg');
    mask-image: url('/img/UserPlus.svg');
}

.SVG-WARNING {
    -webkit-mask-image: url('/img/Warning.svg');
    mask-image: url('/img/Warning.svg');
}