/* Switch button */

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: #2196F3;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* Component */

.wp-easy-container-main {
  background: #dedede;
  margin: 10px auto;
  padding: 20px;
  width: 80%;
  border-radius: 10px;
}

.wp-easy-container-main::before,
.wp-easy-container-main::after {
  content: '';
  display: table;
  clear: both;
}

.wp-dynamic-percent-wrap {
  position: relative;
  height: 10px;
  border: solid 1px #040404;
  width: 200px;
  display: inline-block;
}

.wp-dynamic-percent-wrap .wp-dynamic-percent {
  background: #8c1366;
  padding: 0.1%;
  position: absolute;
  width: 100%;
  height: 100%;
}

.wp-static-percent-wrap {
  position: relative;
  height: 10px;
  border: solid 1px #040404;
  width: 200px;
  display: inline-block;
}

.wp-static-percent-wrap .wp-static-percent {
  background: #14731c;
  padding: 0.1%;
  position: absolute;
  width: 100%;
  height: 100%;
}

.wp-easy-container-top {
  padding: 10px;
  display: flex;
}

.wp-easy-container-top .left-side {
  width: 65%;
}

.wp-easy-container-top p {
  margin: 0px;
}

.wp-easy-container-top .form-group {
  margin-bottom: 10px;
  font-size: 12pt;
}

.static-console-wrapper {
  padding: 30px 0px;
  display: flex;
}

.static-console-wrapper .console-content {
  display: flex;
  width: 50%;
  flex-wrap: wrap;
}

button.generate-static-file {
  border: unset;
  padding: 5px 26px;
  background-color: #4526a9;
  color: white;
  font-size: 12pt;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 3px 1px rgba(120, 120, 120, 1);
  -moz-box-shadow: 0px 0px 3px 1px rgba(120, 120, 120, 1);
  box-shadow: 0px 0px 3px 1px rgba(120, 120, 120, 1);
  margin-right: 10px;
}

button.check-update-file {
  border: unset;
  padding: 5px 26px;
  background-color: #4526a9;
  color: white;
  font-size: 12pt;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 3px 1px rgba(120, 120, 120, 1);
  -moz-box-shadow: 0px 0px 3px 1px rgba(120, 120, 120, 1);
  box-shadow: 0px 0px 3px 1px rgba(120, 120, 120, 1);
}

.static-console-wrapper .percent-wrapper {
  display: block;
  width: 50%;
  padding-top: 7px;
}

.static-console-wrapper .percent-wrapper .side {
  width: 100%;
  display: inline-flex;
}

.static-console-wrapper .percent-wrapper .bottom {
  display: block;
  justify-content: center;
}

.static-console-wrapper .percent-wrapper #count-em {
  margin-left: 20px;
}

.static-console-wrapper #logs {
  padding-left: 15px;
}

#percent-bar {
  width: 70%;
  border: solid 2px #3d2e6b;
  background: white;
  position: relative;
  height: 10px;
  border-radius: 0px;
  overflow: hidden;
  margin-left: 15px;
  margin-top: 3px;
}

#percent-bar .percent {
  height: 5px;
  background: #0050a5;
  padding: 5px;
  position: absolute;
  -webkit-transition: width 1s;
  transition: width 1s;
}

.wp-es-container {
  width: 100%;
  margin: auto;
}

.CodeMirror {
  border: 1px solid #eee;
  height: 50%;
}

#TB_window {
  width: 90% !important;
  margin-left: 0px !important;
  left: 5% !important;
}

#TB_ajaxContent {
  width: 98% !important;
  position: relative;
}

.top-modal {
  display: flex;
  flex-wrap: wrap;
}

.top-modal .edit-title,
.top-modal .btn-modal {
  width: 50%;
}

.top-modal .btn-modal .button-primary {
  float: right;
  margin: 10px;
  padding: 0px 65px;
}

.top-modal::before,
.top-modal::after {
  content: "";
  display: table;
  clear: both;
}

.modal_close_btn::after {
  content: '\00D7';
  font-size: 25pt;
  color: #000;
  font-weight: bold;
  cursor: pointer;
}

