.w-20{width:20% !important}
.w-40{width:40% !important}
.w-60{width:60% !important}
.w-80{width:80% !important}

.insert-row{
  color:#fff;
  margin:0 auto;
  display:block;
  font-size:40px;
  width:40px;
  height:40px;
  background:#ccc;
  border-radius:60%;
  box-shadow:0 0 10px rgba(0,0,0,.1);
}
.row > .layout-menu,
.col > .layout-menu{
  display:none;
}
.row:hover > .layout-menu,
.col:hover > .layout-menu{
  display:block;
  z-index:10;
}

.layout-menu.show{display:block !important}

#fields-bin{}

  #fields-bin .btn{margin:0 .2rem .2rem 0;}
  #fields-bin .btn:first-of-type{margin:0;}
  #layout-fields .btn{margin:1rem .2rem 0 0 !important;}

#fields-layout{
  position:relative;
  margin-bottom:50rem;
}
#fields-layout.layout-resume{
  width:11in;
  margin:0 auto;
}
  
  #fields-layout .row-group{
    padding: 0 0 2rem 0;
    margin: 0 0 2rem 0;
    border-bottom:1px solid;
  }
  
  #fields-layout .row{
    margin:0;
  }
  
  #fields-layout .col > .row:first-of-type{

  }
  
  #fields-layout > .widget{
    margin-left:-15px;
    margin-right:-15px;
  }
  
  #fields-layout input{
    border:1px dashed #ccc;
    background:transparent;
    display:block;
    width:100%;
    text-align:center;
  }
  #fields-layout input[name="h1"]{
    font-weight:normal;
    font-size: 250%;
    text-transform:uppercase;
  }
  #fields-layout input[name="h2"]{
    font-weight:bold;
    font-size: 110%;
  }
  
  #fields-layout.layout-resume input{
    text-align:left !important;
    padding: .3rem .6rem;
  }
  
  #fields-layout .dropdown-toggle{
    background:rgba(200,200,200,.4) !important;
  }
  #fields-layout .dropdown-toggle.bg-main{
    background:#9ebc2e !important;
    color:#fff;
  }

  #fields-layout .col{
    padding:.6rem;
    border:1px dashed #ccc;
  }
  #fields-layout.layout-resume .col{
    padding:.3rem;
    border:1px dashed #ccc;
  }
  
  #fields-layout .dropdown-item {
    padding: 0 .5rem;
    line-height:2rem;
    width:200px;
  }
  
    #fields-layout .col .widget:last-of-type{
      margin-bottom:0;
    }
  
  #fields-layout:not(.layout-resume) .btn{
    display:block;
    margin-bottom:2px;
    width:100%;
  }
  #fields-layout .btn:last-of-type{
    margin-bottom:0;
  }
  
  .row{position:relative;}

.layout-menu{
  position: absolute;
  top:0;
  right:0;
}

#fields-layout .layout-root-menu:only-child{
  width: 100%;
}
#fields-layout .layout-root-menu:only-child > i{
  font-size:5rem;
  width:5rem;
  left:calc(50% - 5rem);
}


#fields-layout .layout-root-menu:not(:only-child){
  animation-name:movestart;
  animation-duration:1s;
  font-size:1rem;
  right:-3rem;
  z-index:100   ;
}
@keyframes movestart{
  from{font-size:3rem;right:calc(50% - 5rem);}
}

/* FIELDS */

.levent,[draggable="true"]{cursor:pointer}
.levent:hover,[draggable="true"]:hover{color:#7b9617}

.wrapped{white-space:normal;text-align:center;}
.layout-sizer{width:calc(100% / 4);display:inline-block;border:1px solid #ccc;border-left:none;}
.layout-sizer,.layout-sizer i{line-height: 2rem !important;}
.layout-sizer:nth-of-type(1),
.layout-sizer:nth-of-type(5),
.layout-sizer:nth-of-type(9){border-left:1px solid #ccc}
.layout-sizer:nth-of-type(1),
.layout-sizer:nth-of-type(2),
.layout-sizer:nth-of-type(3),
.layout-sizer:nth-of-type(4),
.layout-sizer:nth-of-type(5),
.layout-sizer:nth-of-type(6),
.layout-sizer:nth-of-type(7),
.layout-sizer:nth-of-type(8){border-bottom:none}

#fields-layout [data-alias="profile_photo"]{
  height:250px !important;
  margin:0 auto !important;
}
#fields-layout [data-type="image"]{
  width:100%;
}
#fields-layout [data-type="addlist"],
#fields-layout [data-type="teams"],
#fields-layout [data-type="swimming"],
#fields-layout [data-type="dives"],
#fields-layout [data-type="meets"]{
  width:100%;
  height:200px !important;
}

  #fields-layout.layout-resume button[data-type="text"],
  #fields-layout.layout-resume button[data-type="number"],
  #fields-layout.layout-resume button[data-type="selectlist"],
  #fields-layout.layout-resume button[data-type="system"],
  #fields-layout.layout-resume button[data-type="checklist"]{
    padding:0 ;
    background:none;
    color:#222;
    text-align:left;
    border:none;
    width:auto ;
    display:inline-block;
  }
  
#fields-layout button[data-alias="city"] + button[data-alias="state"]::before,
#fields-layout button[data-alias="Last"] + button[data-alias="First"]::before{
  content:', ';
}

#fields-layout.layout-resume .field-item:not(h1):not(h2):not(h3){vertical-align: text-top;margin-right:.25rem}
#fields-layout.layout-resume .layout-menu .field-item{vertical-align:text-bottom;margin-right:0}

  #fields-layout h1::after,
  #fields-layout h2::after,
  #fields-layout h3::after{
    font-weight: 900;
    font-size:80%;
    content: "\00a0";
  }
  #fields-layout h1:hover::after,
  #fields-layout h2:hover::after,
  #fields-layout h3:hover::after{
    font-family: "Font Awesome 5 Pro";
    font-weight: 400;
    font-size:80%;
    content: "\00a0\f0b2";
    color:#eee;
  }
  
/******************************************** WEB TEMPLATE */ 

  #fields-layout:not(.layout-resume){
    margin:0 4rem;
  }
  
  #fields-layout h1{
    padding:.25rem;
    margin:0;
    font-weight:normal;
    font-size: 120%;
    text-transform:uppercase;
    background:#000;
    color:#fff !important;
  }
  #fields-layout h2{
    margin:0;
    padding:.6rem;
    font-weight:normal;
    font-size: 150%;
    text-transform:uppercase;
    text-align:center;
  }
  #fields-layout h3{
    margin:0;
    font-weight:normal;
    font-size: 130%;
    text-align:center;
  }

/******************************************** RESUME TEMPLATE */

  #fields-layout.layout-resume .layout-root-menu + .row [data-alias="Last"],
  #fields-layout.layout-resume .layout-root-menu + .row [data-alias="First"]{font-size:1.5rem !important}

  #fields-layout.layout-resume h1{
    padding:.25rem;
    margin:0;
    font-weight:normal;
    font-size: 120%;
    text-transform:uppercase;
    background:#000;
    color:#fff !important;
    text-align:left;
  }
  #fields-layout.layout-resume h2{
    font-weight:bold;
    font-size: 105%;
    text-transform:uppercase;
    padding:0;
    margin:0;
    text-align:left;
  }
  #fields-layout.layout-resume h3{
    font-weight:bold;
    font-size: 1rem;
    line-height: 1.5;
    padding:0;
    margin:0;
    text-align:left;
  }