﻿.search-box { height: 34px; line-height: 34px; min-height: 34px; max-height: 34px; display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; }
    .search-box .icon_s { }
        .search-box .icon_s.search { position: relative; }
            .search-box .icon_s.search:after { content: ""; position: absolute; left: 100%; width: 30px; height: 30px; margin-left: -30px; background: url('../../../bundle/i/_controls-sprite.svg'); background-repeat: no-repeat; background-position: 0px -541px; background-size: 30px auto; }
    /*.search-box .icon.search:hover:after { opacity: 0.7; }
            .search-box .icon.search:before { content: ""; position: absolute; top: -35px; left: 100%; width: 38px; height: 30px; margin-left: -38px; }
            .search-box .icon.search:hover:before { border-left: 1px solid; border-left-color: lightgray;  }*/

    .search-box input { padding-left: 6px; padding-right: 34px; line-height: 34px; height: 34px; box-sizing: border-box; width: 300px; }

    .search-box .icon_s.close { position: relative; }
        .search-box .icon_s.close:after { cursor: pointer; content: ""; position: absolute; left: 100%; width: 30px; height: 30px; margin-left: -30px; background: url('../../../bundle/i/_controls-sprite.svg'); background-repeat: no-repeat; background-position: 0px -571px; background-size: 30px auto; }
        .search-box .icon_s.close:hover:after { opacity: 0.7; }
/*.search-box .icon.close:before { content: ""; position: absolute; top: -35px; left: 100%; width: 38px; height: 30px; margin-left: -38px; }
        .search-box .icon.close:hover:before { border-left: 1px solid; border-left-color: lightgray; }*/


search-box .input-text {
    min-height: 30px;
    max-height: 30px;
    height: 30px;
    line-height: 30px;
    border: 0px;
    /*background-color: #F5F5F5;*/

    min-width: 300px;
    border-radius: 6px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    border: Gray 1px solid;
}

search-box .icon.search:after {
    width: 26px;
    height: 26px;
    top: -1px;
}
 search-box .icon.close:after {
    width: 26px;
    height: 26px;
    top: -1px;
}