/* ====================================================
 * Company: Unity Technologies
 * Contributors:
   - Rickard Andersson, rickard@unity3d.com
======================================================= */

/****************************************
  ==== LAYOUT
****************************************/

.btn {
  line-height: 20px; display: block; float: left; position: relative; overflow: hidden; padding: 13px 20px; font-size: 0.9375em; font-weight: 400; text-align: center; cursor: pointer; text-decoration: none; margin: 0; border: 0; outline: 0; border-image-width: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
}
.btn, .btn:hover, .btn:focus, .btn:active {
  color: #fff; text-decoration: none;
}

/****************************************
  ==== COLORS
****************************************/

.btn {
  background-color: #2196f3; /* standard */
}
.btn:hover {
  background-color: #309df4;
}
.btn:focus, .btn:active {
  background-color: #2196f3;
}
.btn.bg-db:hover {
  background-color: #072e3b;  /* Deep blue */
}
.btn.bg-db:focus, .btn.bg-db:active {
  background-color: #002835;
}
.btn.bg-ma:hover {
  background-color: #ec407a; /* Magenta */
}
.btn.bg-ma:focus, .btn.bg-ma:active {
  background-color: #cb205c;
}
.btn.bg-li:hover {
  background-color: #d4e157; /* Lime */
}
.btn.bg-li:focus, .btn.bg-li:active {
  background-color: #b4c239;
}
.btn.bg-re:hover {
  background-color: #f65f54; /* Red */
}
.btn.bg-re:focus, .btn.bg-re:active {
  background-color: #d54036;
}
.btn.bg-pu:hover {
  background-color: #ab47bc; /* Purple */
}
.btn.bg-pu:focus, .btn.bg-pu:active {
  background-color: #8a289e;
}

.btn.bg-te:hover {
  background-color: #26a69a; /* Teal */
}
.btn.bg-te:focus, .btn.bg-te:active {
  background-color: #05867c;
}
.btn.bg-gr:hover {
  background-color: #9bcb64; /* Green */
}
.btn.bg-gr:focus, .btn.bg-gr:active {
  background-color: #7bac46;
}
.btn.bg-ye {
  color: #002835;
}
.btn.bg-ye:hover {
  background-color: #ffee58; /* Yellow */
}
.btn.bg-ye:focus, .btn.bg-ye:active {
  background-color: #decf3a;
}
.btn.bg-or:hover {
  background-color: #ffa726; /* Orange */
}
.btn.bg-or:focus, .btn.bg-or:active {
  background-color: #de8808;
}
.btn.bg-dg:hover {
  background-color: #737373; /* Dark gray */
}
.btn.bg-dg:focus, .btn.bg-dg:active {
  background-color: #525356;
}
.btn.bg-mg:hover {
  background-color: #acacac; /* Medium gray */
}
.btn.bg-mg:focus, .btn.bg-mg:active {
  background-color: #8c8d8f;
}
.btn.bg-lg {
  color: #002835;
}
.btn.bg-lg:hover {
  background-color: #f6f9fa; /* Light gray */
}
.btn.bg-lg:focus, .btn.bg-lg:active {
  background-color: #d6dadc;
}
.btn.bg-wh {
  color: #002835;
}
.btn.bg-wh:hover {
  background-color: #f5f8f9; /* White */
}
.btn.bg-wh:focus, .btn.bg-wh:active {
  background-color: #fff;
}

/****************************************
  ==== OUTLINED
****************************************/

