body {
    background-color: #f5f5f5;
    /* overflow: hidden; */
}

main {
    left: 90px;
    padding: 0px 20px 0px 20px;
    position: absolute;
    height: 100%;
    top: 50px;
    width: calc(100% - 90px);
    height: calc(100% - 50px);
    /*background-color: #f5f5f5;*/
}

/*USER*/
.img {background-repeat: no-repeat;}
.img.user-green {color: #2ebcb0 !important;}
.img.user-gray {background-position: 10px 7px;}
.img.user-white {color: #fff !important; background-position: 21px 15px;}

/* DROPDOWN */
.dropdown-content.min-150 {min-width: 150px;}
.dropdown-content.min-200 {min-width: 200px;}
.dropdown-content.min-250 {min-width: 250px;}
.dropdown-content.min-300 {min-width: 300px;}

/* TOP-DEFAULT */
.top-default {height: auto; padding: 0 20px;}

/*FORM SEARCH*/
.form-search {margin: 0; width: 35%; position: relative; left: 20px;}
.form-search #search input[type="text"]{padding-left: 30px; position: relative; left: 0; display: block; transition: ease 0.3s; width: 90%; margin-bottom: 0;}
.form-search #search i,
.form-search #filters a.filter-button {top: 13px; font-size: 18px; color: #9B9B9B; transition: all 0.5s; right: auto; position: absolute;}
.form-search #search input[type="submit"] {position: absolute; top: 0; background: none; border: none; z-index: 9; width: 20px; height: 25px; float: left; padding: 0; border-bottom: 0!important}
.form-search #filters .caret {display: none;}

/* CARD */
.card-content {min-height: 40px;}
.card-action {padding: 10px 20px;}
.card-action span {color: #9d9d9d; font-size: 1rem;}
.card-action span big {color: #878787; font-size: 1.1rem; margin-left: 10px}
.card-action .row {margin-bottom: 0}
.card-action .col {padding: 0}
.card-action a {margin-right: 0}

#user-list {width: 100%; height: 92%; overflow: scroll}

/*#perfil, #usuarios, #cadastro {padding-bottom: 40px; overflow: hidden}*/

/* LISTA */
#user-list .list-clients {width: 100%; float: left; position: relative;}
#user-list .list-clients:first-child .pull {padding-top: 0}
#user-list .list-clients:first-child .letter {top: 0}
#user-list .list-clients .pull {width: 100%; max-width: 40%;padding: 10px 0; padding-left: 50px;}
#user-list .list-clients span {display: block}
#user-list .list-clients .letter {width: 33px; height: 33px; background: #2ebcb0; font-size: 16px; color: #fff; text-align: center; padding-top: 5px; font-weight: 300; position: absolute; top: 10px; left: 0; border-top-left-radius: 100px; border-top-right-radius: 100px; border-bottom-left-radius: 100px;}
#user-list .list-clients .letter.active {position: fixed; top: 160px; left: 160px;}
#user-list .list-clients .info {font-size: 14px; color: #6B6C71; line-height: 29px; cursor: pointer; padding-left: 10px}
#user-list .list-clients .info:hover,
#user-list .list-clients .info.active {color: #2ebcb0;}

.bg-gray-top {position: fixed; top: 50px; left: 0; width: 100%; height: 75px; background: #f3f3f3; z-index: 1;}

#sobre .max-height {padding-bottom: 20px;}
#sobre .info-edit {padding: 0; padding-top: 0}
/*FIM MODIFICACAO*/

.form-search .option-inputs {width: 200px; font-size: 14px; float: right; position: absolute; right: 20px; display: none}
.form-search .option-inputs input {width: 100%; position: static; font-size: 14px; margin-bottom: 0; cursor: pointer}
.form-search .option-inputs i {right: 24.1px; z-index: -1;}
.form-search .option-inputs input:first-child {float: left;}
.form-search .option-inputs small {font-size: 12px; margin-top: 13px; float: left; color: #9B9B9B; margin-left: 10px}
.form-search .option-inputs small ~ input,
.form-search #option-data input {float: right; margin-right: 10px}
.form-search #search.active {right: 250px}
.form-search #option-periodo {top: -25px; left: auto; right: 30px;}
.form-search #option-periodo input {width: 100%; float: left;}
.form-search #option-periodo i {right: 0; top: 7px;}
.form-search #option-periodo .item {float: left; width: 90px; position: relative; top: 25px;}
.form-search #option-periodo .item:last-child {margin-left: 20px;}
.form-search .option-inputs button {background: #2ebcb0; border: none; color: #fff; padding: 5px 10px; border-radius: 4px; float: right; margin-top: 10px; margin-right: 10px; font-weight: 500;}
.form-search .option-inputs button.btn-flat {padding-top: 0; background: none; color: #2ebcb0; font-weight: 300;}


.picker__box .picker__date-display {background-color: #2ebcb0}
.picker__box .picker__weekday-display{background-color: #3da3ad}

/*FORM EDIT*/
.info-edit {display: none; float: left; overflow-x: scroll; overflow-y: auto; font-size: 1.2rem; height: auto; }

.quebra {display: block; width: 100%; float: left;}

#configuracao form .dropdown-content li>span {position: static!important}
#configuracao form .input-field .dropdown-content li>span {position: static!important}

.edit {position: absolute; top: 0; right: 0; display: none}
.edit.stock-edit {top: 6px; right: 5px; width: 25px; border: none; background: #cfcfcf; border-bottom: 1px solid #fff; color: #fff; text-align: center;}

/*BUTTONS*/
.area-button {position: fixed; top: 0; right: 15px; z-index: 9998;}
.button {border-radius: 100px; color: #fff; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24); transition: all 0.3s;  display: block; position: absolute; right: 0}
.button:hover,
.button:focus {color: #fff; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23)}
.button.princ {width: 56px; height: 56px; top: 0; right: 0; z-index: 9; background: #2ebcb0;}
.button.princ i {position: absolute; top: 18px; left: 18px; font-size: 25px; transition: ease 0.3s}
.button.princ:hover i {transform: rotate(90deg);top: 17px; left: 17px;}
.button.princ.active i {transform: rotate(45deg); left: 17px;}
.button.princ.active:hover i {transform: rotate(135deg); top: 16px;}
.button.sec {width: 50px; height: 50px; text-align: center; padding-top: 13px; background: #393F47; right: 2px; top: 2px;}
.button.sec ~ .tooltip {display: block; right: 70px; opacity: 0; font-size: 14px; top: 0; transition: all 0.3s}
.button.sec i {font-size: 25px;}
#save:hover span {transform: matrix(-1, 0, 0, 1, 0, 0);}
#stock.active {top: -120px;}
#stock.activeIn {top: -60px;}
#products.active {top: -60px;}
#stock.active ~ #tool-stock {opacity: 1; display: block; top: -113px;}
#stock.activeIn ~ #tool-stock {opacity: 1; display: block; top: -53px;}
#products.active ~ #tool-products {opacity: 1; display: block; top: -53px;}

/*BOX*/
.chip, .token-input-token {box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); position: relative;}
.chip:hover, .token-input-token:hover {box-shadow: 0 4px 13px 0 rgba(0,0,0,0.2),0 2px 3px 0 rgba(0,0,0,0.19)}

.box {overflow: hidden; background: #fff; /*box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)*/; border-radius: 4px;}
/*.box:hover {box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);}*/
.z-depth-1 {transition: all 0.3s cubic-bezier(.25,.8,.25,1);}
.z-depth-1:hover {box-shadow: 0 4px 13px 0 rgba(0,0,0,0.2),0 2px 3px 0 rgba(0,0,0,0.19)}

/*box-type*/
.box-referency {position: relative; float: left; margin-right: 15px; margin-top: 10px;}
.box-type {width: 100%; max-width: 205px; min-height: 70px; margin-right: 15px; display: block; float: left; background: #FAFAFA; position: relative}
.box-type.ncm .info {padding: 20px 13px}
.box-type.dif {max-width: 320px;}
.box-type .info {width: 80%; float: left; padding: 10px 20px;}
.box-type .info strong {font-size: 18px; color: #000; font-weight: 400; width: 100%; float:left; margin-bottom: 5px;}
.box-type .info small {font-size: 12px; color: rgba(0,0,0,.54); font-weight: 400; width: 100%; float:left}
.box-type .trash {width: 20%; height: 100%; float: left; background: #fff; text-align: center; position: absolute; right: 0; top: 0; display: flex; justify-content: center; align-items: center}
.box-type .trash i {font-size: 28px; color: #9B9B9B; position: static}

/*see-all*/
.btn-see-all {width: 90px; float: left;padding-top: 30px;}
.btn-see-all .see-all {font-size: 16px; color: #6B6C71; font-weight: 400; text-align: right; width: 100%; display: block; float:left}
.btn-see-all small {font-size: 12px; color: #9B9B9B; font-weight: 300; text-align: right; width: 100%; display: block; float:left}

/*border-bottom*/
.border-bottom {display: block; float: left; width: 100%; height: 1px; background: #ececec; margin: 1rem 0; padding: 0;}

/*txt*/
.txt-green {font-weight: 400; color: #2ebcb0}
.txt-green-light {color: #6FC21A}
.txt-white {color: #fff!important}
.txt-red {color: #F5483E}
.txt-yellow {font-weight: 400; color: #F6B939}
.txt-pink {font-weight: 400; color: #FF4081}
.txt-gray {font-weight: 400; color: #6B6C71}
.txt-gray-light {color: #9B9B9B;}
.txt-gray-lighter {color: #CFCFCF;}


/*topo search*/
.options {float: right; margin-top: 10px; margin-right: 90px; margin-top: 6px;}
.options a {font-size: 17px; color: #9B9B9B; margin-left: 20px!important}

/*BOX DEFAULT*/
.user-box {position: fixed; top: 130px; right: 10%; width: 40%;}

#info {width: 700px!important; max-height: 520px;}
#plano {width: 850px!important; margin-left: -285px}

#info, #plano {left: 60%; opacity: 0; transition: ease 0.5s; z-index: -1; transform: scale(0.7);}
#info.active, #plano.active {left: 0; opacity: 1}

.box.payment,
.box.planos,
.box-default,
.box-internal {position: absolute; width: 100%;}
.box-internal {left: 60%}
.box.active {left: 0%!important; margin-left: -195px; opacity: 1!important;  z-index: 10!important; transform: scale(1)!important; visibility: visible!important}

.box.box-default {max-width: 390px; margin: 0 auto; left: -60%; transition: ease 0.5s; opacity: 0; z-index: -1; transform: scale(0.7); visibility: hidden}
.box.box-default.max {max-width: 390px;}
.box.box-default .top {background: #2ebcb0; position: relative; padding: 20px;}
.box.box-default .top .estado {font-size: 14px; color: #fff; /*position: absolute; top: 20px; right: 70px;*/}
.box.box-default .top h3 {color: #fff; font-size: 24px; font-weight: 300; line-height: 24px; margin-bottom: 10px;}
.box.box-default .top small {color: #393F47; font-size: 13px; font-weight: 400; line-height: 24px;}
.box.box-default .top p {margin: 0}
.options {position: absolute; top: 15px; right: 15px;}
.options a {float: left; margin-left: 20px; font-size: 17px; color: #fff;}
.box.box-default ul {width: 100%;}
.box.box-default ul li {width: 100%; height: 60px; padding: 10px 15px; border-bottom: 1px solid #E5E5E5; display: block; cursor: pointer}
.box.box-default ul li:hover {background: #F5F5F5}
.box.box-default ul li i {width: 36px; height: 36px; background: #CFCFCF; border-radius: 100px; display: block; text-align: center; padding-top: 8px; font-size: 20px; color: #fff; float: left; margin-right: 20px; position: relative}
.box.box-default ul li span {font-size: 14px; color: #6B6C71; font-weight: 300; margin-top: 8px; display: block;}
.box.box-default ul li .nots {top: -10px; left: 25px; width: 20px; height: 20px; background: #2ebcb0; font-size: 10px; color: #fff; font-weight: 400; padding-top: 5px; padding-right: 2px;}
.box.box-default ul li i.txt {font-family: 'Roboto'; font-size: 18px; padding-top: 8px;}

.box.box-default .lever {margin-right: 0}
.box.box-default .user-area .img-user {width: 100px; height: 100px; border-radius: 100px; border: 1px solid #fff; float: left; margin-right: 20px; text-align: center; position: relative; padding-top: 12px; font-size: 50px; color: #2EBBB0; background: #fff; margin-top: 0; overflow: hidden;}
.box.box-default .user-area .img-user img {width: auto; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.box.box-default .user-area strong {font-size: 24px; color: #fff; font-weight: 300; width:100%; display: block}
.box.box-default .user-area i {margin-right: 5px}
.box.box-default .user-area small {font-size: 13px; color: #393F47; width:100%; display: block}
.box.box-default .info-user {position: relative; width: 100%; padding: 20px; padding-left: 70px; border: 1px solid #ececec}
.box.box-default .info-user i {width: 40px; height: 40px; display: block; padding-top: 8px; background: #B2B2B2; border-radius: 100px; border: 1px solid #E5E5E5; font-size: 20px; color: #fff; text-align: center; position: absolute; left: 15px;}
.box.box-default .info-user small {font-size: 14px; color: #9B9B9B; display: block}
.box.box-default .info-user span {font-size: 16px; color: #7E7F84; display: block}
.box.box-default .info-user a {font-size: 16px; color: #38CECA; margin-top: 15px; display: block}
.row .col.texto-listando {padding: 0.5rem 0.75rem}

/*box internal*/
.box.box-internal {max-width: 390px; min-height: 330px; max-height: 500px; margin: 0 auto; width: 100%; transition: ease 0.5s; opacity: 0;  z-index: -1; transform: scale(0.7); visibility: hidden}
.box.box-internal .edit {left: 0; height: 100%; border: 0; border-bottom: 1px solid #ececec; background: rgba(255, 255, 255, 0.6);}
.box.box-internal .edit.active {background: #fff}
.box.box-internal .edit:focus {background: #fff}
.box.box-internal .top {width: 100%; height: 60px; padding: 20px; background: #2ebcb0}
.box.box-internal .top.no-height {height: auto; background-color: #2ebcb0; margin-top: -5px;}
.box.box-internal .top.no-height p {margin: 0; font-size: 0.8rem}
.box.box-internal .top.no-padding {padding: 0}
.box.box-internal .top .col.s6 {padding:0.75rem!important}
.box.box-internal .top .col.s6.center-flex {padding: 0 0.75rem 0.75rem!important}
.box.box-internal .top .border-right {border-color: rgba(255,255,255,.3)}

.box.box-internal.father {height: auto; z-index: 9; margin-bottom: 35px;}
.box.box-internal.father .top {height: auto}
.box.box-internal.father .top strong {font-size: 18px; color: #fff; font-weight: 300; display: block}
.box.box-internal.father .top small {font-size: 13px; color: rgba(0, 0, 0, .54); font-weight: 400; display: block}
.box.box-internal.child {width: 100%; max-width: 294px; height: 160px; overflow: visible; margin-left: 60px; margin-bottom: 35px;}
.box.box-internal.child .line-h {width: 30px; height: 2px; background: #D8D8D8; display: block; position: absolute; top: 30px; left: -30px; z-index: 1}
.box.box-internal.child .line-v {width: 2px; height: 195px; background: #D8D8D8; display: block; position: absolute; top: -165px; left: -30px; z-index: 1;}
.box.box-internal.child .top {height: auto; padding: 20px; background: none}
.box.box-internal.child .info {float: none;}
.box.box-internal.child .border-bottom {margin: 0 0 15px;}
.box.box-internal.child strong {font-size: 18px; color: #000; font-weight: 300; display: block}
.box.box-internal.child small {font-size: 13px; color: rgba(0, 0, 0, .54); font-weight: 400; display: block}
.back {font-size: 14px; color: #393F47; float: left;}
.back i {margin-right: 5px;}
.share-button {float: right; color: #fff; font-size: 1.4rem; width: 20px; text-align: center;}
.share-button.commonality {position: absolute; right: 15px; top: 8px; color: #9b9b9b;}
.share-button ~ .dropdown-content {min-width: 160px; right: 15px; left: auto!important;}
.options {float: right; margin-right: -20px;}
.options a {float: left; margin-left: 20px!important; font-size: 17px; color: #fff;}
.options .form-search {width: 30px; height: auto; margin: 0;}
.options .input-field {margin: 0}
.options .input-field input[type="text"] {top: 0; right: 0;}
.options .input-field i {top: 0; color: #fff; right: 5px;}
.options .input-field i.fa-share-alt {font-size: 18px}
.box.box-internal .static-info {padding: 0rem 1rem;}
/*.box.box-internal .row { margin: 0.5em 1em;}*/
/*.box.box-internal .info-edit {padding: 0 1rem}*/
.user-area .row {margin-top: -23px!important;}
.box.box-internal .user-area .img-user {float: left; width: 40px; height: 40px; position: absolute; border-radius: 50%; left: 0; margin: 0 15px 0 10px; text-align: center; padding-top: 10px; margin-top: 8px; margin-bottom: 20px; overflow: hidden;}
.box.box-internal .user-area .img-user img {position: absolute; top: 50%; left: 50%; width: 100%; height: auto; transform: translate(-50%, -50%);}
.box.box-internal .user-area .img-user i {font-size: 18px; color: #DDDDDD;}
.box.box-internal .user-area strong {font-size: 24px; color: #393F47; display: block; font-weight: 400; position: relative}
.box.box-internal .user-area small {font-size: 13px; color: #9B9B9B; display: block; position: relative}
.box.box-internal .user-area .border-bottom {margin: 20px 0 10px; background: #E5E5E5;}
.box.box-internal .info {width: 100%; min-height: 25px; position: relative; float: left; margin-bottom: 10px}
.box.box-internal .info:last-child {margin-top: 0; margin-bottom: 0}
.box.box-internal .info .icon  {float: left; display: flex; height: 100%; justify-content: center; vertical-align: middle; align-items: flex-start;}
.box.box-internal .info i {font-size: 1.3rem; color: #DDDDDD;}
.box.box-internal .info big {font-size: 16px; color: #6B6C71; line-height: 24px; display: block; font-weight: 100}
.box.box-internal .info small {font-size: 13px; color: #D5D5D5; display: block}
.box.box-internal .info span {color: #9B9B9B;}
.box.box-internal .info span.token-input-delete-token {color: #fff;}
.box.box-internal .info li .select-dropdown span {line-height: 18px; display: block; position: relative; top: 5px; padding-top: 14px}
.box.box-internal .info span:first-child {padding-top: 5px}
.box.box-internal .info span .edit {width: 100%; max-width: 70%;}
.box.box-internal .form.int .item {width: 100%; max-width: 100%}
.box.box-internal .mgntop {margin-top: 13px;}
.box.box-internal .cont {width: 100%; padding: 20px 0; float: left;}
.box.box-internal .link {font-size: 16px; color: #2ebcb0; width: 100%; display: block; float: left; border-top: 1px solid #ececec; text-align: right;}
.box-internal .chips {height: 30px;}
.box-internal .chip {padding-right: 30px; max-width: 100%; text-overflow: ellipsis; overflow: hidden; border: none}

.box-internal ul.token-input-list {width: 100%; border: none; float: left;}
.box-internal ul.token-input-list input {-webkit-appearance: initial; margin-bottom: 20px;}

.box.box-internal .related {width: 100%; padding: 0 20px 0 68px}
.box.box-internal .related li {float: left; margin-bottom: 0; position: relative; cursor: pointer; max-width: 250px;}
.box.box-internal .related li.chip {word-wrap: break-word; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 30px; width: auto; background-color: #2ebcb0; color: #fff; margin-bottom: 10px;     position: relative;}
.box.box-internal .related li.chip img {height: 32px; border: 1px solid #d5d5d5; padding: 3px; width: 32px; padding: 5px 2px;}
.box.box-internal .related li .close {float: right; position: absolute; right: 10px; top: 0;}
.box.box-internal .related li p {margin: 0; text-overflow: ellipsis; max-width: 70%; white-space: pre; overflow: hidden; float: left;}
.box.box-internal .related li input {display: none}
.box.box-internal .related li .icon {width: 40px; height: 40px; display: block; border-radius: 100px; background-color: #B2B2B2; color: #fff; font-size: 16px; text-align: center; padding-top: 12px; float: left; margin-right: 10px; position: relative; z-index: 2; overflow: hidden; border: 1px solid #e5e5e5; background-position: 10px 8px;}
.box.box-internal .related li .icon img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 100px; z-index: 9;}
.box.box-internal .related li span {min-width: 167px; font-size: 14px; color: #6B6C71; display: block; background: #E5E5E5; float: left; padding: 9px; border-radius: 100px; padding-left: 50px; margin-left: -51px; padding-right: 20px; position: relative; z-index: 1;}
.box.box-internal .related li .trash {font-size: 20px; color: #F478A2; position: absolute; right: 15px; top: 15px; z-index: 9; opacity: 0; transition: ease 0.5s}
.box.box-internal .related .bg1 {position: absolute; top: 0; left: 0; width: 100%; height: 44px; background: #e5e5e5; display: block; opacity: 0;}
.box.box-internal .related li:hover .bg1 {opacity: 1;}
.box.box-internal .related li:hover .trash {opacity: 1;}
.box.box-internal .form .item {max-width: 300px;}
.box.box-internal .form .item input {width: 100%!important; height: 30px; border-bottom: 1px solid #ececec;}
.box.box-internal .form .item .value {font-size: 16px; color: #6B6C71; left: 0;}
.box .collapsible { box-shadow: none; border: none;}
.box .collapsible .collapsible-header {border-bottom: 0;border-top: 1px solid #E5E5E5; min-height: 3.5rem; line-height: 3.5rem; transition: all 0.3s;}
.box .collapsible .collapsible-body {border: none;}
.box .collapsible .sub-levels li {font-size: 14px; padding: 0.2rem 1rem; padding-left: 1rem;  color: #6c6d72; }
.box .collapsible .sub-levels {padding: 0rem 0; color: #6c6d72; }

.options {float: right; margin-top: 10px;}
.options i {float: left; font-size: 22px; color: #ececec; display: block; margin-left: 20px}
.options .txt-green {color: #2EBBB0;}
.box.box-internal .levels li .esconde {position: absolute; right: 10px; width: 40px; height: 25px; margin: 0; z-index: 9999;}

.box.box-internal .border-bottom.dif {margin: 10px 0 20px; background: #E5E5E5; margin-left: 70px;}

.box.box-internal .responsible {width: 100%; float: left;}
.box.box-internal .responsible .info {height: auto}
.box.box-internal .responsible .txt-green {font-size: 16px; color: #2EBBB0; margin-bottom: 20px; display: block; position: relative}

.box.box-internal .bottom {width: 100%; float: left; height: 50px; border-top: 1px solid #ececec; position: absolute; bottom: 0; background: #fff; z-index: 9;}
.box.box-internal .bottom.static {position: static;}
.box.box-internal .bottom .link {width: auto; float: right; border: none; padding: 13px; margin-left: 10px;}
.box.box-internal .bottom .link.visible {display: block}
.box.box-internal .bottom .cancel {color: #6B6C71}
.box.box-internal .bottom .save,
.box.box-internal .bottom .cancel {display: none}
.box.box-internal .bottom .resendEmail {display: block; color: #6B6C71}

.payment .bottom {width: 100%; float: left; height: 50px; border-top: 1px solid #ececec; position: absolute; bottom: 0; background: #fff; z-index: 9; left: 0;}
.payment .bottom .link {width: auto; float: right; border: none; padding:13px; margin-left: 10px; color: #2ebcb0}
.payment .bottom .cancel {color: #6B6C71}

.box.box-internal .box-embarque .bottom {position: static}

/*BOX LIST*/
.box .top {width: 100%; padding: 20px; background: #ececec; position: relative; z-index: 9;}
.box.list {width: 100%; float: left; min-height: 190px; position: relative; margin-bottom: 20px;}
.box.list .desc-product {padding: 20px; padding-left: 120px; min-height: 126px; cursor: pointer}
.box.list .desc-product img {position: absolute; left: 20px; top: 20px; margin-right: 30px; width: 80px; height: 80px;}
.box.list .desc-product strong {font-size: 16px; color: #4A4A4A; font-weight: 300; max-width: 140px; display: block;}
.box.list .desc-product small {font-size: 12px; color: #9B9B9B; font-weight: 300;}
.box.list .desc-product .price {font-size: 18px; color: #2ebcb0; font-weight: 400; position: absolute; top: 20px; right: 20px}
.box.list .desc-product .stock {font-size: 14px; color: #fff; font-weight: 400; position: absolute; top: 60px; right: 20px; width: 35px; height: 35px; background: #CFCFCF; display: block; border-radius: 100px; text-align: center; padding-top: 7px;}
.box.list .desc-product .stock:hover ~ .tooltip {display: block}
.box.list .bottom {width: 100%; height: 64px; border-top: 1px solid #ececec; padding: 20px; position: relative}
.box.list .bottom .link {font-size: 16px; color: #2ebcb0; font-weight: 300; float: right; position: absolute; right: 20px; padding: 10px; margin-top: -11px; margin-right: -10px;}
.box.list .bottom .link.txt-gray {right: 90px; color: #6B6C71}
.box.list .bottom .switch {left: 50px; top: 13px; right: auto;}
.box.list .bottom span {float: left; font-size: 14px; color: #757575; font-size: 300; margin-right: 10px;}
.box.list .bottom  {padding: 10px 20px; border-top: 1px solid #ececec; width: 100%; height: 40px; float: left; margin-top: 20px;}
.box.list .tooltip {font-size: 13px; float: right; position: absolute; right: 70px; font-weight: 400; top: 64px;}

/* CHIPS */
.chips {padding: 0; min-height: 0; margin: 0; border-bottom: 1px solid #ececec}
.chips input {border: none!important}

/* SLIDER */
.slider-area {margin-bottom: 20px; width: 100%; float: left; margin-bottom: 20px; height: 150px;}
.slider-area .range-field {margin: 0; padding: 0 20px;}
.slider-area span {font-size: 16px; color: #6B6C71; margin-left: 20px;}
.slider-area small {font-size: 12px; color: #6B6C71;}
.slider-area #left {float: left;}
.slider-area #right {float: right;}
#slider-range-min {width: 100%; height: 6px; background: #CFCFCF; margin: 10px auto 50px; position: relative; border-radius: 100px; max-width: 350px; display: block;}
.ui-slider-range {width: 55%; height: 15px; position: absolute; left: 0; display: block; background: #2ebcb0; border-top-left-radius: 100px; border-bottom-left-radius: 100px; top: -3px}
.ui-slider-handle {position: absolute; left: 48%; width: 30px; height: 30px; display: block; border-radius: 100px; background: #2ebcb0; top: -10px; cursor: pointer;}

.no-marginBottom {margin-bottom: 0!important}
.no-sidePadding {padding-left: 0!important; padding-right: 0!important}


/* TIME LINE */
.timeline {
  position: relative !important;
}

.timeline .timeline-event {
  position: relative !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

.timeline .timeline-event .timeline-content {
  position: relative !important;
  width: calc(80 %)!important;
}

.timeline .timeline-event::before {
  display: block !important;
  content:  ""!important;
  width: 2px !important;
  height: calc(50% - 30px )!important;
  position: absolute !important;
  background: #dfe0df !important;
  left: 35px !important;
  top: 0 !important;
}

.timeline .timeline-event::after {
  display: block !important;
  content:  ""!important;
  width: 2px !important;
  height: calc(50% + 40px )!important;
  position: absolute !important;
  background: #dfe0df !important;
  left: 35px !important;
  top: calc(50% + 30px )!important;
}

.timeline .timeline-event:first-child::before {
  display: none !important;
}

.timeline .timeline-event:last-child::after {
  display: none !important;
}

.timeline .timeline-event .timeline-content {
  margin: 0px 10px 0px 70px !important;
}


.timeline .timeline-badge {
  display: block !important;
  position: absolute !important;
  width: 50px !important;
  height: 50px !important;
  top: calc(50% - 20px) !important;
  left: 10px !important;
  border-radius: 50% !important;
  text-align: center !important;
  cursor: default !important;
  padding: 10px 0 10px 0;
}
.timeline .timeline-badge.date{
  width: 60px !important;
  height: 60px !important;
}

.timeline .timeline-badge p {
  font-size: 0.8rem !important;
  margin: 0px;
  line-height: 15px;
}
.timeline .timeline-badge h6 {
  font-size: 1rem;
}

.timeline .timeline-badge i {
  font-size: 25px !important;
  line-height: 45px !important;
}


.bg-video{
    background-color: #217a82;
    opacity: .3;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
}

#chips-categoria .chips .input, #chips-dependente .chips .input{
    width: 100% !important;
}


#templates .dropdownType {
  margin-top: 5px;
  margin-right: 30px;
}
#templates .deleteResposta, #templates .deleteSubresposta {
  position: absolute;
  margin-top: 30px;
  margin-left: -21px;
}
#templates .deletePergunta {
  margin-top: -20px;
}
#templates .mbox {
  width: 450px !important;
}
#templates .validar {
  border-bottom: 1px solid #f44336 !important;
  box-shadow: 0 1px 0 0 #f44336 !important;
}


#dashboard .chart_engajamento { margin: 2em 0em;}
#dashboard .chart-area{justify-content: center;align-items: center;display: flex;}
#dashboard .flex {justify-content: center;align-items: center;display: flex;}
#dashboard .relative {position: relative; display: flex; align-items: center; padding: 7rem 0}
#dashboard .circle {border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column;}
#dashboard .circle h5 {margin: 0;}
#dashboard .leaked-circle {border: 9px solid #CFCFCF; background-color: #fff;}
#dashboard .leaked-circle big {font-size: 4rem; color: #22939F; font-weight: 600; line-height: 38px;}
#dashboard .leaked-circle small {font-size: 1.6rem; color: #282828;}
#dashboard .users-circle {width: 165px; height: 165px; position: relative; z-index: 3}
#dashboard .utility-circle {width: 135px; height: 135px; position: relative; z-index: 1;}
#dashboard .link-element {width: 100px; height: 45px; background-color: #FC7E10; color: #fff; display: flex; align-items: center; justify-content: center; margin: auto 0; font-size: 1.6rem; font-weight: 600; position: relative;z-index: 2;left: -0.4em;top: 0;}
#dashboard .link-element:after {border-bottom: 1.4em solid rgba(0,0,0,0); border-left: 0.9em solid #fc7e10; border-top: 1.4em solid rgba(0,0,0,0); content: ""; margin-top: -1.4em; position: absolute; right: -0.9em; top: 50%; transition: all 0.3s ease-in-out 0s;}
#dashboard .filled-circle {width: 80px; height: 80px; background-color: #CFCFCF; position: relative;}
#dashboard .filled-circle big {color: #777777; font-size: 2.8rem; font-weight: 600; line-height: 25px;}
#dashboard .filled-circle small {color: #282828}
#dashboard .mobile-area {display: flex; align-items: center; justify-content: center;}
#dashboard .mobile-art {width: 94px; background-color: #cfcfcf; border-radius: 8px; margin: 0em 0.3em ;display: inline-flex; align-items: center; justify-content: center; flex-direction: column; padding: 5px;}
#dashboard .mobile-view {width: 100%; background-color: #fff; border-top-right-radius: 4px; border-top-left-radius: 4px; height: 55px; display: flex; align-items: center; justify-content: center; font-size: 2.8rem; color: #777777; margin-bottom: 5px}
#dashboard .mobile-icon {font-size: 2rem; color: #777777;}

#dashboard #alertas .collapsible-header {position: absolute; width: 100%; z-index: 999;}
#dashboard #alertas .collapsible-body {display: block;}
#dashboard #alertas .collapsible-body {position: relative; top: 35px;}
#dashboard #alertas {max-height: 400px;overflow-y: auto;}



.tab-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 55%;
    border: 1px solid;
    float: left;
    margin-top: 10px;
    margin-right: 10px;
}

#loja .sidebar{
    margin-top: -15px;
    padding: 20px;
    height: 100%;
    position: absolute;
    overflow: auto;
    top: 210px;
    right: 0;
}