@font-face {
    font-family: 'smartie-iconset';
    src: url('../fonts/smartie-iconset.eot?cym3cb');
    src: url('../fonts/smartie-iconset.eot?cym3cb#iefix') format('embedded-opentype'),
        url('../fonts/smartie-iconset.ttf?cym3cb') format('truetype'),
        url('../fonts/smartie-iconset.woff?cym3cb') format('woff'),
        url('../fonts/smartie-iconset.svg?cym3cb#smartie-iconset') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;

}

i {
    font-family: 'smartie-iconset' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

}

.sm-chat .path1:before {
    content: "\e900";
    color: rgb(173, 173, 173);
}

.sm-chat .path2:before {
    content: "\e901";
    margin-left: -1em;
    color: rgb(211, 211, 211);
}

.sm-class .path1:before {
    content: "\e902";
    color: rgb(173, 173, 173);
}

.sm-class .path2:before {
    content: "\e903";
    margin-left: -1em;
    color: rgb(173, 173, 173);
}

.sm-class .path3:before {
    content: "\e904";
    margin-left: -1em;
    color: rgb(211, 211, 211);
}

.sm-class .path4:before {
    content: "\e905";
    margin-left: -1em;
    color: rgb(211, 211, 211);
}

.sm-class .path5:before {
    content: "\e906";
    margin-left: -1em;
    color: rgb(211, 211, 211);
}

.sm-dashboard .path1:before {
    content: "\e907";
    color: rgb(211, 211, 211);
}

.sm-dashboard .path2:before {
    content: "\e908";
    margin-left: -1em;
    color: rgb(173, 173, 173);
}

.sm-dashboard .path3:before {
    content: "\e909";
    margin-left: -1em;
    color: rgb(211, 211, 211);
}

.sm-dashboard .path4:before {
    content: "\e90a";
    margin-left: -1em;
    color: rgb(173, 173, 173);
}

.sm-delete .path1:before {
    content: "\e90b";
    color: rgb(211, 211, 211);
}

.sm-delete .path2:before {
    content: "\e90c";
    margin-left: -1em;
    color: rgb(173, 173, 173);
}

.sm-edit .path1:before {
    content: "\e90d";
    color: rgb(211, 211, 211);
}

.sm-edit .path2:before {
    content: "\e90e";
    margin-left: -1em;
    color: rgb(173, 173, 173);
}

.sm-envelope .path1:before {
    content: "\e90f";
    color: rgb(211, 211, 211);
}

.sm-envelope .path2:before {
    content: "\e910";
    margin-left: -1em;
    color: rgb(173, 173, 173);
}

.sm-eye:before {
    content: "\e911";
    color: #d3d3d3;
}

.sm-eye-dash:before {
    content: "\e912";
    color: #d3d3d3;
}

.sm-notification .path1:before {
    content: "\e913";
    color: rgb(173, 173, 173);
}

.sm-notification .path2:before {
    content: "\e914";
    margin-left: -1em;
    color: rgb(211, 211, 211);
}

.sm-parent-of-student .path1:before {
    content: "\e915";
    color: rgb(173, 173, 173);
}

.sm-parent-of-student .path2:before {
    content: "\e916";
    margin-left: -1em;
    color: rgb(173, 173, 173);
}

.sm-parent-of-student .path3:before {
    content: "\e917";
    margin-left: -1em;
    color: rgb(211, 211, 211);
}

.sm-parent-of-student .path4:before {
    content: "\e918";
    margin-left: -1em;
    color: rgb(211, 211, 211);
}

.sm-parent-of-student .path5:before {
    content: "\e919";
    margin-left: -1em;
    color: rgb(173, 173, 173);
}

.sm-plus:before {
    content: "\e91a";
    color: #adadad;
}

.sm-questions .path1:before {
    content: "\e91b";
    color: rgb(211, 211, 211);
    opacity: 0.9;
}

.sm-questions .path2:before {
    content: "\e91c";
    margin-left: -1em;
    color: rgb(211, 211, 211);
}

.sm-questions .path3:before {
    content: "\e91d";
    margin-left: -1em;
    color: rgb(211, 211, 211);
}

.sm-questions .path4:before {
    content: "\e91e";
    margin-left: -1em;
    color: rgb(211, 211, 211);
    opacity: 0.9;
}

.sm-search .path1:before {
    content: "\e91f";
    color: rgb(173, 173, 173);
}

.sm-search .path2:before {
    content: "\e920";
    margin-left: -1em;
    color: rgb(211, 211, 211);
}

.sm-student .path1:before {
    content: "\e921";
    color: rgb(173, 173, 173);
}

.sm-student .path2:before {
    content: "\e922";
    margin-left: -1em;
    color: rgb(173, 173, 173);
}

