/* 外面那圈 */

.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgb(215, 141, 64);
}

/* 按下去時 */

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #d78d40;
  border-color: #d78d40;
}

/* 按下去彈出來的 但是btn沒有focus 只有hover */

.btn-primary.focus, .btn-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(215, 141, 64, 0.5);
}

.btn-primary.focus, .btn-primary:focus, .btn-primary:hover {
  color: #fff;
  background-color: #d78d40;
  border-color: #d78d40;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* 按下去之後 沒有按下去時的顏色 */

.btn:not(:disabled):not(.disabled) {
  cursor: pointer;
}

.btn-block {
  display: block;
  width: 100%;
}

/* 橘色btn */

.btn-orange {
  color: #fff;
  background-color: #d78d40;
  border-color: #d78d40;
  font-weight: 700;
}

.btn-orange:hover {
  background-color: rgba(215, 141, 64);
  text-decoration: none;
  border-color: rgba(215, 141, 64);
  transform: scale(1.03);
  transition: 0.3s;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* 按下去之後 沒有按下去時的顏色 */

.btn-orange:focus, .btn-orange.focus {
  outline: 0;
  background-color: #d78d40;
  border-color: #d78d40;
}

.btn-orange:not(:disabled):not(.disabled).active, .btn-orange:not(:disabled):not(.disabled):active {
  background-color: rgba(215, 141, 64, 0.8);
  text-decoration: none;
  border-color: rgba(215, 141, 64, 0.8);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* 黃色btn */

.btn-yellow {
  color: #fff;
  background-color: #eccd76;
  border-color: #eccd76;
  font-weight: 700;
}

.btn-yellow:hover {
  outline: 0;
  background-color: rgba(236, 205, 118);
  text-decoration: none;
  border-color: rgba(236, 205, 118);
  transform: scale(1.03);
  transition: 0.3s;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.btn-yellow:focus, .btn-yellow.focus {
  outline: 0;
  background-color: #eccd76;
  border-color: #eccd76;
}

.btn-yellow:active, .btn-yellow.active {
  outline: 0;
  color: #fff;
  background-color: #eccd76;
  border-color: #eccd76;
}

.btn-yellow:not(:disabled):not(.disabled).active, .btn-yellow:not(:disabled):not(.disabled):active {
  background-color: rgba(236, 205, 118, 0.8);
  text-decoration: none;
  border-color: rgba(236, 205, 118, 0.8);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.btn-yellow:not(:disabled):not(.disabled).active:focus, .btn-yellow:not(:disabled):not(.disabled):active:focus, .show > .btn-yellow.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(236, 205, 118, 0.5);
}

.btn-yellow.focus, .btn-yellow:focus {
  box-shadow: 0 0 0 0.2rem rgba(236, 205, 118, 0.3);
}

.btn-yellow.focus, .btn-yellow:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(223, 130, 78, 0.25);
}

/* login登入btn */

.btn.btn-primary.btn-block.btn-user {
  color: #fff;
  background-color: #d78d40;
  border-color: #d78d40;
}

.btn.btn-primary.btn-block.btn-user:hover {
  color: #fff;
  text-decoration: none;
  background-color: rgba(215, 141, 64);
  border-color: rgba(215, 141, 64);
  transform: scaleX(1.05);
  transition: 0.5s;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* 紅色btn */

.btn-red {
  color: #fff;
  background-color: #e34d43;
  border-color: #e34d43;
  font-weight: 700;
}

.btn-red:hover {
  outline: 0;
  background-color: rgba(227, 77, 67);
  text-decoration: none;
  border-color: rgba(227, 77, 67);
  transform: scale(1.03);
  transition: 0.3s;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.btn-red:focus, .btn-red.focus {
  outline: 0;
  background-color: #e34d43;
  border-color: #e34d43;
}

.btn-red:active, .btn-red.active {
  outline: 0;
  color: #fff;
  background-color: #e34d43;
  border-color: #e34d43;
}

.btn-red:not(:disabled):not(.disabled).active, .btn-red:not(:disabled):not(.disabled):active {
  background-color: rgba(227, 77, 67, 0.8);
  text-decoration: none;
  border-color: rgba(227, 77, 67, 0.8);
  box-shadow: 0 0 0 0.2rem rgba(227, 77, 67, 0.8);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.btn-red:not(:disabled):not(.disabled).active:focus, .btn-red:not(:disabled):not(.disabled):active:focus, .show > .btn-red.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(227, 77, 67, 0.5);
}

.btn-red.focus, .btn-red:focus {
  box-shadow: 0 0 0 0.2rem rgba(227, 77, 67, 0.3);
}

/* 藍色btn */

.btn-blue {
  color: #fff;
  background-color: #6fc0e3;
  border-color: #6fc0e3;
  font-weight: 700;
}

.btn-blue:hover {
  outline: 0;
  background-color: rgba(111, 192, 227);
  text-decoration: none;
  border-color: rgba(111, 192, 227);
  transform: scale(1.03);
  transition: 0.3s;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.btn-blue:focus, .btn-blue.focus {
  outline: 0;
  background-color: rgba(111, 192, 227);
  border-color: rgba(111, 192, 227);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.btn-blue:active, .btn-blue.active {
  outline: 0;
  color: #fff;
  background-color: rgba(111, 192, 227);
  border-color: rgba(111, 192, 227);
}

.btn-blue:not(:disabled):not(.disabled).active, .btn-blue:not(:disabled):not(.disabled):active {
  background-color: rgba(111, 192, 227, 0.8);
  text-decoration: none;
  border-color: rgba(111, 192, 227, 0.8);
  box-shadow: 0 0 0 0.2rem rgba(111, 192, 227, 0.8);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.btn-blue:not(:disabled):not(.disabled).active:focus, .btn-blue:not(:disabled):not(.disabled):active:focus, .show > .btn-blue.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(111, 192, 227, 0.5);
}

.btn-blue.focus, .btn-blue:focus {
  box-shadow: 0 0 0 0.2rem rgba(111, 192, 227, 0.3);
}

/* 灰色btn */

.btn-gray {
  color: #fff;
  background-color: #aaaaaa;
  border-color: #aaaaaa;
  font-weight: 700;
}

.btn-gray:hover {
  outline: 0;
  background-color: rgba(170, 170, 170);
  text-decoration: none;
  border-color: rgba(170, 170, 170);
  transform: scale(1.03);
  transition: 0.3s;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.btn-gray:focus, .btn-gray.focus {
  outline: 0;
  background-color: #aaaaaa;
  border-color: #aaaaaa;
}

.btn-gray:active, .btn-gray.active {
  outline: 0;
  color: #fff;
  background-color: #aaaaaa;
  border-color: #aaaaaa;
}

.btn-gray:not(:disabled):not(.disabled).active, .btn-gray:not(:disabled):not(.disabled):active {
  background-color: rgba(170, 170, 170, 0.8);
  text-decoration: none;
  border-color: rgba(170, 170, 170, 0.8);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.btn-gray:not(:disabled):not(.disabled).active:focus, .btn-gray:not(:disabled):not(.disabled):active:focus, .show > .btn-gray.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(170, 170, 170, 0.5);
}

.btn-gray.focus, .btn-gray:focus {
  box-shadow: 0 0 0 0.2rem rgba(170, 170, 170, 0.3);
}

/* 縮小版btn */

.btn-small {
  width: 60%;
}

.row.device-config-detailBtn-row {
  margin-top: 30px;
}

.btn-min {
  max-width: 100px;
}

.btn-toggle:not(:disabled):not(.disabled).active, .btn-toggle:not(:disabled):not(.disabled):active:focus, .show > .btn-toggle.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(215, 141, 64, 0.5);
}

.btn-toggle.focus, .btn-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(215, 141, 64, 0.5);
}

/* Swal Btn */

.SwalBtnYellow {
  background-color: #eccd76 !important;
}

.SwalBtnYellow:focus {
  box-shadow: 0 0 0 0.2rem rgba(236, 205, 118, 0.5) !important;
}

.SwalBtnOrange {
  background-color: #d78d40 !important;
}

.SwalBtnOrange:focus {
  box-shadow: 0 0 0 0.2rem rgba(215, 141, 64, 0.5) !important;
}

.SwalBtnRed {
  background-color: #e34d43 !important;
}

.SwalBtnRed:focus {
  box-shadow: 0 0 0 0.2rem rgba(227, 77, 67, 0.5) !important;
}

/* 透明按鈕 */

.btnTrans {
  background-color: transparent !important;
  background: none !important;
  color: #d78d40 !important;
  font-weight: 700 !important;
  border: none !important;
  font-size: 20px !important;
  box-shadow: none !important;
}

.btnTrans.focus, .btnTrans:focus {
  box-shadow: none;
  border: none;
}

.btnTrans.focus, .btnTrans:focus, .btnTrans:hover {
  color: #d78d40;
  background-color: transparent;
  border: none;
}

.btnTrans:hover {
  background-color: transparent;
  color: rgba(215, 141, 64, 0.6);
  font-weight: 700;
  border: none;
  transform: translate(-10px,-5px) scale(1.1);
  transition: 0.3s;
}

.btnTransRed {
  background-color: transparent !important;
  background: none !important;
  color: #e34d43 !important;
  font-weight: 700 !important;
  border: none !important;
  font-size: 20px !important;
  box-shadow: none !important;
}

.btnTransRed:not(:disabled):not(.disabled).active:focus, .btnTransRed:not(:disabled):not(.disabled):active:focus, .show > .btnTransRed.dropdown-toggle:focus {
  box-shadow: none;
}

.btnTransRed:not(:disabled):not(.disabled).active, .btnTransRed:not(:disabled):not(.disabled):active, .show > .btnTransRed.dropdown-toggle {
  color: #e34d43;
  background-color: transparent;
  border: none;
}

.btnTransRed.focus, .btnTransRed:focus {
  box-shadow: none;
  border: none;
}

.btnTransRed.focus, .btnTransRed:focus, .btnTransRed:hover {
  color: #e34d43;
  background-color: transparent;
  border: none;
}

.btnTransRed:hover {
  background-color: transparent;
  color: rgba(227, 77, 67, 0.6);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  font-weight: 700;
  border: none;
  transform: scale(1.3);
  transition: 0.3s;
}

/* 按鈕字 */

.btn.btn-text-dark {
  color: #181c32;
}

.btn-check:active + .btn.btn-active-text-dark, .btn-check:checked + .btn.btn-active-text-dark, .btn.btn-active-text-dark.active, .btn.btn-active-text-dark.show, .btn.btn-active-text-dark:active:not(.btn-active), .btn.btn-active-text-dark:focus:not(.btn-active), .btn.btn-active-text-dark:hover:not(.btn-active), .show > .btn.btn-active-text-dark {
  color: #181c32;
}

.btn.btn-text-muted {
  color: #a1a5b7;
}

.btn-check:active + .btn.btn-active-text-muted, .btn-check:checked + .btn.btn-active-text-muted, .btn.btn-active-text-muted.active, .btn.btn-active-text-muted.show, .btn.btn-active-text-muted:active:not(.btn-active), .btn.btn-active-text-muted:focus:not(.btn-active), .btn.btn-active-text-muted:hover:not(.btn-active), .show > .btn.btn-active-text-muted {
  color: #a1a5b7;
}