.btn.outlined {
  padding: 12px 20px; border: transparent 1px solid; background-color: transparent;
}
.btn.outlined:hover, .btn.outlined:focus, .btn.outlined:active {
  background-color: transparent;
}
.btn.outlined {
  border-color: #2196f3; color: #2196f3; /* standard */
}
.btn.outlined:hover {
  border-color: #26c6da;
}
.btn.outlined:focus, .btn.outlined:active {
  border-color: #05a7bd;
}
.btn.bg-db.outlined {
  border-color: #002835; color: #002835; /* Deep blue */
}
.btn.bg-db.outlined:hover {
  border-color: #434b55;
}
.btn.bg-db.outlined:focus, .btn.bg-db.outlined:active {
  border-color: #002835;
}
.btn.bg-ma.outlined {
  border-color: #e91e63; color: #e91e63; /* Magenta */
}
.btn.bg-ma.outlined:hover {
  border-color: #ec407a;
}
.btn.bg-ma.outlined:focus, .btn.bg-ma.outlined:active {
  border-color: #cb205c;
}
.btn.bg-li.outlined {
  border-color: #cddc39; color: #cddc39; /* Lime */
}
.btn.bg-li.outlined:hover {
  border-color: #d4e157;
}
.btn.bg-li.outlined:focus, .btn.bg-li.outlined:active {
  border-color: #b4c239;
}
.btn.bg-re.outlined {
  border-color: #f44336; color: #f44336; /* Red */
}
.btn.bg-re.outlined:hover {
  border-color: #f65f54;
}
.btn.bg-re.outlined:focus, .btn.bg-re.outlined:active {
  border-color: #d54036;
}
.btn.bg-pu.outlined {
  border-color: #9c27b0; color: #9c27b0; /* Purple */
}
.btn.bg-pu.outlined:hover {
  border-color: #ab47bc;
}
.btn.bg-pu.outlined:focus, .btn.bg-pu.outlined:active {
  border-color: #8a289e;
}
.btn.bg-bl.outlined {
  border-color: #2196f3; color: #2196f3; /* Blue */
}
.btn.bg-bl.outlined:hover {
  border-color: #42a6f5;
}
.btn.bg-bl.outlined:focus, .btn.bg-bl.outlined:active {
  border-color: #0990ce;
}
.btn.bg-te.outlined {
  border-color: #009688; color: #009688; /* Teal */
}
.btn.bg-te.outlined:hover {
  border-color: #26a69a;
}
.btn.bg-te.outlined:focus, .btn.bg-te.outlined:active {
  border-color: #05867c;
}
.btn.bg-gr.outlined {
  border-color: #8ac249;color: #8ac249; /* Green */
}
.btn.bg-gr.outlined:hover {
  border-color: #9bcb64;
}
.btn.bg-gr.outlined:focus, .btn.bg-gr.outlined:active {
  border-color: #7bac46;
}
.btn.bg-ye.outlined {
  border-color: #ffeb3b; color: #ffeb3b; /* Yellow */
}
.btn.bg-ye.outlined:hover {
  border-color: #ffee58;
}
.btn.bg-ye.outlined:focus, .btn.bg-ye.outlined:active {
  border-color: #decf3a;
}
.btn.bg-or.outlined {
  border-color: #ff9800; color: #ff9800; /* Orange */
}
.btn.bg-or.outlined:hover {
  border-color: #ffa726;
}
.btn.bg-or.outlined:focus, .btn.bg-or.outlined:active {
  border-color: #de8808;
}
.btn.bg-dg.outlined {
  border-color: #5a5a5b; color: #5a5a5b; /* Dark gray */
}
.btn.bg-dg.outlined:hover {
  border-color: #737373;
}
.btn.bg-dg.outlined:focus, .btn.bg-dg.outlined:active {
  border-color: #525356;
}
.btn.bg-mg.outlined {
  border-color: #9e9e9e; color: #9e9e9e; /* Medium gray */
}
.btn.bg-mg.outlined:hover {
  border-color: #acacac;
}
.btn.bg-mg.outlined:focus, .btn.bg-mg.outlined:active {
  border-color: #8c8d8f;
}
.btn.bg-lg.outlined {
  border-color: #f5f8f9; color: #f5f8f9; /* Light gray */
}
.btn.bg-lg.outlined:hover {
  border-color: #f6f9fa;
}
.btn.bg-lg.outlined:focus, .btn.bg-lg.outlined:active {
  border-color: #d6dadc;
}
.btn.bg-wh.outlined {
  border-color: #fff; color: #fff; /* White */
}
.btn.bg-wh.outlined:hover {
  border-color: #f5f8f9;
}
.btn.bg-wh.outlined:focus, .btn.bg-wh.outlined:active {
  border-color: #fff;
}

/****************************************
  ==== ICONS
****************************************/

.btn.ico:before {
  margin: 0 5px 0 0; font-size: 115%; position: relative;
}

/****************************************
  ==== SIZES
****************************************/

.btn.xl {
  padding: 20px 40px; font-size: 1.25em;
}
.btn.outlined.xl {
  padding: 19px 40px;
}
.btn.l {
  padding: 15px 30px; font-size: 1.125em;
}
.btn.outlined.l {
  padding: 14px 30px;
}
.btn.s {
  padding: 5px 15px; font-size: 0.875em;
}
.btn.outlined.s {
  padding: 4px 15px;
}
.btn.s.ico {
  padding: 5px 15px 5px 10px;
}
.btn.s.ico:before {
  margin: 0 9px 0 0; top: 1px;
}
.btn.xs {
  padding: 2px 10px; font-size: 0.675em;
}
.btn.outlined.xs {
  padding: 1px 10px;
}
.btn.wide {
  width: 100%;
}

/****************************************
  ==== OTHER
****************************************/

.btn.center {
  float: none; display: inline-block; margin: 0;
}
.btn.disabled, .btn.disabled:hover, .btn.disabled:focus, .btn.disabled:active {
  background-color: #737373 !important; color: #a5a5a5 !important; cursor: default;
}