.redbutton {
    width: 70%;
    padding: 0.5vh;
    text-align: center;
    text-decoration: none;
    text-shadow: 0.36vh 0.36vh 0.36vh #666666;
    color: white;
    font-size: 14px;
    font-size: 2vh;
    background: red;
    background: linear-gradient( to right, #a55555, #a55555 1%, transparent 1%, transparent 99.5%, #ef8686 99.5%, #ef8686 100% ), linear-gradient( #b10a0a, #b10a0a 5%, #e01616 5%, #ee7f7f 50%, #dd0000 51%, #e01616 95%, #f5b3b3 95%, #f5b3b4 100% );
    border: 0;
    border-radius: 0.6vh;
    position: relative;
    cursor: pointer;
    line-height: 150%;
}

.dlrSecuredbutton {
	width: 70%;
	padding: 0.5vh;
	text-align: center;
	text-decoration: none;
	color: black;
	font-size: 14px;
	font-size: 2vh;
	background-color: #b5b5b5;
	border: 0;
	border-radius: 0.6vh;
	position: relative;
	cursor: pointer;
}

.redbuttonDropdown {
	width: 70%;
	padding: 0.5vh;
	text-align: center;
	text-decoration: none;
	text-shadow: 0.36vh 0.36vh 0.36vh #666666;
	color: white;
	font-size: 14px;
	font-size: 2vh;
	background: red;
	background: linear-gradient( to right, #a55555, #a55555 1%, transparent 1%, transparent 99.5%, #ef8686 99.5%, #ef8686 100% ), linear-gradient( #b10a0a, #b10a0a 5%, #e01616 5%, #ee7f7f 50%, #dd0000 51%, #e01616 95%, #f5b3b3 95%, #f5b3b4 100% );
	border: 0;
	border-radius: 0.6vh;
	position: relative;
	cursor: pointer;
}

.redbutton.large {
    font-size: 100%;
}
.dlrSecuredbutton.large {
	font-size: 100%;
}

.redbutton.disabled::before {
    content: '';
    cursor: not-allowed;
    display: block;
    position: absolute;
    background: RGBA(255, 255, 255, 0.3);
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    border-radius: 0.6vh;
}

.redbutton.shadow {
    box-shadow: 0.27vh 0.27vh 0.675vh #333333;
    font-weight: bold;
}

.dlrSecuredbutton.shadow {
	box-shadow: 0.27vh 0.27vh 0.675vh #333333;
	font-weight: bold;
}

.greybutton {
    width: 70%;
    padding: 0.54vh;
    text-align: center;
    text-decoration: none;
    color: black;
    font-size: 1.75vh;
    background: #343434;
    background: linear-gradient(#fefefe, #fefefe 85%, #cccccc);
    border: 0.2vh solid;
    border-radius: 0.4vh;
    border-color: #c2c2c2 #c2c2c2 #c2c2c2 #c2c2c2;
    cursor: pointer;
}

.whitebutton {
    display: inline-block;
    margin: 1%;
    padding-top: 0.5%;
    text-align: center;
    text-decoration: none;
    color: black;
    font-size: 2.5vh;
    background: #ffffff;
    border: 0.2vh solid;
    border-color: #c2c2c2 #c2c2c2 #c2c2c2 #c2c2c2;
    box-shadow: 0 0 0.54vh 0.36vh #999999;
    cursor: pointer;
}

.whitebutton.selected {
    box-shadow: 0 0 0.54vh 0.36vh #ff0000;
}

/* Round buttons are specifically for Exterior colors*/
div.roundButton {
    display: inline-block;
    width: 6.3vh;
    height: 6.3vh;
    background-image: url(/images/buttoncircle.png);
    background-size: cover;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: 0.1vh solid;
    border-color: #bcbcbc;
    position: relative;
    box-shadow: 0 0 0.54vh 0.36vh #888888;
    margin-left: 2%;
    margin-top: 2%;
    cursor: pointer;
}

div.roundButton::after {
    width: 65%;
    height: 45%;
    background: linear-gradient(to bottom right, RGBA(255, 255, 255, 0.33), RGBA(255, 255, 255, 0.09));
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    top: 5%;
    left: 12%;
    content: '';
}

div.roundButton.selected {
    box-shadow: 0 0 0.54vh 0.36vh #ff0000;
}

.logoutBtn {
    float: right;
    height: 100%;
    cursor: pointer;
}

div.trimButton {
    width: 22%;
    height: 18%;
    display: inline-block;
    border-radius: 0.4vh;
    margin-top: 0.5%;
    font-weight: bold;
    box-shadow: 0.15vh 0.15vh 0.54vh #000000;
    font-size: 1.8vh;
    text-align: center;
    padding-top: 0.5%;
    cursor: pointer;
    pointer-events: all;
    line-height: 150%;
}

div.submodelButton {
    width: 20%;
    height: 18%;
    display: inline-block;
    border-radius: 2px;
    margin-top: 0.5%;
    font-weight: bold;
    box-shadow: 0 0 3px 3px #333333;
    font-size: 1.8vh;
    text-align: center;
    padding-top: 0.5%;
    cursor: pointer;
    pointer-events: all;
}

div.exteriorButton {
    width: 10.5%;
    height: 18%;
    display: inline-block;
    border-radius: 0.4vh;
    box-shadow: 0.15vh 0.15vh 0.54vh #000000;
    text-shadow: 0 0 0.4vh #000000;
    position: relative;
    font-size: 1.6vh;
    text-align: center;
    padding-top: 0.5%;
    color: white;
    margin-top: 1%;
    overflow: hidden;
    cursor: pointer;
    pointer-events: all;
    line-height: 150%;
}

div.exteriorButton::after {
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, RGBA(255, 255, 255, 0.33), RGBA(255, 255, 255, 0.09));
    -moz-border-radius: 40%;
    -webkit-border-radius: 40%;
    border-radius: 40%;
    position: absolute;
    top: -60%;
    left: -10%;
    content: '';
}

div.interiorButton {
    width: 10.5%;
    height: 18%;
    display: inline-block;
    border-radius: 0.4vh;
    box-shadow: 0.15vh 0.15vh 0.54vh #000000;
    background: linear-gradient(to top, #333333, grey 35%, grey 65%, #999999);
    color: white;
    margin-left: 0.5%;
    font-size: 1.6vh;
    text-align: center;
    padding-top: 0.5%;
    margin-top: 1%;
    overflow: hidden;
    cursor: pointer;
    pointer-events: all;
    line-height: 150%;
}

.addAdditionalDown {
    width: 45%;
    height: 41%;
    display: inline-block;
    border-radius: 0.2vh;
    box-shadow: 0 0 0.54vh 0 #333333;
    font-size: 2vh;
    text-align: center;
}

.addButton {
    width: 45%;
    height: 41%;
    display: inline-block;
    border-radius: 0.2vh;
    box-shadow: 0 0 0.54vh 0 #333333;
    background: linear-gradient(to top, #333333, grey 35%, grey 65%, #999999);
    font-size: 1.7vh;
    text-align: center;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    line-height: 150%;
}

.arrowDown {
    width: 7%;
    height: 60%;
    background: linear-gradient(225deg, transparent 65%, #fff 65%), linear-gradient(-225deg, transparent 65%, #fff 65%),
        linear-gradient(to top, #ff0000, #ff0000);
    box-shadow: 0 -6px 4px -4px black;
}

.arrowUp {
    width: 7%;
    height: 60%;
    background: linear-gradient(45deg, transparent 65%, #fff 65%), linear-gradient(-45deg, transparent 65%, #fff 65%),
        linear-gradient(to bottom, #ff0000, #ff0000);
    box-shadow: 0 6px 4px -4px black;
}

input[type='checkbox'] {
    display: none;
}

input[type='checkbox'] + label {
    display: inline-block;
    width: auto;
    margin: 1% 2%;
    white-space: nowrap;
}

input[type='checkbox'] + label.rightCheck::after {
    content: '';
    display: inline-block;
    width: 1.8vh;
    height: 1.8vh;
    margin-left: 2%;
    border: 0.18vh solid #c0c0c0;
    background: #e0e0e0;
    vertical-align: bottom;
    font-size: 1.3vh;
    font-family: 'PT Sans', sans-serif;
}

input[type='checkbox']:checked + label.rightCheck::after {
    content: '✓';
    text-align: center;
    font-weight: bold;
}

input[type='checkbox'] + label.rightCheck:after {
    font-size: 0.722vw;
    width: 1vw;
    height: 1vw;
    margin-left: 8px;
}

input[type='checkbox'] + label.leftCheck::before {
    content: '';
    display: inline-block;
    width: 1.8vh;
    height: 1.8vh;
    margin-right: 2%;
    border: 0.18vh solid #c0c0c0;
    background: #e0e0e0;
    vertical-align: bottom;
    font-size: 1.3vh;
    font-family: 'PT Sans', sans-serif;
}

input[type='checkbox'].relatedCheck + label.leftCheck::before {
    background: linear-gradient(135deg, white 40%, grey 100%);
    vertical-align: top;
    color: red;
    margin-top: 2%;
    margin-right: 5%;
    margin-left: 5%;
    border-color: grey;
}

input[type='checkbox']:checked + label.leftCheck::before {
    content: '✓';
    text-align: center;
    font-weight: bold;
}

input[type='checkbox'] + label.leftCheck:before {
    font-size: 0.722vw;
    width: 1vw;
    height: 1vw;
    margin-right: 8px;
}

@media screen and (max-aspect-ratio: 990/550) {
	.redbuttonDropdown {
		padding-bottom: 22px;
		font-size: 1vh;
	}

	.redbutton {
		font-size: 1.1111vw;
		padding: 0.277vw;
		text-shadow: 0.2vw 0.2vw 0.2vw #666666;
	}

	.dlrSecuredbutton {
		font-size: 1.1111vw;
		padding: 0.277vw;
	}

    .redbutton.disabled::before {
        border-radius: 0.333vw;
    }

    .redbutton.shadow {
        box-shadow: 0.2vw 0.2vw 0.5vw #333333;
    }

	.dlrSecuredbutton.shadow {
		box-shadow: 0.2vw 0.2vw 0.5vw #333333;
	}

    .greybutton {
        font-size: 0.9722vw;
        border: 0.111vw solid;
        border-radius: 0.222vw;
        padding: 0.3vw;
    }

    .whitebutton {
        font-size: 1.389vw;
        border-width: 0.111vw;
        box-shadow: 0 0 0.3vw 0.2vw #999999;
    }

    .whitebutton.selected {
        box-shadow: 0 0 0.3vw 0.2vw #ff0000;
    }

    div.trimButton {
        font-size: 1vw;
        border-radius: 0.222vw;
        box-shadow: 0.083vw 0.083vw 0.3vw #000000;
    }

    div.exteriorButton {
        font-size: 0.8889vw;
        border-radius: 0.222vw;
        box-shadow: 0.083vw 0.083vw 0.3vw #000000;
        text-shadow: 0 0 0.222vw #000000;
    }

    div.interiorButton {
        font-size: 0.8889vw;
        border-radius: 0.222vw;
        box-shadow: 0.083vw 0.083vw 0.3vw #000000;
    }

    .addAdditionalDown {
        font-size: 1.055vw;
    }

    .addButton {
        font-size: .9vw;
        border-radius: 0.111vw;
        box-shadow: 0 0 0.3vw 0 #333333;
    }

    input[type='checkbox'] + label.rightCheck:after {
        font-size: 0.722vw;
        height: 1vw;
        width: 1vw;
        border-width: 0.1vw;
    }

    input[type='checkbox'] + label.leftCheck:before {
        font-size: 0.722vw;
        height: 1vw;
        width: 1vw;
        border-width: 0.1vw;
    }

    div.roundButton {
        width: 3.5vw;
        height: 3.5vw;
        border-width: 0.0566vw;
        box-shadow: 0 0 0.3vw 0.2vw #888888;
    }

    div.roundButton.selected {
        box-shadow: 0 0 0.3vw 0.2vw #ff0000;
    }
}