﻿.btn {
    display: inline-block;
    padding: 6px 12px;
    margin: 0;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    user-select: none;
    text-decoration: none;
}

.btn:focus {
    outline: none;
}

.btn:hover, 
.btn:focus {
    color: #000000;
}

.btn:active, 
.btn.active {
    background-image: none;
    outline: none;
    box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
}

.btn.disabled, 
.btn[disabled], 
fieldset[disabled] .btn {
    pointer-events: none;
    cursor: not-allowed;
    opacity: .65;
    filter: alpha(opacity=65);
    box-shadow: none;
}

.btn-orange1 {
    color: #049cd7;
    border: 2px solid #a4b7c6;
    border-radius: 4px;
    background-color: white;
    font-weight: 900;
    transition: color 5s ease-in-out;
    transition: background-color 5s ease-in-out;
    transition: border-color 5s ease-in-out;
}
.btn-orange1:hover, 
.btn-orange1:focus {
    color: white;
    border: 2px solid #049cd7;
    background-color: #049cd7;
    text-shadow: none;
}

.btn-orange2 {
    color: #049cd7;
    border: 3px solid #a4b7c6;
    border-radius: 8px;
    background-color: white;
    margin: 10px;	
    font-weight: 900;
    transition: color 5s ease-in-out;
    transition: background-color 5s ease-in-out;
    transition: border-color 5s ease-in-out;
} 
.btn-orange2:hover, 
.btn-orange2:focus {
    color: white;
    border: 3px solid #049cd7;
    border-radius: 8px;
    background-color: #049cd7;
    text-shadow: none;
}

.gridbutton {
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    color: #049cd7;
    border: 3px solid #a4b7c6;
    border-radius: 8px;
    background-color: white;
    margin: 10px;	
    text-decoration: none;
}

.gridbutton:hover, 
.gridbutton:focus {
    color: white;
    border: 1px solid #049cd7;
    background-color: #049cd7;
}

.button-container {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "button-left button-right";
}

.button-left {
    grid-area: button-left;
    display: inline-block;
    text-align: left;
    border: none;
}

.button-right {
    grid-area: button-right;
    display: inline-block;
    text-align: right;
    border: none;
}

