@charset "UTF-8";

.gs-button-menu-list{
    color:                          #fff;
    font-size:                      15px;
    line-height:                    15px;
    font-weight:                    500;
    width:                          auto;
    display:                        inline-block;
    padding-right:                  20px;
    background:                     url(../resources/img/forms/input-select-button.svg);
    filter: brightness(0) invert(1);
    background-size:                9px auto;
    background-position:            right bottom 1px;
    background-repeat:              no-repeat;
}

.gs-button-menu-list:hover{
    color:                          #fff;
}

/* TOOLS BUTTON
*****************************************************/

.bt-tool{
    height:                         36px;
    width:                          36px;
    border:                         1px solid transparent;
    display:                        inline-flex;
    flex-direction:                 column;
    justify-content:                center;
    border-radius:                  5px;
    vertical-align:                 top;
    position:                       relative;
}

.bt-tool:hover,
.bt-tool.active{
    background:                     rgba(49, 135, 253, 0.1);
    color: #3187fd;
}

.bt-tool.active:after{
    border:                         2px solid #3187fd;
    height:                         100%;
    width:                          100%;
    position:                       absolute;
    left:                           -2px;
    top:                            -2px;
    border-radius:                  5px;
    content:                        '';
}

.bt-tool i{
    margin:                         auto !important;
}

/* CLASSIC BUTTON
*****************************************************/

a.gs-button,
button.gs-button{
    appearance:                     none;
    -webkit-appearance:             none;
    border:                         0;
    box-sizing:                     border-box;
    display:                        inline-flex;
    justify-content:                center;
    width:                          auto;
    height:                         30px;
    line-height:                    30px;
    padding:                        0 15px;
    border-radius:                  12px;
    background:                     linear-gradient(to right, #2c74d7, #41b691);
    cursor:                         pointer;
    transition:                     none;
    margin:                         auto;
    vertical-align:                 top;
}

a.gs-button.inactive{
    background:                     #e6e6e6 !important;
}

a.gs-button:hover,
button.gs-button:hover{
    background:                     #3187fd;
}

a.gs-button.alternative,
button.gs-button.alternative{
    background:                     #ababab;   
    transition:                     background 0.3s;
}

a.gs-button.alternative:hover,
button.gs-button.alternative:hover,
a.gs-button.alternative.active,
button.gs-button.alternative.active{
    background:                     #3187fd;
}

.gs-button i{
    filter:                         brightness(0) invert(1); 
    max-width:                      12px !important;
}

a.gs-button.transparent,
button.gs-button.transparent{
	background: 					none;
}

a.gs-button.transparent:hover,
button.gs-button.transparent:hover,
a.gs-button.alternative.transparent,
button.gs-button.alternative.transparent{
    background:                     rgba(49, 135, 253, 0.1);
}

.gs-button.transparent i{
	filter: 						none;
}

/* ICON BUTTON
*****************************************************/

.bt-icon{
	display:                        inline-flex;
    flex-direction:                 column;
    justify-content:                center;
    width:                          30px;
    height:                         30px;
    overflow:                       hidden;
    cursor:                         pointer;
    border-radius:                  100%;
    position:                       relative;
    transition:                     all 0.3s;
}

.bt-icon:hover{
    background:                     rgba(49, 135, 253, 0.1);
}

.bt-icon.active{
	background: 				    #3187fd !important;
}

.bt-icon i{
    width:                          18px !important;
    margin:                         auto !important;
    pointer-events: none;
}

.bt-icon.active i{
    filter:                         brightness(0) invert(1);   
}