/**********************************************************************************************
 **********************************************************************************************
 ***  Copyright(c) 2020 Leeward Digital, LLC. Henderson, NV. All Rights Reserved.
 ***
 ***  Filename      : leewardx-button.css
 ***  Author        : Leeward Digital
 ***  Created On    : April 9, 2020 GMT-7
 ***
 ***  Modified By   :
 ***  Modified On   :
 ***
 ***  Description   : A supplementary style sheet for button components
 ***
 ***  Requirement/s :
 *********************************************************************************************
 *********************************************************************************************/

.ld-btn,
button { font-size: 14px; }

button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    border: none;
}

button,
i.ld-icon,
.ld-btn { cursor: pointer; }

.ld-btn {
    color: white;
    padding: 10px 18px;
    border-radius: 5px;
    transition: all ease-in-out 300ms;
    font-weight: 600;
    white-space: nowrap;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid #ff0000;
    background: #ff0000 none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 85px;
}

.ld-btn.secondary {
    background: #cccccc;
    border: 1px solid #cccccc;
}

.ld-btn.large {
    font-weight: normal;
    line-height: 24px;
    border-radius: 10px;
    border: 2px solid #ff0000;
    padding: 11px 42px;
    min-width: 316px;
    font-size: 18px;
}

.ld-btn.outline {
    color: #ff0000;
    background-color: #fff;
}

.ld-btn:not(.ld-icon):hover {
    color: white;
    background-color: #AF0000;
    border-color: #AF0000;
}

.ld-icon:before { content: ' '; }

.ld-icon.info,
.ld-icon.download { border-radius: 50%; }
.ld-icon.download.blue { border-radius: 0; }

.ld-icon.hamburger { background: transparent url(../images/buttons/hamburger.png) no-repeat center; }
.ld-icon.reload { background: transparent url(../images/buttons/reload.png) no-repeat center; }
.ld-icon.reload.white { background: transparent url(../images/buttons/reload-white.png) no-repeat center; }
.ld-icon.x { background: transparent url(../images/buttons/x.svg) no-repeat center; }
.ld-icon.search { background: transparent url(../images/buttons/icon-search-gray.svg) no-repeat center; }
.ld-icon.x.gray { background: transparent url(../images/buttons/x-gray.svg) no-repeat center; }
.ld-icon.x.white { background: transparent url(../images/buttons/x-white.svg) no-repeat center; }
.ld-icon.plus { background: transparent url(../images/buttons/plus.svg) no-repeat center; }
.ld-icon.plus.teal { background: transparent url(../images/buttons/plus-teal.svg) no-repeat center; }
.ld-icon.plus.white { background: transparent url(../images/buttons/plus-white.svg) no-repeat center; }
.ld-icon.check { background: transparent url(../images/buttons/check.svg) no-repeat center; }
.ld-icon.check.blue { background: transparent url(../images/buttons/check-blue.svg) no-repeat center; }
.ld-icon.check.teal { background: transparent url(../images/buttons/check-teal.svg) no-repeat center; }
.ld-icon.see { background: transparent url(../images/buttons/eye.svg) no-repeat center; }
.ld-icon.unsee { background: transparent url(../images/buttons/eye-crash-out.svg) no-repeat center; }
.ld-icon.info { background: transparent url(../images/buttons/info.svg) no-repeat center; }
.ld-icon.question { background: transparent url(../images/buttons/question.svg) no-repeat center; }
.ld-icon.calendar { background: transparent url(../images/buttons/calendar.svg) no-repeat center; }
.ld-icon.download { background: transparent url(../images/buttons/download.svg) no-repeat center; }
.ld-icon.download.gray { background: transparent url(../images/buttons/download-gray.svg) no-repeat center; }
.ld-icon.download.blue { background: transparent url(../images/buttons/download-blue.svg) no-repeat center; }
.ld-icon.close { background: transparent url(../images/buttons/close-circle.svg) no-repeat center; }
.ld-icon.close.gray { background: transparent url(../images/buttons/close-circle-gray.svg) no-repeat center; }
.ld-icon.close.white { background: transparent url(../images/buttons/close-circle-white.svg) no-repeat center; }
.ld-icon.arrow-head-down.red { background: transparent url(../images/buttons/arrow-head-down-red.svg) no-repeat center; }
.ld-icon.next { background: transparent url(../images/buttons/arrow-head-right-gray.svg) no-repeat center; }
.ld-icon.last { background: transparent url(../images/buttons/double-arrow-head-right-gray.svg) no-repeat center; }
.ld-icon.save.gray { background: transparent url(../images/buttons/save-gray.svg) no-repeat center; }
.ld-icon.trash.gray { background: transparent url(../images/buttons/trash-gray.svg) no-repeat center; }
.ld-icon.trash.red { background: transparent url(../images/buttons/trash-red.svg) no-repeat center; }
.ld-icon.globe { background: transparent url(../images/buttons/earth-globe.svg) no-repeat center; }

