/* --- MBESL Interface --- */
#easy-social-links-interface {
  max-width: 850px;
}

.flex-grid {
  flex-basis: 50%;
  display: flex;
  flex-wrap: wrap;
}
.col {
  flex-grow: 1;
  width: 50%;
}
.easy-social-links-interface-header {
  flex-grow: 2;
  width: 100%;
}

#easy-social-links-interface input {
  min-height: 24px;
}

.social-media-selection {
  max-width:300px;
}

.right-side {
  max-width: 300px;
}

#mbesl-preview {
  border-radius: 3px;
  padding: 1em;
  background-color: #ffff;
}
.mbesl-preview-container h2 {
  margin-top: 0;
  padding: 0;
}

.donate-card {
  text-align: center;
}

/* --- Social media --- */

#social-medias {
  border-collapse: collapse;
  width: 95%;
  /*max-width: 250px;*/
}
#social-medias div.social-media-card {
  padding: 0;
  border: solid 2px #ccc;
  border-radius: 3px;
  margin: .25em;
}
.social-media-header {
  padding: .5em;
  background-color: #ddd;
}
.social-media-header div {
  display: inline-flex;
}

#social-medias .icon-col {
  min-width:20px;
}
#social-medias .label-col {
  min-width:75px;
}
#social-medias .toggle-col {
  min-width:10px;
}
.social-media-content-body .social-media-options {
  padding: .5em;
}
.social-media-options p {
  display: inline-flex;
  margin: 0;
  padding: 2px 0;
  width: 100%;
}
.social-media-options p label {
  min-width: 40px;
  font-weight: bold;
}
.social-media-options p input {
  font-size:12px;
  width: 100%;
  height: .25em !important;
  padding: .25em !important;
}

.social-media-card.active {
  border-color: #3399ff38 !important;
}
.social-media-card.active .social-media-header {
  background-color: #3399ff38 !important;
  cursor: move;
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}



#social-medias div.social-media-card:hover {
}

#social-medias .social-media-card.active:hover {
  border-color: #3399ff6e !important;
  background-color: #fefefa;
}
#social-medias .social-media-card.active:hover .social-media-header {
  background-color: #3399ff6e !important;
}

#social-medias div.social-media-card.active:hover .social-media-header {
  position: relative;
}
#social-medias div.social-media-card.active:hover .social-media-header::after {
  font: normal normal normal 14px/1 ForkAwesome;
  position: absolute;
  content: "\f047";
  right: 10px;
  top: 10px;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}


/* --- Shortcode --- */
#mbesl-shortcode {
  color: #0071a1;
  border-color: #0071a1;
}
input#mbesl-shortcode {
  height: 30px;
}



/* --- Sortable --- */

.sortable-placeholder {
  margin-bottom: 0;
  margin: .5em;
  padding: 1em;
  border: dotted 2px #ddd;
  border-radius: 3px;
  background-color: #efefef;
}
.sortable {
  /*border: dotted 1px #000;*/
}





/* --- Switch --- */

.uk-switch {
  position: relative;
  display: inline-block;
  height: 17px;
  width: 30px;
}

/* Hide default HTML checkbox */
.uk-switch input {
  display:none !important;
}
/* Slider */
.uk-switch-slider {
  background-color: rgba(0,0,0,0.22);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-radius: 250px;
  bottom: 0;
  cursor: pointer;
  transition-property: background-color;
  transition-duration: .2s;
  box-shadow: inset 0 0 2px rgba(0,0,0,0.07);
}
/* Switch pointer */
.uk-switch-slider:before {
  content: '';
  background-color: #fff;
  position: absolute;
  width: 15px;
  height: 15px;
  left: 1px;
  bottom: 1px;
  border-radius: 50%;
  transition-property: transform, box-shadow;
  transition-duration: .2s;
}
/* Slider active color */
input:checked + .uk-switch-slider {
  background-color: #39f !important;
}
/* Pointer active animation */
input:checked + .uk-switch-slider:before {
  transform: translateX(13px);
}

/* Modifiers */
.uk-switch-slider.uk-switch-on-off {
  background-color: #f0506e;
}
input:checked + .uk-switch-slider.uk-switch-on-off {
  background-color: #32d296 !important;
}

/* Style Modifier */
.uk-switch-slider.uk-switch-big:before {
  transform: scale(1.2);
  box-shadow: 0 0 6px rgba(0,0,0,0.22);
}
.uk-switch-slider.uk-switch-small:before {
  box-shadow: 0 0 6px rgba(0,0,0,0.22);
}
input:checked + .uk-switch-slider.uk-switch-big:before {
  transform: translateX(26px) scale(1.2);
}

/* Inverse Modifier - affects only default */
.uk-light .uk-switch-slider:not(.uk-switch-on-off) {
  background-color: rgba(255,255,255,0.22);
}



/* --- Snackbar --- */
#mbesl-status p {
  margin: 0;
}

/* The snackbar - position it at the bottom and in the middle of the screen */
#mbesl-status {
  visibility: hidden; /* Hidden by default. Visible on click */
  /*min-width: 250px;  Set a default minimum width */
  margin-left: -125px; /* Divide value of min-width by 2 */
  background-color: #333; /* Black background color */
  color: #fff; /* White text color */
  text-align: center; /* Centered text */
  border-radius: 2px; /* Rounded borders */
  padding: 1em; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 1; /* Add a z-index if needed */
  right: 30px; /* Center the snackbar */
  bottom: 30px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#mbesl-status.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}