:root{
  --placeholder-color: rgba(170,170,170,0.5);
  --handle-color:#444;
}

/*_______________________________________________________________________________________________*/
/* BUILDER TOOL BOX STYLING */
button, .rb-save-load-btn, #rb-style-change{
  cursor: pointer;
  color:#6e79d6;
  text-decoration: none;
  font-family:sans-serif;
  font-weight: bold;
  font-size:medium;
  align-items: center; 
  /* keeps controls above content if they overlap */
  z-index: 10;
  background: var(--rb-bg, white);
  padding:5px;
  border:1px solid #aaa;
  border-radius: 2px;
  /* text-transform: uppercase; */
}
#rb-style-change{
  text-transform: capitalize;
}
.rb-download-arrow{
  font-weight: bold;
}
.rb-delete-sortable{
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  font-weight: bold;
}

.rb-flex-wrap{
  display: flex;
  flex-wrap: wrap;
  gap:10px;
}
#rb-file-controls,#rb-section-controls{
  font-family: sans-serif;
  /* text-transform: uppercase; */
  
  margin-top:2rem;
}
legend{
  font-weight: bold;
}
#rb-toolbox{
  max-width: 8.5in;
  margin: 0 auto;
}

/* li{
  list-style-type: none;
} */
/*________________________________________________________________________*/
/*Sortable styling*/
/* .rb-controls{
  float: right;
  font-size:medium;
  display:flex;
  margin-top: .2rem;
  margin-bottom: 0.2rem;
} */

/* every element that has a .rb-controls child needs this */
:has(> .rb-controls) {
  position: relative;
}

.rb-controls {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  /* keeps controls above content if they overlap */
  z-index: 10;
  /* only show on hover so they don't obscure content */
  opacity: 0;
  transition: opacity 0.15s;
  /* fade out the content behind the controls */
  /* background: linear-gradient(to left, var(--rb-bg, white) 80%, transparent); */
  background: var(--rb-bg, white);
  padding:5px;
  /* give the gradient room to fade */
  /* padding-left: 10px; 
  padding-right: 4px;
  padding-top: 5px;
  padding-bottom: 5px; */
  border-radius: 2px;
}

:has(> .rb-controls):hover > .rb-controls {
  opacity: 1;
}

.rb-entry{
  margin:10px 0;
}
li{
  min-height: 3rem;
  margin:10px 0;
}

.rb-handle{
  cursor:grab;
  /* margin-left: 2em; */
  &:active {
    cursor: move;
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
  }
  /* if we want our hamburger drag lines in CSS */
  /* &:before {
    content:""; 
    display: inline-block;
    width: 15px;
    height: 12px;
    background: linear-gradient(
      to bottom,
      var(--handle-color) 0, var(--handle-color) 2px,
      transparent 2px, transparent 6px,
      var(--handle-color) 6px, var(--handle-color) 8px,
      transparent 8px, transparent 10px,
      var(--handle-color) 10px, var(--handle-color) 12px
    );
    filter: brightness(80%);
  } */
}
.rb-sortable-list > *:not(.rb-section-header):not(.rb-controls){
  border:2px solid rgb(114, 114, 114);
  border-radius: 5px;
  padding:2px;
} 
/* .rb-sortable-list > :is(div, li):not(.rb-section-header):not(.rb-controls) {
  border: 2px solid rgb(114, 114, 114);
  border-radius: 5px;
  padding: 2px;
} */
.rb-sortable-ghost {
  opacity: 0.4;
}

.rb-do-not-export{
  opacity: 50%;
}




/*_______________________________________________________________________________________________*/
/* DROPDOWN CSS */
/* Dropdown Button */
.rb-dropbtn {
    background-color: rgb(211, 110, 84);
    color: white;
    padding: 5px 10px ;
    font-size: 25pt;
    border: none;
    cursor: pointer;
}

/* Dropdown button on hover & focus */
.rb-dropbtn:hover, .rb-dropbtn:focus {
  background-color: rgb(165, 74, 52);;
}
  
/* The container <div> - needed to position the dropdown content */
.rb-dropdown {
  position: relative;
  display: inline-block;
  float: right;
}
  
/* Dropdown Content (Hidden by Default) */
.rb-dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
  
/* Links inside the dropdown */
.rb-dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
  
/* Change color of dropdown links on hover */
.rb-dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu (use JS to add this class to the .rb-dropdown-content container when the user clicks on the dropdown button) */
.rb-show {
  display:block;
}


/* styles for the button section below the resume */
#rb-file-input{
  display:none;
}

/*_______________________________________________________________________________________________*/
/* DEFAULT TEXT FOR ALL DIVS */
.rb-ui-sortable>li:empty:after{
  content:'<span class="handle">&#8645;</span>';
  color: rgb(179, 15, 15);
}

#rb-email:empty:before{
  content:"youremail@domain.com";
  color: rgb(172, 172, 172);
}
#rb-website:empty:before{
  content:"https://www.fakesite.com/";
  color: rgb(172, 172, 172);
}
[contenteditable]:empty::before {
  content: attr(data-placeholder);
  color: var(--placeholder-color);
  font-style: italic;
  pointer-events: none; /* Allows clicking through the text to focus the div */
}
.rb-section{
    margin-top:10pt;
}
.rb-section-header:empty:before{
  content:"Section, eg. Education, Work Experience, Skills, Activities";
  color: rgb(172, 172, 172);
}
.rb-responsibilities>li:empty:before{
  content:"Responsibilites list them here";
  color: rgb(172, 172, 172);
}
.rb-skill-list>li:empty:before{
  content:"List some of your skills or certs";
  color: rgb(172, 172, 172);
}
.rb-skill-list .rb-title:empty:before{
  content:"Type of Skills/certs, e.g. Language Skills, Computer Skills,etc ";
  color: rgb(172, 172, 172);
}
/*_______________________________________________________________________________________________*/
/* VISIBILITY CHECKBOX CONTROL */
.rb-hide-label .rb-hide-toggle {
    appearance: none;
    background-color: #dfe1e4;
    border-radius: 72px;
    border-style: none;
    flex-shrink: 0;
    height: 20px;
    margin: 0;
    position: relative;
    width: 30px;
  }

  .rb-hide-label .rb-hide-toggle::before {
    bottom: -6px;
    content: "";
    left: -6px;
    position: absolute;
    right: -6px;
    top: -6px;
  }

  .rb-hide-label .rb-hide-toggle,
  .rb-hide-label .rb-hide-toggle::after {
    transition: all 100ms ease-out;
  }

  .rb-hide-label .rb-hide-toggle::after {
    background-color: #fff;
    border-radius: 50%;
    content: "";
    height: 14px;
    left: 3px;
    position: absolute;
    top: 3px;
    width: 14px;
  }

  .rb-hide-label input[type=checkbox] {
    cursor: default;
  }

  .rb-hide-label .rb-hide-toggle:hover {
    background-color: #c9cbcd;
    transition-duration: 0s;
  }

  .rb-hide-label .rb-hide-toggle:checked {
    background-color: #6e79d6;
  }

  .rb-hide-label .rb-hide-toggle:checked::after {
    background-color: #fff;
    left: 13px;
  }

  .rb-hide-label :focus:not(.focus-visible) {
    outline: 0;
  }

  .rb-hide-label .rb-hide-toggle:checked:hover {
    background-color: #535db3;
  }
  /* end visibility checkbox styling */