.sm-student .path3:before {
    content: "\e923";
    margin-left: -1em;
    color: rgb(173, 173, 173);
}

.sm-student .path4:before {
    content: "\e924";
    margin-left: -1em;
    color: rgb(211, 211, 211);
}

.sm-student .path5:before {
    content: "\e925";
    margin-left: -1em;
    color: rgb(211, 211, 211);
}

.sm-student .path6:before {
    content: "\e926";
    margin-left: -1em;
    color: rgb(173, 173, 173);
}

.sm-teacher .path1:before {
    content: "\e927";
    color: rgb(211, 211, 211);
}

.sm-teacher .path2:before {
    content: "\e928";
    margin-left: -1em;
    color: rgb(211, 211, 211);
}

.sm-teacher .path3:before {
    content: "\e929";
    margin-left: -1em;
    color: rgb(173, 173, 173);
}

.sm-teacher .path4:before {
    content: "\e92a";
    margin-left: -1em;
    color: rgb(173, 173, 173);
}

.sm-teacher .path5:before {
    content: "\e92b";
    margin-left: -1em;
    color: rgb(173, 173, 173);
}

.sm-upload-image:before {
    content: "\e92c";
    color: #d3d3d3;
}

.sm-wave .path1:before {
    content: "\e92d";
    color: rgb(239, 145, 65);
}

.sm-wave .path2:before {
    content: "\e92e";
    margin-left: -1em;
    color: rgb(214, 122, 46);
}

.sm-wave .path3:before {
    content: "\e92f";
    margin-left: -1em;
    color: rgb(214, 122, 46);
}

.sm-wave .path4:before {
    content: "\e930";
    margin-left: -1em;
    color: rgb(214, 122, 46);
}

.sm-wave .path5:before {
    content: "\e931";
    margin-left: -1em;
    color: rgb(214, 122, 46);
}

.sm-wave .path6:before {
    content: "\e932";
    margin-left: -1em;
    color: rgb(214, 122, 46);
}

.sm-wave .path7:before {
    content: "\e933";
    margin-left: -1em;
    color: rgb(43, 79, 101);
}

.sm-wave .path8:before {
    content: "\e934";
    margin-left: -1em;
    color: rgb(43, 79, 101);
}

.sm-wave .path9:before {
    content: "\e935";
    margin-left: -1em;
    color: rgb(43, 79, 101);
}

.sm-wave .path10:before {
    content: "\e936";
    margin-left: -1em;
    color: rgb(43, 79, 101);
}

.sm-wave .path11:before {
    content: "\e937";
    margin-left: -1em;
    color: rgb(214, 122, 46);
}

.sm-arrow:before {
    content: "\e938";
    color: #d3d3d3;
}

.sm-arrow-right:before {
    content: "\e939";
    color: #d3d3d3;
}



/********************** FONT SIZE **********************/

.sm-teacher {
    font-size: 18px;
}

.sm-student {
    font-size: 19px;
}

.sm-class {
    font-size: 17px;
}

/********************** TRANSITIONS **********************/

.sm-class span:before {
    transition: color .2s;
}

.sm-teacher span:before {
    transition: color .2s;
}

.sm-student span:before {
    transition: color .2s;
}

.sm-dashboard span:before {
    transition: color .2s;
}

.sm-arrow:before {
    transition: color .2s;
}

/********************** ACTIVE COLORS **********************/

/* DASHBOARD ICON */

.page-title.active .sm-dashboard .path1:before,
.nav-item.active .sm-dashboard .path1:before,
.nav-menu .menu-list li a:hover .sm-dashboard .path1:before {
    color: var(--clr-tertiary);
}

.page-title.active .sm-dashboard .path2:before,
.nav-item.active .sm-dashboard .path2:before,
.nav-menu .menu-list li a:hover .sm-dashboard .path2:before {
    color: var(--clr-secondary);
}

.page-title.active .sm-dashboard .path3:before,
.nav-item.active .sm-dashboard .path3:before,
.nav-menu .menu-list li a:hover .sm-dashboard .path3:before {
    color: var(--clr-tertiary);
}

.page-title.active .sm-dashboard .path4:before,
.nav-item.active .sm-dashboard .path4:before,
.nav-menu .menu-list li a:hover .sm-dashboard .path4:before {
    color: var(--clr-secondary);
}

/* TEACHER ICON */

.sm-teacher.active .path1:before,
.change-menu-item.active .sm-teacher .path1:before,
.page-title.active .sm-teacher .path1:before,
.nav-item.active .sm-teacher .path1:before,
.nav-menu .menu-list li a:hover .sm-teacher .path1:before {
    color: var(--clr-tertiary);
}

