/*! Note: 
    1. Before adding color codes, please check whether the color code is already present or not.
    2. Add the color codes in their series and arrange it alphabetically
    3. Follow the below naming conventions to add color code

          Color code        Color Variable
        ----------------------------------------
			#AAAAAA		- 	$color_AA
            #ABABAB     -   $color_AB
            #ABCABC     -   $color_ABC
            #ABCDEF     -   $color_ABCDEF
**/
/*Blue button*/
.e-btn.btn-blue {
  background-color: #265d8c;
  color: #ffffff;
}

.e-btn.btn-blue:hover, .e-btn.btn-blue:focus {
  background-color: #204d74;
  color: #ffffff;
}

.e-btn.btn-blue:active, .e-btn.btn-blue.e-active {
  background-color: #204d74;
  color: #ffffff;
}

.e-btn.btn-blue:disabled {
  background-color: #e0e0e0;
  box-shadow: none;
  color: #bcbcbc;
}

/*Gray button*/
.e-btn.btn-gray {
  background-color: #e0e0e0;
  color: #212121;
}

.e-btn.btn-gray:hover, .e-btn.btn-gray:focus {
  background-color: #bfbfbf;
  color: #212121;
}

.e-btn.btn-gray:active, .e-btn.btn-gray.e-active {
  background-color: #bfbfbf;
  color: #212121;
}

.e-btn.btn-gray:disabled {
  background-color: #e0e0e0;
  box-shadow: none;
  color: #bcbcbc;
}

/*Red button*/
.e-btn.btn-red {
  background-color: #ed5565 !important;
  color: #ffffff !important;
}

.e-btn.btn-red:hover, .e-btn.btn-red:focus {
  background-color: #e92f42 !important;
  color: #ffffff !important;
}

.e-btn.btn-red:active, .e-btn.btn-red.e-active {
  background-color: #e92f42 !important;
  color: #ffffff !important;
}

.e-btn.btn-red:disabled {
  background-color: #e0e0e0;
  box-shadow: none;
  color: #bcbcbc;
}

.e-btn:disabled {
  cursor: not-allowed;
}

.dlg-btn-secondary {
  color: #7f7f7f !important;
}

.confirmdlg-buttons {
  border-radius: 5px !important;
  font-size: 15px !important;
  height: 38px !important;
  margin-bottom: 15px !important;
  margin-left: 10px !important;
  margin-top: 15px !important;
  width: 125px !important;
}

.confirmdlg-secondary-button {
  margin-right: 21% !important;
}

.alertDlgButton {
  border-radius: 5px !important;
  font-size: 17px !important;
  height: 38px !important;
  margin-bottom: 15px !important;
  margin-right: 41% !important;
  margin-top: 15px !important;
  width: 19% !important;
}

.btn-smaller {
  font-size: 8px !important;
  height: 22px !important;
  line-height: 21px !important;
  padding: 0px 6px !important;
}

.icon-button {
  height: 26px;
  padding: 2px;
  width: 28px;
  border-radius: 50%;
  cursor: pointer;
  color: #141414 !important;
  position: absolute;
}

.icon-button:hover {
  background: rgba(158, 158, 158, 0.2) !important;
}

.e-play-icon::before {
  content: "\e798";
}

.e-pause-icon::before {
  content: "\e753";
}

/*.e-btn.e-flat:active, .e-btn.e-flat.e-active {
    background-color: transparent !important;
}*/
.e-btn.e-danger {
  background-color: #E85959 !important;
}

.e-btn.e-danger:hover {
  background-color: #EA4949 !important;
}

.e-btn.e-success {
  background-color: #4CAF50 !important;
}

.e-btn.e-success:hover {
  background-color: #47CD4C !important;
}

.informationdlg-button {
  border-radius: 5px !important;
  font-size: 15px !important;
  height: 38px !important;
  margin-bottom: 15px !important;
  margin-left: 10px !important;
  margin-top: 15px !important;
}

.alertDlgPrimaryButton {
  background-color: #2196f3 !important;
  border-color: transparent !important;
  color: #fff !important;
}

.alertDlgPrimaryButton:hover {
  background-color: #204d74 !important;
}

.buttonfontsize {
  font-size: 13px !important;
}