﻿.buttonLarg, .buttonLargRed {
    appearance: button;
    background-color: #1899D6;
    border: solid transparent;
    border-radius: 16px;
    border-width: 0 0 4px;
    box-sizing: border-box;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    /*font-family: tahoma,sans-serif;*/
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;
    line-height: 60px;
    margin: 15px 15px 15px 15px;
    outline: none;
    overflow: visible;
    padding: 15px 15px 15px 15px;
    text-align: center;
    text-transform: uppercase;
    touch-action: manipulation;
    transform: translateZ(0);
    transition: filter .2s;
    user-select: none;
    -webkit-user-select: none;
    vertical-align: middle;
    white-space: nowrap;
    width: 150px;
    height: 200px;
}

.buttonLargRed {
    background-color: #1899D6;
    width: 200px;
    height: 150px;
}

    .buttonLarg:after,
    .buttonLargRed:after {
        background-clip: padding-box;
        background-color: #1CB0F6;
        border: solid transparent;
        border-radius: 16px;
        border-width: 0 0 4px;
        bottom: -4px;
        content: "";
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        z-index: -1;
    }

    .buttonLarg:main,
    .buttonLarg:focus,
    .buttonLargRed:main,
    .buttonLargRed:focus {
        user-select: auto;
    }

    .buttonLarg:hover:not(:disabled),
    .buttonLargRed:hover:not(:disabled) {
        filter: brightness(1.1);
        -webkit-filter: brightness(1.1);
    }

    .buttonLarg:disabled,
    .buttonLargRed:disabled {
        cursor: auto;
    }

.buttonRefresh {
    background: #FFFFFF;
    background-image: url('~/css/Img/Refresh.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 8px;
    border: 0;
    border-radius: 4px;
    width: 50px;
    height: 50px;
}

.btn-Search {
    background-image: url('/css/Img/Search.png');
    background-size: cover;
    font-weight: bolder;
    width: 27px;
    height: 27px;
    text-align: center;
    border-width: 0;
    position: absolute;
    border-radius: 2px;
    filter: grayscale(50%);
    filter: brightness(100%);
}

    .btn-Search:hover {
        filter: grayscale(0%);
        filter: brightness(130%);
    }

.btn-Golden {
    background-color: #D2B26B;
    font-weight: bolder;
    color: #0e2050;
    margin: 20px 0px 20px 0px;
}

.btn-DarkBlue {
    background-color: #D2B26B;
    font-weight: bolder;
    color: #0e2050;
    margin: 20px 0px 20px 0px;
}

.btn-Close, .btn-Close:hover {
    background-color: transparent;
    border-width: 0px;
    border-radius: 20px;
    padding: 0;
    margin: 2px 2px 0px 0px;
    filter: brightness(800%)
}

    .btn-Close:hover {
        /*background-color: #D2B26B;*/
        border-width: 0px;
        border-radius: 11px;
        filter: brightness(150%)
    }

.btn-Cycle, .btn-Cycle:hover {
    background-color: #ffffff;
    border-width: 0px;
    border-radius: 10px;
    padding: 0;
    margin: 0px;
    filter: grayscale(80%);
    padding: 0;
    margin: 0;
}

.btn-secondary {
    background-color: #bab8b8 !important;
    border-color: #bab8b8;
    color: black;
}

    .btn-secondary:hover {
        background-color: #bab8b8 !important;
        color: black !important;
    }

.btn-Cycle:hover {
    background-color: #D2B26B;
    border: 1px solid #D2B26B;
    border-width: 0px;
    border-radius: 10px;
    padding: 0;
    margin: 0px;
    filter: grayscale(0%);
}

.btn-Numeric {
    /*background-color: #D2B26B;
    color: #0e2050;
    margin: 0px 0px 0px 0px;*/
    font-weight: bolder;
    width: 35px;
    text-align: center;
}
/*-------------------------------------------------------------------------------*/
.btn-Yellow, .btn-Orange, .btn-Redlight, .btn-Red {
    background-color: yellow;
    /*filter: grayscale(0%);*/
    position: relative;
    z-index: 2;
}

.btn-Yellow {
    background-color: yellow;
}

.btn-Orange {
    background-color: orange;
}

.btn-Redlight {
    background-color: #fa610d;
}

.btn-Red {
    background-color: red;
}

    .btn-Yellow:hover, .btn-Orange:hover, .btn-Redlight:hover, .btn-Red:hover {
        filter: grayscale(0%);
        border: 1px solid #fff;
    }

.btn-outline-light {
    border-width: 0 !important;
    filter: brightness(80%);
    filter: grayscale(100%);
    padding: 2px;
}

    .btn-outline-light:hover {
        border-width: 0 !important;
        filter: brightness(100%);
        filter: grayscale(0%);
        padding: 2px;
    }

.btn-outline-success {
    border-width: 0 !important;
}

.btn-Smallest {
    background-color: transparent;
    color: #0e2050;
    padding: 1px 2px 1px 2px;
    margin: 5px 2px 5px 2px;
    width: 35px;
    height: 35px;
    border-radius: 35px;
    text-align: center;
    filter: brightness(10%);
    filter: grayscale(150%)
}

    .btn-Smallest:hover {
        filter: brightness(150%);
        filter: grayscale(0%)
    }
