@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600&display=swap&subset=cyrillic');
a {
    text-decoration: none;
}

.icon-button {
    display: inline-flex;
    align-items: center;
    padding: 15px 0px;
    color: #383d48;
}

.icon-button span {
    color: #383d48;
    font-family: 'Montserrat', sans-serif;
    display: block;
    transition: .4s ease;
    overflow: hidden;
    max-width: 0;
    opacity: 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    letter-spacing: 1px;
    line-height: 1;
    padding-top: 3px;
}

.icon-label {
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}

.icon-label a {
    display: block;
    padding: 26px 0px;
}

#conn_time {
    width: 100px;
    position: absolute;
    right: 0px;
    top: 23px;
    color: #aaaaaa;
    text-align: right;
}

.icon-list {
    list-style: none;
    font-family: Linearicons-Free;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 22px;
}

#sib_save:after {
    content: "\e87f";
}

#sib_cancel:after {
    content: "\e880";
}

#sib_back:after {
    content: "\e889";
}

#sib_options:after {
    content: "\e810";
}

#sib_ok:after {
    content: "\e87f";
}

#sib_trash:after {
    content: "\e811";
}

#sib_rocket:after {
	content: "\e84b";
}

#sib_home:after {
    content: "\e800";
}

#sib_exit:after {
    content: "\e820"
}



.icon-button-header {
    padding: 19px 0px;
    color: #FFFFFF;
}

.icon-button-header span {
    color: #FFFFFF;
}

.icon-list .icon-button:hover span {
    max-width: 150px;
    opacity: 1;
    margin-right: 6px;
}

@media(min-width:670px) {
    .icon-container ul {
        display: flex;
/*        justify-content: space-between; */
    }
    .icon-container ul li {
        width: 70px;
        text-align: left;
    }
    .icon-label {
        width: 100px;
        text-align: left;
    }
}

@media(min-width:256px) {
    .icon-container ul {
        display: flex;
/*        justify-content: space-between; */
    }
    .icon-container ul li {
        padding-left: 10px;
        text-align: left;
    }
    .icon-label {
        padding-left: 10px;
        text-align: left;
    }
}