@charset "UTF-8";


/*
    Buttons
 */
.btn
{
    box-shadow: 2px 2px 2px black;
    background-color: #272727;
    padding: 10px 15px;
    margin-right: 5px;
    margin-bottom: 5px;
    display: flex;
    cursor: pointer;
    position: relative;
}
.btn:hover
{
    box-shadow: 2px 2px 2px #0e0e0e;
}
.btn:hover .label
{
    color: aliceblue;
}
.btn:active
{
    box-shadow: inset 2px 2px 4px black;
}
.btn:active .label
{
    margin-top: 2px;
    margin-bottom: -2px;
}


/*
    Button with icons
 */
.btn-icon
{
    box-shadow: 2px 2px 2px black;
    background-color: #272727;
    padding: 10px 15px;
    margin-right: 5px;
    margin-bottom: 5px;
    display: flex;
    cursor: pointer;
    position: relative;
}
.btn-icon:hover
{
    box-shadow: 2px 2px 2px #0e0e0e;
    color: aliceblue;
}
.btn-icon:active
{
    box-shadow: inset 2px 2px 4px black;
}

.btn-icon .label
{
    line-height: 50px;
    margin-left: 20px;
}
.btn-icon:active .label
{
    margin-top: 2px;
    margin-bottom: -2px;
}
.btn-icon:active .icon
{
    margin-top: 2px;
    margin-bottom: -2px;
}

/*
    Button with confirm elements
 */
.btn-confirm
{

}
.btn-confirm .confirm-yes
{
    padding: 0px 25px;
    background-color: #0a5000;
    text-align: center;
    position: absolute;
    right: 80px;
    display: none;
}
.btn-confirm .confirm-yes:hover
 {
     color: black;
 }
.btn-confirm .confirm-yes:after
 {
     content: '\2714';
 }
.btn-confirm.selected .confirm-yes
{
    display: block;
}


.btn-confirm .confirm-no
{
    padding: 0px 25px;
    background-color: #b02422;
    text-align: center;
    position: absolute;
    right: 10px;
    display: none;
}
.btn-confirm .confirm-no:hover
{
    color: black;
}
.btn-confirm .confirm-no::after
{
    content: '\2716';
}
.btn-confirm.selected .confirm-no
{
    display: block;
}