/** Layout **/
section.layout .dd{
    margin-bottom: 15px;
    background: #ececec;
    border-top: 10px solid #c7c7c7;
    margin-top: 45px;
    position: relative;
    padding: 5px 10px 5px 25px;
}
section.layout .dd:before{
    position: absolute;
    top: -35px;
    left: 20px;
    color: #a7a7a7;
    line-height: 30px;
    font-size: 30px;
    font-weight: 500;
    letter-spacing: -1px;
    content: attr(data-before-content);
}
.closed-to-drag::after{
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(235, 235, 235, 0.7);
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    content: attr(data-after-content);
}
.dd-name{
    font-size: 16px;
    display: block;
    color: #5d5454;
}
.dd-description{
    display: block;
    font-size: 12px;
    color: #7b7b7b;
    font-weight: 300;
}
.layout .dd-handle:hover:before{
  background: #5d5454 url(draggable.png) no-repeat 6px 50%!important;
}
.layout li:not(.disabled) .dd-handle:hover{
    background:#fafafa!important;
    border: 1px solid #ccc!important;
}
.dd-handle-nodrag {
    display: block;
    margin: 5px 0;
    cursor: move;
    padding: 7px 15px;
    color: #333;
    text-decoration: none;
    font-weight: 400;
    border: 1px solid #ccc;
    background: #fafafa;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.layout .dd-handle-nodrag:before {background: #f3f3f3!important; background-image:none;box-sizing: border-box!important;border: 1px solid #ccc!important;border-right: 0!important;}
.layout .dd-handle-nodrag{cursor: default!important;overflow: hidden;}
.layout .dd-handle-nodrag:hover {background: #fafafa!important;border: 1px solid #ccc!important;}
.layout .dd-handle-nodrag:hover:before{background: #f3f3f3!important;background-image:none;}
.layout li.disabled:after{height: 65px;padding: 0;line-height: 3.5;}

a.config{position: absolute;right: 0;top: 0;width: 70px;background: #ffffff;height: 100%;cursor: pointer;padding: 20px;text-align: center;border: 1px solid #ccc;z-index: 1;}
.layout a.config, .dd-dragel-layout a.config{right: 69px;}
a.config .dd-edit i {font-size: 1.6em;color: #5d5454;transform: scale(.8);}
a.config:hover .dd-edit i{transform: scale(1);-webkit-animation: girar360 2s linear infinite alternate;}
@keyframes girar360 {
    0%   {-ms-transform: rotate(0deg);-webkit-transform: rotate(0deg);transform: rotate(0deg);}
    100%   {-ms-transform: rotate(360deg);-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
a.preview{position: absolute;right: 0px;top: 0;width: 70px;background: #ffffff;height: 100%;cursor: pointer;padding: 20px;text-align: center;border: 1px solid #ccc;z-index: 1;}
a.preview i {font-size: 1.6em;color: #5d5454;transform: scale(.8);}
a.preview:hover .dd-edit i{transform: scale(1);}

/* Organizador */
section.organizador{
  display: block;
  margin-bottom: 15px;
}
.block{
    display: block;
}
.bb{
    width: 40%;
    float: left;
    background: #747474;
    padding: 30px 50px;
    border-top: 10px solid #000;
}
.dd{
    width: 70%;
    display: block;
    margin: 0 auto;
    padding: 30px 50px;
    background: rgba(7, 36, 56, 0.5);
    border-top: 10px solid #01385C;
    border-radius: 10px 0 0 0;
}
@media only screen and (max-width: 641px) {
    .dd{width: 100%;}
}
.bottom-fixed .btn{
    padding: 25px 30px;
    font-size: 1.4em;
    border-bottom: 5px solid rgba(0,0,0,0.3);
    border-radius: 4px 4px 0 0;
    font-weight: 300;
}
.bottom-fixed i{
    margin-right: 5px;
}

/* Handles */
.dd-handle, .dd-handle-nodrag {padding: 10px 145px 10px 15px;}
.dd-handle:hover,
.dd-handle:hover + ol .dd-handle {border-color:transparent!important;}

i.type{
  width: 25px;
  height: 25px;
  line-height: 25px;
  float: left;
  text-align: center;
  color:#a9a9a9;
  margin: -2px 5px 0 0;
}
/* Botões*/
button.dd-collapse,
button.dd-expand{
  background: rgba(0,0,0,0.2);
  color: #6d6565;
  margin: 0px 10px 0px 0px;
  width: 42px;
  height: 42px;
  line-height: 42px;
  border-right: 1px solid #ddd;
  font-weight: 300;
  border-radius: 0 5px 5px 0;
}
button.dd-collapse,
button.dd-expand{
  outline: -webkit-focus-ring-color auto 0;
}
button.dd-collapse:before{content: '\f0d8'!important;}
button.dd-expand:before{content: '\f0d7'!important;}
a.dd-edit, .dd-dragel a.dd-edit{position: absolute;top: 0;right: 0;width: 80px;height: 42px;line-height: 42px;background: #d3d3d3;color: #5d5454;border-left: 1px solid #cacaca;text-align: center;cursor: pointer;transition: background .3s, border .3s;}
a.dd-edit:hover{background: #eaeaea;border-left: 1px solid #eaeaea;}
a.dd-edit i{transition: transform .3s;}
a.dd-edit:hover i{transform: scale(1.4);}

/* lines left */
.dd-handle:before, .dd-handle-nodrag:before{
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
}
li .dd-handle:before, li .dd-handle-nodrag:before{
  position: absolute;
  top: 0;
  left: -15px;
  background: #5d5454;
  width: 15px;
  height: 100%;
  border-radius: 5px 0 0 5px;
}
li.dd-item{
  background: #8b8b8b;
}
li li.dd-item{background: #e3e3e3;}
li li li.dd-item{background: #fcfcfc;}
li.dd-item .dd-handle:before{
  background: #5d5454 url('draggable.png') no-repeat 6px 50%;
}
li .dd-handle:hover:before,
li .dd-handle:hover + ol .dd-handle:before {
  background: #cbb38f!important;
}

li.dd-agrupador > .dd-handle i{
  display: none;
}

li.dd-empty-menu{
  margin-bottom: 5px;
}

li.dd-empty-menu .dd-handle i{
    background: #c8c8c8;
    position: absolute;
    left: 0;
    top: 0;
    width: 42px;
    height: 42px;
    text-align: center;
    line-height: 42px;
    display: block;
}

li.dd-empty-menu .dd-handle span{
  margin-left: 37px;
}

li .dd-empty-menu > .dd-handle > span{
    margin-left: 35px;
}

#olOrganizadorMenu ol.dd-list{padding-bottom: 1px;}

li.dd-item .agrupador-vazio{
    min-height: 30px;
    text-align: center;
    background-color: #8b8b8b;
    color: #fff;
    padding: 10px 0;
    display: none;
}
li li.dd-item .agrupador-vazio{
    background-color: #e3e3e3;
    color: #333;
}
li li li.dd-item .agrupador-vazio{
    background-color: #fcfcfc;
    color: #333;
}
li.dd-empty-menu .agrupador-vazio{display: block;}


/* Handles desativo */
.dd li.disabled,
.dd li.disabled li,
.dd li.disabled li li{background: #a9a9a9;opacity: .9;}
.dd li.disabled:after,
.dd > li.disabled li.dd-item:after{content: "\f070   desativado";position: absolute;top: 25%;left: 0;width: 100%;height: 42px;text-align: center;font-size: 1.4em;padding: 10px 0;display: inline-block;font-family: FontAwesome;font-style: normal;font-weight: 400;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;color: #da6161;}
.dd li.disabled.sem-conteudo:after, .dd li.disabled.sem-conteudo li.dd-item:after{content: "\f070   sem conteúdo";}
.dd li.disabled button.dd-collapse,
.dd li.disabled button.dd-expand{border-right-color: #c2c2c2;background: #c2c2c2;z-index: 2;}
.dd li.disabled a.dd-edit{z-index: 2;}
/* handle cor*/
li.disabled .dd-handle,
li.disabled .dd-handle-nodrag{background: #c2c2c2!important;border-color: #c2c2c2!important;}
li.disabled .dd-handle:hover + ol .dd-handle,
li.disabled .dd-handle-nodrag:hover {background: #c2c2c2!important;border-color: #c2c2c2!important;}
li.disabled .dd-name {color:rgb(93 84 84 / 60%)}
li.disabled .dd-description {color:rgb(123 123 123 / 60%)}

.dd-dragel{top:auto;}
li.dd-nochildren{padding-bottom: 0}

ul.submenuDinamico{list-style: none; margin-top: -5px;}
ul.submenuDinamico li{padding:5px 15px; border-bottom: 1px solid;}
.dd-collapsed ul.submenuDinamico{display: none;}