.wp-es-container #refresh {
  background-color: #4526a9;
  color: #071011;
  border: unset;
  padding: 4px 15px;
  border-radius: 6px;
  -webkit-box-shadow: 0px 0px 3px 1px rgba(120, 120, 120, 1);
  -moz-box-shadow: 0px 0px 3px 1px rgba(120, 120, 120, 1);
  box-shadow: 0px 0px 3px 1px rgba(120, 120, 120, 1);
  color: white;
}

.wp-es-container #refresh:hover,
button.check-update-file:hover,
button.generate-static-file:hover {
  background: -moz-linear-gradient(180deg, rgba(69, 38, 169, 1) 0%, rgba(55, 32, 130, 1) 100%);
  background: -webkit-linear-gradient(180deg, rgba(69, 38, 169, 1) 0%, rgba(55, 32, 130, 1) 100%);
  background: linear-gradient(180deg, rgba(69, 38, 169, 1) 0%, rgba(55, 32, 130, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#4526a9", endColorstr="#372082", GradientType=1);
}

.wp-es-container #refresh:active,
button.check-update-file:active,
button.generate-static-file:active {
  background: -moz-linear-gradient(180deg, rgba(69, 38, 169, 1) 0%, rgba(40, 24, 92, 1) 100%);
  background: -webkit-linear-gradient(180deg, rgba(69, 38, 169, 1) 0%, rgba(40, 24, 92, 1) 100%);
  background: linear-gradient(180deg, rgba(69, 38, 169, 1) 0%, rgba(40, 24, 92, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#4526a9", endColorstr="#28185c", GradientType=1);
}

.wp-es-row {
  margin-bottom: 15px;
}

.wp-es-row::before {
  content: '';
  display: table;
  clear: both;
}

.wp-es-row::after {
  content: '';
  display: table;
  clear: both;
}

.wp-es-row .wp-es-col-left {
  float: left;
}

.wp-es-row .wp-es-col-right {
  float: right;
}

.es-button-group{
  float: right;
  padding: 25px;
}

table#datatable {
  border-collapse: collapse;
  width: 100%;
}

table#datatable thead {
  border-bottom: solid 1px #000;
}

table#datatable thead tr th {
  padding: 10px;
}

table#datatable tr td {
  border-bottom: solid 1px #000;
  padding: 10px 0px;
  text-align: center;
  width: 20%;
}

table#datatable tr:nth-child(odd) td {
  border-top: solid 1px #000;
}

.table-wrapper .pagination {
  padding: 20px 0px;
  float: right;
}

.table-wrapper::before,
.table-wrapper::after {
  content: "";
  display: table;
  clear: both;
}

.table-wrapper .pagination button {
  padding: 2px 9px;
  font-size: 12pt;
  margin-right: 3px;
}

#static-update-view {
  height: 530px;
}

#static-merge-update {
  position: absolute;
  right: 26px;
}

#static-paste-update {
  position: absolute;
  right: 250px;
}

#es-loader {
  display: none;
}

.es-container {
  width: 100%;
}

.es-tpl-content .form-group {
  margin-bottom: 20px;
}

.es-tpl-content .es-button-group .form-group {
  display: flex;
  flex-wrap: wrap;
}

table#backup-dt {
  border-collapse: collapse;
  width: 100%;
}

table#backup-dt tr td {
  border-bottom: solid 1px #000;
  padding: 10px 0px;
  text-align: center;
  width: 15%;
}

table#backup-dt tr:nth-child(odd) td {
  border-top: solid 1px #000;
}

table#backup-dt tr td {
  position: relative;
}

.table-wrapper .pagination {
  padding: 20px 0px;
  float: right;
}

.table-wrapper::before,
.table-wrapper::after {
  content: "";
  display: table;
  clear: both;
}

.table-wrapper .pagination button {
  padding: 2px 9px;
  font-size: 12pt;
  margin-right: 3px;
}

#es_optimize_form .submit .button {
  margin-right: 10px;
}