.ld-icon.prev { background: transparent url(../images/buttons/arrow-head-right-gray.svg) no-repeat center; }
.ld-icon.first { background: transparent url(../images/buttons/double-arrow-head-right-gray.svg) no-repeat center; }

.ld-icon.prev,
.ld-icon.first { transform: rotate(180deg); }

.ld-icon.arrow-head-left.thin.white,
.ld-icon.arrow-head-right.thin.white { background: transparent url(../images/buttons/arrow-head-thin-right-white.png) no-repeat center; }

.ld-icon.arrow-head-left.thin.gray,
.ld-icon.arrow-head-right.thin.gray { background: transparent url(../images/buttons/arrow-head-thin-right-gray.png) no-repeat center; }

.ld-icon.arrow-head-left.thin,
.ld-icon.arrow-head-right.thin {
    width: 70px;
    height: 70px;
}

.ld-icon.arrow-head-left.thin { transform: rotate(180deg); }

.ld-icon.arrow-head-left.thin,
.ld-icon.arrow-head-right.thin,
.ld-icon.arrow-head-down.red { display: flex; }

.ld-icon {
    width: 24px;
    height: 24px;
    border: 0;
    padding: 0;
    border-radius: 0;
    background-size: contain !important;
    display: flex;
}

button.ld-icon:hover,
.ld-btn.ld-icon:hover { opacity: 0.7; }

button.ld-icon:hover:active,
.ld-btn:hover:active,
.ld-btn.ld-icon:hover:active { opacity: 0.3; }

.bg-white { background-color: white !important; }

.ld-input-wrapper { position: relative; }
.ld-input-wrapper button {
	top: 0;
	right: 0;
	position: absolute;
	background-size: 56% !important;
}
.ld-input-wrapper input { width: 100%; }

button.default {
	background-color: #eeeeee;
	padding: 10px 14px;
	border: 1px solid #c6c7c7;
	border-radius: 7px;
}

@media (min-width: 813px) and (min-height: 726px) {
	.ld-btn,
	button { font-size: 1.9310344827586208vh; }
	
	.ld-btn {
		padding: 1.3793103448275863vh 2.4827586206896552vh;
		border-radius: 0.6896551724137931vh;
		min-width: 11.724137931034482vh;
	}
	
	.ld-btn.secondary {
		border: 0.13793103448275862vh solid #cccccc;
	}
	
	.ld-btn.large {
		line-height: 3.310344827586207vh;
		border-radius: 1.3793103448275863vh;
		border: 0.27586206896551724vh solid #ff0000;
		padding: 1.5172413793103448vh 5.793103448275862vh;
		min-width: 43.58620689655172vh;
		font-size: 2.4827586206896552vh;
	}
	
	.ld-icon.arrow-head-left.thin,
	.ld-icon.arrow-head-right.thin {
		width: 9.655172413793103vh;
		height: 9.655172413793103vh;
	}
	
	.ld-icon {
		width: 3.310344827586207vh;
		height: 3.310344827586207vh;
	}
	
	button.default {
		padding: 1.3793103448275863vh 1.9310344827586208vh;
		border: 0.13793103448275862vh solid #c6c7c7;
		border-radius: 0.9655172413793104vh;
	}
}