.sm-teacher.active .path2:before,
.change-menu-item.active .sm-teacher .path2:before,
.page-title.active .path2:before,
.nav-item.active .sm-teacher .path2:before,
.nav-menu .menu-list li a:hover .sm-teacher .path2:before {
    color: var(--clr-tertiary);
}

.sm-teacher.active .path3:before,
.change-menu-item.active .sm-teacher .path3:before,
.page-title.active .sm-teacher .path3:before,
.nav-item.active .sm-teacher .path3:before,
.nav-menu .menu-list li a:hover .sm-teacher .path3:before {
    color: var(--clr-secondary);
}

.sm-teacher.active .path4:before,
.change-menu-item.active .sm-teacher .path4:before,
.page-title.active .sm-teacher .path4:before,
.nav-item.active .sm-teacher .path4:before,
.nav-menu .menu-list li a:hover .sm-teacher .path4:before {
    color: var(--clr-secondary);
}

.sm-teacher.active .path5:before,
.change-menu-item.active .sm-teacher .path5:before,
.page-title.active .sm-teacher .path5:before,
.nav-item.active .sm-teacher .path5:before,
.nav-menu .menu-list li a:hover .sm-teacher .path5:before {
    color: var(--clr-secondary);
}

/* CLASS ICON */

.change-menu-item.active .path1:before,
.sm-class:hover .path1:before,
.sm-class.active .path1:before,
.page-title.active .sm-class .path1:before,
.nav-item.active .sm-class .path1:before,
.nav-menu .menu-list li a:hover .sm-class .path1:before {
    color: var(--clr-secondary);
}

.change-menu-item.active .path2:before,
.sm-class:hover .path2:before,
.sm-class.active .path2:before,
.page-title.active .sm-class .path2:before,
.nav-item.active .sm-class .path2:before,
.nav-menu .menu-list li a:hover .sm-class .path2:before {
    color: var(--clr-secondary);
}

.change-menu-item.active .path3:before,
.sm-class:hover .path3:before,
.sm-class.active .path3:before,
.page-title.active .sm-class .path3:before,
.nav-item.active .sm-class .path3:before,
.nav-menu .menu-list li a:hover .sm-class .path3:before {
    color: var(--clr-tertiary);
}

.change-menu-item.active .path4:before,
.sm-class:hover .path4:before,
.sm-class.active .path4:before,
.page-title.active .sm-class .path4:before,
.nav-item.active .sm-class .path4:before,
.nav-menu .menu-list li a:hover .sm-class .path4:before {
    color: var(--clr-tertiary);
}

.change-menu-item.active .path5:before,
.sm-class:hover .path5:before,
.sm-class.active .path5:before,
.page-title.active .sm-class .path5:before,
.nav-item.active .sm-class .path5:before,
.nav-menu .menu-list li a:hover .sm-class .path5:before {
    color: var(--clr-tertiary);
}

/* STUDENT ICON */

.sm-student.active .path1::before,
.change-menu-item.active .path1:before,
.sm-student:hover .path1:before,
.page-title.active .sm-student .path1:before,
.nav-item.active .sm-student .path1:before,
.nav-menu .menu-list li a:hover .sm-student .path1:before {
    color: var(--clr-secondary);
}

.sm-student.active .path2::before,
.change-menu-item.active .path2:before,
.sm-student:hover .path2:before,
.page-title.active .sm-student .path2:before,
.nav-item.active .sm-student .path2:before,
.nav-menu .menu-list li a:hover .sm-student .path2:before {
    color: var(--clr-secondary);
}

.sm-student.active .path3::before,
.change-menu-item.active .path3:before,
.sm-student:hover .path3:before,
.page-title.active .sm-student .path3:before,
.nav-item.active .sm-student .path3:before,
.nav-menu .menu-list li a:hover .sm-student .path3:before {
    color: var(--clr-secondary);
}

.sm-student.active .path4::before,
.change-menu-item.active .path4:before,
.sm-student:hover .path4:before,
.page-title.active .sm-student .path4:before,
.nav-item.active .sm-student .path4:before,
.nav-menu .menu-list li a:hover .sm-student .path4:before {
    color: var(--clr-tertiary)
}

.sm-student.active .path5::before,
.change-menu-item.active .path5:before,
.sm-student:hover .path5:before,
.page-title.active .sm-student .path5:before,
.nav-item.active .sm-student .path5:before,
.nav-menu .menu-list li a:hover .sm-student .path5:before {
    color: var(--clr-tertiary)
}

.sm-student.active .path6::before,
.change-menu-item.active .path6:before,
.sm-student:hover .path6:before,
.page-title.active .sm-student .path6:before,
.nav-item.active .sm-student .path6:before,
.nav-menu .menu-list li a:hover .sm-student .path6:before {
    color: var(--clr-secondary);
}