/** Icons */

.svg-icon {
    display: inline-block;
    position: relative;
    cursor: pointer;
    width: 16px;
    height: 16px;
    transition: .2s;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.svg-icon > i {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: inherit;
    animation-duration: inherit;
    animation-iteration-count: inherit;
}

/** Buttons */

.svg-btn {
    display: inline-block;
    position: relative;
    border: 1px solid #CFCFCF;
    border-radius: 20%;
    background-color: #F2F2F2;
    cursor: pointer;
    width: 14px;
    height: 14px;
    transition: .2s;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.svg-btn > i {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 80%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: inherit;
    animation-duration: inherit;
    animation-iteration-count: inherit;
}

/** Sizes */

.svg-xs {
    width: 8px;
    height: 8px;
}

.svg-sm {
    width: 16px;
    height: 16px;
}

.svg-md {
    width: 24px;
    height: 24px;
}

.svg-lg {
    width: 32px;
    height: 32px;
}

.svg-xl {
    width: 48px;
    height: 48px;
}

/** Message icons */

.svg-icon_msg-empty {
    background-image: url("data:image/svg+xml;utf8,<svg fill=\"rgb(180,180,180)\" class=\"icon\" height=\"24px\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" role=\"img\"><path d=\"M 20,2 4,2 C 2.9,2 2.01,2.9 2.01,4 L 2,22 6,18 20,18 c 1.1,0 2,-0.9 2,-2 L 22,4 C 22,2.9 21.1,2 20,2 Z\"/></svg>");
}

.svg-icon_msg-empty:hover {
    background-image: url("data:image/svg+xml;utf8,<svg fill=\"rgb(120,120,120)\" class=\"icon\" height=\"24px\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" role=\"img\"><path d=\"M 20,2 4,2 C 2.9,2 2.01,2.9 2.01,4 L 2,22 6,18 20,18 c 1.1,0 2,-0.9 2,-2 L 22,4 C 22,2.9 21.1,2 20,2 Z\"/></svg>");
}

.svg-btn:hover .svg-icon_msg-empty {
    background-image: url("data:image/svg+xml;utf8,<svg fill=\"rgb(120,120,120)\" class=\"icon\" height=\"24px\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" role=\"img\"><path d=\"M 20,2 4,2 C 2.9,2 2.01,2.9 2.01,4 L 2,22 6,18 20,18 c 1.1,0 2,-0.9 2,-2 L 22,4 C 22,2.9 21.1,2 20,2 Z\"/></svg>");
}

.svg-icon_msg-no-new {
    background-image: url("data:image/svg+xml;utf8,<svg fill=\"rgb(165,212,255)\" class=\"icon\" height=\"24px\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" role=\"img\"><path d=\"M 20,2 4,2 C 2.9,2 2.01,2.9 2.01,4 L 2,22 6,18 20,18 c 1.1,0 2,-0.9 2,-2 L 22,4 C 22,2.9 21.1,2 20,2 Z\"/></svg>");
}

.svg-icon_msg-no-new:hover {
    background-image: url("data:image/svg+xml;utf8,<svg fill=\"rgb(54,159,255)\" class=\"icon\" height=\"24px\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" role=\"img\"><path d=\"M 20,2 4,2 C 2.9,2 2.01,2.9 2.01,4 L 2,22 6,18 20,18 c 1.1,0 2,-0.9 2,-2 L 22,4 C 22,2.9 21.1,2 20,2 Z\"/></svg>");
}

.svg-btn:hover .svg-icon_msg-no-new {
    background-image: url("data:image/svg+xml;utf8,<svg fill=\"rgb(54,159,255)\" class=\"icon\" height=\"24px\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" role=\"img\"><path d=\"M 20,2 4,2 C 2.9,2 2.01,2.9 2.01,4 L 2,22 6,18 20,18 c 1.1,0 2,-0.9 2,-2 L 22,4 C 22,2.9 21.1,2 20,2 Z\"/></svg>");
}

.svg-icon_msg-has-new {
    background-image: url("data:image/svg+xml;utf8,<svg fill=\"rgb(255,138,0)\" class=\"icon\" height=\"24px\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" role=\"img\"><path d=\"M 20,2 4,2 C 2.9,2 2.01,2.9 2.01,4 L 2,22 6,18 20,18 c 1.1,0 2,-0.9 2,-2 L 22,4 C 22,2.9 21.1,2 20,2 Z\"/></svg>");
}

.svg-icon_msg-has-new:hover {
    background-image: url("data:image/svg+xml;utf8,<svg fill=\"rgb(255,100,0)\" class=\"icon\" height=\"24px\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" role=\"img\"><path d=\"M 20,2 4,2 C 2.9,2 2.01,2.9 2.01,4 L 2,22 6,18 20,18 c 1.1,0 2,-0.9 2,-2 L 22,4 C 22,2.9 21.1,2 20,2 Z\"/></svg>");
}

.svg-btn:hover .svg-icon_msg-has-new {
    background-image: url("data:image/svg+xml;utf8,<svg fill=\"rgb(255,100,0)\" class=\"icon\" height=\"24px\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" role=\"img\"><path d=\"M 20,2 4,2 C 2.9,2 2.01,2.9 2.01,4 L 2,22 6,18 20,18 c 1.1,0 2,-0.9 2,-2 L 22,4 C 22,2.9 21.1,2 20,2 Z\"/></svg>");
}

.svg-icon_msg-not-readed {
    background-image: url("data:image/svg+xml;utf8,<svg fill=\"rgb(166, 185, 52)\" class=\"icon\" height=\"24px\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" role=\"img\"><path d=\"M 20,2 4,2 C 2.9,2 2.01,2.9 2.01,4 L 2,22 6,18 20,18 c 1.1,0 2,-0.9 2,-2 L 22,4 C 22,2.9 21.1,2 20,2 Z\"/></svg>");
}

.svg-icon_msg-not-readed:hover {
    background-image: url("data:image/svg+xml;utf8,<svg fill=\"rgb(139, 160, 22)\" class=\"icon\" height=\"24px\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" role=\"img\"><path d=\"M 20,2 4,2 C 2.9,2 2.01,2.9 2.01,4 L 2,22 6,18 20,18 c 1.1,0 2,-0.9 2,-2 L 22,4 C 22,2.9 21.1,2 20,2 Z\"/></svg>");
}

.svg-btn:hover .svg-icon_msg-not-readed {
    background-image: url("data:image/svg+xml;utf8,<svg fill=\"rgb(139, 160, 22)\" class=\"icon\" height=\"24px\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" role=\"img\"><path d=\"M 20,2 4,2 C 2.9,2 2.01,2.9 2.01,4 L 2,22 6,18 20,18 c 1.1,0 2,-0.9 2,-2 L 22,4 C 22,2.9 21.1,2 20,2 Z\"/></svg>");
}

.svg-icon_msg-menu {
    background-image: url("data:image/svg+xml;utf8,<svg fill=\"rgb(100, 140, 174)\" class=\"icon\" height=\"24px\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" role=\"img\"><path d=\"M 20,2 4,2 C 2.9,2 2.01,2.9 2.01,4 L 2,22 6,18 20,18 c 1.1,0 2,-0.9 2,-2 L 22,4 C 22,2.9 21.1,2 20,2 Z\"/></svg>");
}

.svg-icon_msg-menu:hover {
    background-image: url("data:image/svg+xml;utf8,<svg fill=\"rgb(60, 144, 215)\" class=\"icon\" height=\"24px\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" role=\"img\"><path d=\"M 20,2 4,2 C 2.9,2 2.01,2.9 2.01,4 L 2,22 6,18 20,18 c 1.1,0 2,-0.9 2,-2 L 22,4 C 22,2.9 21.1,2 20,2 Z\"/></svg>");
}

/** Delete icons */

.svg-icon_delete {
    background-image: url("data:image/svg+xml;utf8,<svg fill=\"rgb(219,121,99)\" class=\"icon\" height=\"249.499px\" viewBox=\"0 0 249.499 249.499\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" role=\"img\"><path d=\"M7.079,214.851l25.905,26.276c9.536,9.674,25.106,9.782,34.777,0.252l56.559-55.761l55.739,56.548 c9.542,9.674,25.112,9.782,34.78,0.246l26.265-25.887c9.674-9.536,9.788-25.106,0.246-34.786l-55.742-56.547l56.565-55.754 c9.667-9.536,9.787-25.106,0.239-34.786L216.52,8.375c-9.541-9.667-25.111-9.782-34.779-0.252l-56.568,55.761L69.433,7.331 C59.891-2.337,44.32-2.451,34.65,7.079L8.388,32.971c-9.674,9.542-9.791,25.106-0.252,34.786l55.745,56.553l-56.55,55.767 C-2.343,189.607-2.46,205.183,7.079,214.851z\"/></svg>");
}

.svg-icon_delete:hover {
    background-image: url("data:image/svg+xml;utf8,<svg fill=\"rgb(201,64,32)\" class=\"icon\" height=\"249.499px\" viewBox=\"0 0 249.499 249.499\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" role=\"img\"><path d=\"M7.079,214.851l25.905,26.276c9.536,9.674,25.106,9.782,34.777,0.252l56.559-55.761l55.739,56.548 c9.542,9.674,25.112,9.782,34.78,0.246l26.265-25.887c9.674-9.536,9.788-25.106,0.246-34.786l-55.742-56.547l56.565-55.754 c9.667-9.536,9.787-25.106,0.239-34.786L216.52,8.375c-9.541-9.667-25.111-9.782-34.779-0.252l-56.568,55.761L69.433,7.331 C59.891-2.337,44.32-2.451,34.65,7.079L8.388,32.971c-9.674,9.542-9.791,25.106-0.252,34.786l55.745,56.553l-56.55,55.767 C-2.343,189.607-2.46,205.183,7.079,214.851z\"/></svg>");
}

.svg-btn:hover .svg-icon_delete {
    background-image: url("data:image/svg+xml;utf8,<svg fill=\"rgb(201,64,32)\" class=\"icon\" height=\"249.499px\" viewBox=\"0 0 249.499 249.499\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" role=\"img\"><path d=\"M7.079,214.851l25.905,26.276c9.536,9.674,25.106,9.782,34.777,0.252l56.559-55.761l55.739,56.548 c9.542,9.674,25.112,9.782,34.78,0.246l26.265-25.887c9.674-9.536,9.788-25.106,0.246-34.786l-55.742-56.547l56.565-55.754 c9.667-9.536,9.787-25.106,0.239-34.786L216.52,8.375c-9.541-9.667-25.111-9.782-34.779-0.252l-56.568,55.761L69.433,7.331 C59.891-2.337,44.32-2.451,34.65,7.079L8.388,32.971c-9.674,9.542-9.791,25.106-0.252,34.786l55.745,56.553l-56.55,55.767 C-2.343,189.607-2.46,205.183,7.079,214.851z\"/></svg>");
}

/** Home icons */

.svg-icon_home {
    background-image: url("data:image/svg+xml;utf8,<svg class=\"icon\" height=\"495.398px\" viewBox=\"0 0 495.398 495.398\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" role=\"img\"><path fill=\"rgb(163,139,82)\" d=\"M487.083,225.514l-75.08-75.08V63.704c0-15.682-12.708-28.391-28.413-28.391c-15.669,0-28.377,12.709-28.377,28.391 v29.941L299.31,37.74c-27.639-27.624-75.694-27.575-103.27,0.05L8.312,225.514c-11.082,11.104-11.082,29.071,0,40.158 c11.087,11.101,29.089,11.101,40.172,0l187.71-187.729c6.115-6.083,16.893-6.083,22.976-0.018l187.742,187.747 c5.567,5.551,12.825,8.312,20.081,8.312c7.271,0,14.541-2.764,20.091-8.312C498.17,254.586,498.17,236.619,487.083,225.514z\"/><path fill=\"rgb(214,199,159)\" d=\"M257.561,131.836c-5.454-5.451-14.285-5.451-19.723,0L72.712,296.913c-2.607,2.606-4.085,6.164-4.085,9.877v120.401 c0,28.253,22.908,51.16,51.16,51.16h81.754v-126.61h92.299v126.61h81.755c28.251,0,51.159-22.907,51.159-51.159V306.79 c0-3.713-1.465-7.271-4.085-9.877L257.561,131.836z\"/></svg>");
}

.svg-icon_home:hover {
    background-image: url("data:image/svg+xml;utf8,<svg fill=\"rgb(163,139,82)\" class=\"icon\" height=\"495.398px\" viewBox=\"0 0 495.398 495.398\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" role=\"img\"><path d=\"M487.083,225.514l-75.08-75.08V63.704c0-15.682-12.708-28.391-28.413-28.391c-15.669,0-28.377,12.709-28.377,28.391 v29.941L299.31,37.74c-27.639-27.624-75.694-27.575-103.27,0.05L8.312,225.514c-11.082,11.104-11.082,29.071,0,40.158 c11.087,11.101,29.089,11.101,40.172,0l187.71-187.729c6.115-6.083,16.893-6.083,22.976-0.018l187.742,187.747 c5.567,5.551,12.825,8.312,20.081,8.312c7.271,0,14.541-2.764,20.091-8.312C498.17,254.586,498.17,236.619,487.083,225.514z\"/><path d=\"M257.561,131.836c-5.454-5.451-14.285-5.451-19.723,0L72.712,296.913c-2.607,2.606-4.085,6.164-4.085,9.877v120.401 c0,28.253,22.908,51.16,51.16,51.16h81.754v-126.61h92.299v126.61h81.755c28.251,0,51.159-22.907,51.159-51.159V306.79 c0-3.713-1.465-7.271-4.085-9.877L257.561,131.836z\"/></svg>");
}

.svg-btn:hover .svg-icon_home {
    background-image: url("data:image/svg+xml;utf8,<svg fill=\"rgb(163,139,82)\" class=\"icon\" height=\"495.398px\" viewBox=\"0 0 495.398 495.398\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" role=\"img\"><path d=\"M487.083,225.514l-75.08-75.08V63.704c0-15.682-12.708-28.391-28.413-28.391c-15.669,0-28.377,12.709-28.377,28.391 v29.941L299.31,37.74c-27.639-27.624-75.694-27.575-103.27,0.05L8.312,225.514c-11.082,11.104-11.082,29.071,0,40.158 c11.087,11.101,29.089,11.101,40.172,0l187.71-187.729c6.115-6.083,16.893-6.083,22.976-0.018l187.742,187.747 c5.567,5.551,12.825,8.312,20.081,8.312c7.271,0,14.541-2.764,20.091-8.312C498.17,254.586,498.17,236.619,487.083,225.514z\"/><path d=\"M257.561,131.836c-5.454-5.451-14.285-5.451-19.723,0L72.712,296.913c-2.607,2.606-4.085,6.164-4.085,9.877v120.401 c0,28.253,22.908,51.16,51.16,51.16h81.754v-126.61h92.299v126.61h81.755c28.251,0,51.159-22.907,51.159-51.159V306.79 c0-3.713-1.465-7.271-4.085-9.877L257.561,131.836z\"/></svg>");
}

/** Country icons */

.svg-icon_language-ru {
    background-image: url("../images/svg/228-russia.svg");
}

.svg-icon_language-cn {
    background-image: url("../images/svg/261-china.svg");
}

.svg-icon_language-en {
    background-image: url("../images/svg/262-united-kingdom.svg");
}