@dev-tcloud/tcloud-ui 0.0.87 → 0.0.89

package/scss/tcloud/custom/tcloud-prime.scss

@@ -0,0 +1,4619 @@
+@import 'mixins';
+
+
+// ngxLoadingAnimationTypes.cubeGrid
+
+// ngxLoadingAnimationTypes.doubleBounce
+
+// ngxLoadingAnimationTypes.doubleBounce
+
+// '#293846'
+
+// '#293846'
+
+$i: !important;
+
+// =========================================================
+// T-Cloud Prime theme v.01
+// =========================================================
+
+body.tc-prime {
+  font-family: 'Lato', sans-serif;
+  font-size: 12px;
+  color: $prime-black;
+
+}
+
+// ===============================================
+// Styles
+// ===============================================
+
+.tc-prime {
+
+  //===================================
+  // Colors
+  //===================================
+
+  background: $prime-black; // body and menu background
+
+  //==========================================================
+    // Prime Objects Colors
+  //==========================================================
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  .card-shadow-tit,
+  .card
+  {
+    color: $prime-black $i;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6
+  {
+    font-weight: 500 $i;
+  }
+
+  h1 {
+    font-size: 20px $i;
+    text-transform: uppercase;
+  }
+
+  h2 {
+    font-size: 18px $i;
+  }
+
+  h3 {
+    font-size: 16px $i;
+  }
+
+  h4 {
+    font-size: 14px $i;
+  }
+
+  .dropdown-item .favorito.active,
+  .show-select h2,
+  .show-select-wrap.text p strong,
+  .nav.navbar-top-links .fa-tasks,
+  .nav.navbar-top-links > li > a.opened,
+  .nav.navbar-top-links > li > a :hover,
+  .nav.navbar-top-links > li > a :focus,
+  .tmu-color,
+  .btn-icon.dropdown-toggle.count-info.tmu-color.assist-token-dropdown,
+  .nav-tabs .nav-item.show .nav-link,
+  .text-link,
+  ._404,
+  .icon-status.far.fa-check-circle,
+  .store-offer p strong,
+  .consume-header.status.success .info-list-item.consume strong,
+  .consume-header.status.success .info-list-item.consume span,
+  .offer,
+  .product-info .product-info-name,
+  .product-info i,
+  .accordion-wrap .percent,
+  .iaas-start-page .title,
+  .container-page-iaas .title-wrap,
+  .container-body .content-header .container-titles .title,
+  .container-item .container-options .icon-default,
+  .container-content .checkout-content .resume-header .environment-data .title,
+  .container-content .checkout-content .resume-header .network-data .title,
+  .container-content .checkout-content .resume-header .environment-data .content .icon,
+  .container-content .checkout-content .resume-header .network-data .content .icon,
+  .virtual-machine-content .vm-header__expand-btn.active,
+  .container-content .checkout-footer .plan-options .plan-option .total-price,
+  .container-content .checkout-content .resume-env .resume-env-header .offer-title,
+  .virtual-machine-content .vm-header__expand-btn.active .icon,
+  .order-confirmation-modal .order-confirmation-body .machine-quantity,
+  .select-bucket-page .select-bucket-page-wrap .select-bucket-page-box .select-bucket-page-box-icon i,
+  .select-bucket-page .select-bucket-page-header .select-bucket-page-header-title,
+  .select-bucket-page .select-bucket-page-header i,
+  .container-body .container-titles .title,
+  .title-image p,
+  .container-card-topology .container-body .topology-id:hover,
+  .container-all-list .container-list-vms .container-header .title,
+  .container-refresh,
+  .icon-edit,
+  .icon-save,
+  .icon-remove,
+  .monitor-dashboard-container .monitor-container .title,
+  .container-row .item-row .fa-edit,
+  .container-item .item-col .icon-default,
+  .iaas-help-content .help-content-card-tit,
+  .help-iam-label:before,
+  .help-iam-ask-collapse-link.collapsed .help-iam-label:hover,
+  .label-grid,
+  .area-title,
+  .icon-toggle,
+  .contract_admin_edit .fa-save,
+  .tc-accordion-actions .fa-chevron-down,
+  .tc-table .fa-save,
+  .fa-save,
+  .to-active,
+  .grid-template-columns .icon-arrow-order,
+  .news-edit a,
+  .news-edit .fa-edit:hover,
+  .input-group-append .btn,
+  .btn-accordion,
+  .list-card .card-label strong.success,
+  .iaas-start-page .content-helpme p a,
+  .progress-wrap-text .active,
+  .tab-subtitle-active,
+  .tc-prime-more-info-link,
+  .list-card .card-num,
+  .grid-content .grid-item.item5.action-area .icon-button:hover.edit,
+  .rowBox label.badget,
+  .country-item i,
+  .know-the-rules-wrap .primary,
+  .text-navy,
+  .country-select-link.btn-active,
+  .vpn-list-box .vpn-box .vpn-name-box .vpn-name
+  {
+    @include prime-color;
+  }
+
+
+
+  .admin-fullname-wrap i,
+  .admin-email-wrap i
+  {
+    color: $prime-gray-100 $i;
+  }
+
+
+  //==========================================================
+  // Prime Objects Background Colors
+  //==========================================================
+
+  .bullets-container .bullets.active,
+  .background-hover-critical:hover,
+  .nav-tabs .nav-link.active,
+  .nav-tabs .nav-item.show .nav-link,
+  .nav-tabs .nav-link:not(.active):focus,
+  .nav-tabs .nav-link:not(.active):hover,
+  .topnav ul li.active,
+  .topnav ul li:hover,
+  .contrato-card-header,
+  .container-box-dialog .container-header,
+  .container-box-dialog .container-body .container-step .progress-bar-line .line-values,
+  .container-body .content-header .container-count-wizard .container-item.active,
+  .container-body .content-header .container-count-wizard .container-item.completed,
+  .container-body .content-header .container-count-wizard .container-line.completed,
+  .container-new,
+  .container-content .checkout-content .resume-env .resume-env-header .offer-controls .offer-button.active,
+
+  .virtual-machine-content .vm-flavor__cpu,
+  .virtual-machine-content .vm-flavor__ram,
+  .virtual-machine-content .vm-so-disk__size,
+
+  .virtual-machine-content .vm-disk__size,
+  .virtual-machine-content .vm-disk__iops,
+  .virtual-machine-content .vm-disk-backup__status,
+
+  .order-confirmation-modal .order-confirmation-header,
+  .container-options .btn-new-green:disabled,
+  .container-all-list .container-tag-slide.close-list-vm,
+  .container-all-list .container-list-vms .container-filter .container-add-vm,
+  .control-button.refresh.running,
+
+  .container-page .container-menu .item:hover,
+  .container-page .container-menu .item.active,
+  .ngx-pagination a:hover,
+  .ngx-pagination button:hover,
+  .title-product.valid,
+  .navy-bg:hover,
+  .instanceBox.active,
+  .navy-bg:hover,
+  .navy-bg.active,
+  .navy-bg.opened,
+  .tc-communication-message .buttons.confirm,
+  .container-tabs-optins .container-item:hover,
+  .container-tabs-optins .container-item.active,
+  .rules-helper-wrapper .close-helper-button,
+  .rules-helper-wrapper .rules .rule .content .step,
+  .rules-helper-wrapper .rules .illustration .example-tag,
+  .box-group-input .area-action button
+  {
+    @include prime-bgc;
+  }
+
+  //==========================================================
+  // Prime Objects Background
+  //==========================================================
+
+  .tc-mode-info,
+  .ngx-pagination .current,
+  .grid:hover:after,
+  .inmodal .modal-header,
+  .card-header-content .btn-cadastrar,
+  .btn,
+  .button-card.active,
+  .container-content .container-body .container-item .container-list-tags .container-tag,
+  .form-fieldset .v-true,
+  .progress-wrap .progress-wrap-bar .percent,
+  .numb-order,
+  .grid .grid-content.active:after
+  {
+    @include prime-bg;
+  }
+
+
+  .boxFastAccess .msg-wrap,
+  #prime-quick-access .text-success
+  {
+    @include prime-bg-10;
+  }
+
+  //==========================================================
+  // Prime Objects border Colors
+  //==========================================================
+
+  .topnav ul li.active,
+  .topnav ul li:hover,
+  .tss-contract:before,
+  .product-content,
+  .store-offer,
+  .store-offer i,
+  .container-row .input-row-setting-auth-item:focus,
+  .container-header .item-option:hover,
+  .container-header .item-option.active,
+
+  .nav-tabs .nav-link.active,
+  .nav-tabs .nav-item.show .nav-link,
+  #prod-prime .badge-success,
+  #prod-prime .label-success
+  {
+    @include prime-bdr;
+  }
+
+  .card-content h2:before {
+    @include prime-bdr-50;
+  }
+
+  //==========================================================
+  // Layout
+  //==========================================================
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p
+  {
+    line-height: initial;
+    margin: 0 ;
+    padding: 0 ;
+  }
+
+  .gray-bg,
+  .bg-muted {
+    background-color: $tc-white;
+  }
+
+  .wrap-main {
+    padding: 0;
+  }
+
+  .tc-notification,
+  .btn-msg {
+    border-radius: 7px $i;
+  }
+
+  .card {
+    box-shadow: none $i;
+  }
+
+  .label-info,
+  .badge-info {
+    @include prime-bg;
+  }
+
+  .help-docs {
+    @include prime-color;
+
+    a {
+      @include prime-color;
+    }
+  }
+
+  .topnav {
+
+    li {
+      font-weight: normal $i;
+      font-size: 12px $i;
+      border-radius: 4px 4px 0 0 $i;
+    }
+  }
+
+  .card {
+    background: none $i;
+  }
+
+
+
+  .nav-tabs {
+
+    .nav-link {
+      font-weight: normal $i;
+
+      &.active,
+      &.hover {
+        color: $prime-white $i;
+      }
+
+      i {
+        margin-right: 5px;
+      }
+
+    }
+  }
+
+  .nav-tabs > li > a {
+    color: $prime-black $i;
+  }
+
+  .nav-tabs > li > a:hover,
+  .nav-tabs > li > a:focus {
+    color: $prime-white $i;
+  }
+
+
+  .ibox-title {
+    padding: 0 $i;
+    border-radius: 0 $i;
+    margin-bottom: 20px $i;
+  }
+
+  .green {
+    @include prime-color;
+  }
+
+
+  .ibox-content {
+
+    &.container-bg-dark {
+      background-color: transparent $i;
+
+      label {
+        color: $prime-black $i;
+      }
+    }
+
+  }
+
+  //============================
+  // Toast Msg
+  //============================
+
+  .toast {
+    background-color: #6B48FF;
+  }
+
+  .toast-success {
+
+    background-color: #6B48FF;
+  }
+
+  .toast-error {
+    background-color: #ed5565;
+  }
+
+  .toast-info {
+    background-color: #23c6c8;
+  }
+
+  .toast-warning {
+    background-color: #f8ac59;
+  }
+
+  //============================
+  // OLD MODAL Plugin
+  //============================
+
+  .inmodal {
+
+    .modal-title {
+      color: $prime-white $i;
+    }
+
+    .modal-header {
+
+      border-radius: 10px 10px 0 0;
+    }
+  }
+
+  .modal-content {
+    border-radius: 10px;
+  }
+
+  button.close,
+  .close:not(:disabled):not(.disabled) {
+    color: $prime-white $i;
+    opacity: 1 $i;
+  }
+
+
+  //============================
+  // Feedback modal
+  //============================
+
+  .feedback-title {
+    font-size: 20px;
+    margin: 0 0 20px 0 ;
+  }
+
+  .feedback-img {
+    width: 250px;
+  }
+
+
+
+  .btnContainer {
+
+    .chamada {
+      background-color: $prime-black $i;
+    }
+
+    .remove-feedback {
+      background-color: $prime-gray-100 $i;
+      color: $prime-white $i;
+    }
+  }
+
+  .inmodal .modal-header:before,
+  .inmodal .modal-header:after
+  {
+    display: none;
+  }
+
+  .container-box-dialog {
+
+    .container-body {
+      padding: 20px $i;
+
+      .container-step {
+
+        .progress-bar-line {
+            margin: 15px 0 $i;
+            background: $prime-gray-50 $i;
+            border: none $i;
+          }
+        }
+
+        .progress-bar-line,
+        .line-values,
+        .line-values.line-position-1
+         {
+          height: 10px $i;
+        }
+    }
+
+		.container-header {
+
+      .title,
+      .sub-title  {
+        color: $prime-white $i;
+        font-weight: normal $i;
+      }
+
+		}
+
+    .container-questions {
+
+      .question {
+        width: initial $i;
+        font-weight: normal $i;
+        line-height: 22px $i;
+      }
+
+      .comments-area {
+        margin-bottom: 20px $i;
+        padding: 10px $i;
+        width: 100% $i;
+      }
+    }
+	}
+
+  .notifications-container {
+
+    .bullets {
+      display: none $i;
+    }
+  }
+
+  //============================
+  // ngx pagination
+  //============================
+  .ngx-pagination a:hover,
+  .ngx-pagination button:hover {
+    color: $prime-white $i;
+  }
+
+  .pagination-wrap {
+    display: flex;
+    justify-content: center;
+  }
+
+  //============================
+  // Custom Scroll
+  //============================
+
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: $prime-gray-50 $i;
+  }
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: $prime-primary $i;
+  }
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: $prime-complemt-2 $i;
+  }
+
+  //============================
+  // Card
+  //============================
+
+  .card-new {
+    padding: 0 $i;
+    box-shadow: none $i;
+  }
+
+  //============================
+  // tc-tab-menu
+  //============================
+
+
+//-------------------------------------
+// LOADING
+//-------------------------------------
+
+.loader-icon {
+  $clr: $prime-gray-50;
+  $sz: 3px;
+  border-top: $sz solid $prime-primary $i;
+  border-right: $sz solid $clr $i;
+  border-bottom: $sz solid $clr $i;
+  border-left: $sz solid $clr $i;
+}
+
+  //==========================================================
+  //   Login
+  //==========================================================
+
+  .login-wrap {
+
+    h1,
+    h2 {
+      color: $prime-white $i;
+    }
+  }
+
+  .login-box {
+
+    .btn-new-green {
+      width: 100%$i;
+    }
+
+    p {
+      margin-bottom: 10px;
+    }
+  }
+
+
+
+  //==========================================================
+  //   Footer
+  //==========================================================
+
+  .footer {
+
+    &.fixed {
+      background: $prime-black $i;
+      border-top-color: rgba($tc-black, .4);
+      color: rgba($tc-white, .4);
+      margin-left: 0;
+      right: inherit;
+      text-align: center;
+      width: 219px;
+      z-index: 2001;
+    }
+
+    .float-right {
+      float: none $i;
+    }
+  }
+
+
+  .copyright {
+
+    strong {
+      font-weight: normal;
+    }
+  }
+
+  //==========================================================
+  // Table
+  //==========================================================
+
+  .tc-table {
+
+    thead {
+
+      th {
+        background-color: $prime-black $i;
+        color: $tc-white $i;
+      }
+    }
+
+    th {
+      @include prime-black;
+    }
+  }
+
+  tbody tr:nth-child(odd) {
+    background: $prime-gray-10 $i;
+  }
+
+
+  //==========================================================
+  // Buttons
+  //==========================================================
+  .btn-new,
+  .btn-new-grey,
+  .btn-product-info,
+  .secondary,
+  .button-card
+  {
+    background: $prime-gray-10 $i;
+    color: $prime-black $i;
+    display: inline-flex $i;
+    align-items: center $i;
+    width: initial $i;
+
+    &.active,
+    &.opened,
+    &:hover {
+      background: $prime-primary $i;
+      color: $prime-white $i;
+    }
+
+    i {
+      font-size: 20px;
+    }
+  }
+
+  .btn,
+  .btn-new-green,
+  .btn-green-validate,
+  .refresh-button,
+  .primary,
+  .btn-light {
+    display: inline-flex $i;
+    align-items: center $i;
+    gap: 5px $i;
+    background: $prime-primary $i;
+    color: $prime-white $i;
+    width: initial $i;
+
+    &.active,
+    &.opened,
+    &:hover {
+      background: $prime-complemt-2 $i;
+
+      .fa-save {
+        color: $prime-white $i;
+      }
+    }
+  }
+
+  .btn-primary
+  {
+
+    &:hover,
+    &:focus
+    {
+      background-color: $prime-primary $i;
+      border-color: $prime-primary $i;
+      color: $prime-white $i;
+    }
+  }
+
+
+
+
+  .btn-primary {
+    border: none $i;
+  }
+
+  .btn-white {
+    background: $prime-white $i;
+    color: $prime-primary $i;
+
+    &:hover {
+      border-color: $prime-primary $i;
+      color: $prime-white $i;
+
+      i {
+        color: $prime-primary $i;
+      }
+    }
+  }
+
+  .input-group-append .btn {
+    border-radius: 0 5px 5px 0 $i;
+    background: none $i;
+    border-color: $prime-gray-100 $i;
+  }
+
+  .btn-danger {
+    color: $prime-white $i;
+    background-color:$prime-red $i;
+    border-color: $prime-red $i;
+  }
+
+  .btn-xs {
+    padding: 10px 20px $i;
+    border-radius: 30px $i;
+    font-size: 12px $i;
+  }
+
+  .btn-upload {
+    @include prime-bgc;
+  }
+
+
+  .btn-white:focus {
+    border: 1px solid $prime-primary $i;
+  }
+
+
+  .btn-success:focus,
+  .btn-success.focus {
+    box-shadow: none $i;
+  }
+
+  .btn-success:hover,
+  .btn-success:focus,
+  .btn-success.focus {
+    border-color: $prime-primary $i;
+  }
+  //==========================================================
+  // Forms
+  //==========================================================
+
+  .box-input-line-options {
+    border: 1px solid $prime-gray-100 $i;
+    padding: 10px;
+
+    label {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    cursor: pointer $i;
+    margin-right: 25px;
+    margin-bottom: 0;
+    }
+  }
+
+
+  input[type=checkbox]:after,
+  input[type=radio]:after {
+    border: 2px solid $tc-gray-600;
+  }
+
+  input[type=radio]:checked:before,
+  input[type=checkbox]:checked:after {
+    background: $tc-gray-600;
+  }
+
+  .form-control,
+  .single-line {
+    border: 1px solid $prime-gray-100;
+    border-radius: 5px;
+  }
+
+  .input-group-append {
+
+    .btn.btn-default {
+      @include prime-color;
+      background-color: transparent $i;
+      border-left-color: transparent $i;
+      border-radius: 0 5px 5px 0 $i;
+      font-size: 18px $i;
+      padding: 0 10px $i;
+      border: 1px solid $i;
+      border-color: $prime-gray-100 $i;
+    }
+  }
+
+  .input-group {
+
+    > .form-control:not(:last-child),
+    > .custom-select:not(:last-child)
+    {
+      border-right-color: transparent $i;
+      font-size: 12px;
+    }
+  }
+
+  .progress-bar {
+    @include prime-bgc;
+  }
+
+  .switch.checked {
+    @include prime-bg;
+    border-color: $prime-primary $i;
+  }
+
+
+  .tc-form-control:focus-visible {
+    outline: 1px solid $prime-primary $i;
+    // border-radius: 2px $i;
+  }
+
+
+  #datepicker {
+
+    .form-control:not(:last-child),
+    .custom-select:not(:last-child) {
+      border-right-color: $prime-gray-100 $i;
+    }
+  }
+
+  .tc-pipeline-report-all {
+
+    .ng-grid-wrap {
+      padding: 0 $i;
+    }
+  }
+
+  .input-group-append {
+    border-radius: 0 5px 5px 0 $i;
+  }
+
+  .form-input:focus {
+    border: 1px solid $prime-primary $i;
+  }
+
+  .form-input:focus-visible {
+    outline: 1px solid $prime-primary $i;
+  }
+
+  //==========================================================
+  // Alerts
+  //==========================================================
+
+  .alert-danger,
+  .alert {
+    border-color: $warning;
+    color: $danger;
+    background-color: rgba($warning, 0.1);
+  }
+
+  .text-info {
+    @include prime-color;
+  }
+
+  //==========================================================
+  // Breadcrumb
+  //==========================================================
+  .page-heading {
+    box-shadow: none $i;
+  }
+
+  .breadcrumb-wrap {
+    h2 {
+      font-weight: normal $i;
+      font-size: 14px $i;
+      margin-bottom: 0 $i;
+    }
+  }
+
+  //==========================================================
+  // Card
+  //==========================================================
+  .card,
+  .card-shadow {
+    box-shadow: none;
+    border-radius: 0;
+    margin: 0;
+    padding: 0;
+  }
+
+  .card.margin-top,
+  .card-shadow.margin-top {
+    margin-top: 20px $i;
+  }
+
+  .card-shadow-tit {
+    font-weight: bold $i;
+  }
+
+//==========================================================
+// Left Navigation Menu
+//==========================================================
+
+  //====================================
+  // User Box info
+  //====================================
+
+  .toggleBtn {
+    display: none;
+  }
+
+  .user-name {
+
+    p {
+      display:block;
+      color: $tc-white;
+      width: 150px $i;
+    }
+  }
+
+
+  .profile-icon {
+    display: none;
+  }
+
+  .tc-prime-icon.fa-user {
+    display: block $i;
+    font-size: 18px;
+    color: $tc-white;
+  }
+
+  .profile-options {
+    color: $tc-white;
+    position: absolute $i;
+    right: -22px;
+    top: 2px;
+
+    .profile-name {
+      display: none;
+    }
+
+    .fas.fa-ellipsis-v {
+      height: 20px;
+      width: 20px;
+
+      background: url('/assets/img/tc-prime_menu-icon.svg') no-repeat;
+      background-position: center center;
+
+      &:before {
+        display: none;
+      }
+    }
+  }
+
+  .dropdown {
+
+    &.profile-element{
+
+      &:after {
+        display: none;
+      }
+    }
+  }
+
+  .user-thumb {
+    display: none;
+  }
+
+  .totvs-logo-wrap {
+    background: url("/assets/img/logo-totvs-white.svg");
+    background-size: cover;
+    width: 112px;
+    height: 56px;
+    position: absolute;
+    top: -61px;
+    left: -15px;
+  }
+
+  .totvs-logo-wrap img {
+    display: none;
+  }
+
+  .nav-header {
+
+    .text-muted {
+      // color: $tc-gray-500 $i;
+      color: $prime-gray-100 $i;
+    }
+  }
+
+  //====================================
+  // Nav Menu Old
+  //====================================
+
+  .navbar-default .nav > li > a {
+    font-weight: normal $i;
+  }
+
+
+  .nav > li.active,
+  .navbar-default .nav > li > a:hover,
+  .navbar-default .nav > li > a:focus,
+  ul.nav-second-level {
+    background-color: transparent $i;
+  }
+
+  .profile-element {
+    background: none;
+  }
+
+  .user-dropdown-wrap {
+    display: flex;
+    align-items: center;
+
+    i {
+      margin-right: 20px;
+    }
+  }
+
+
+  .nav > li.active a:before {
+    display:none;
+  }
+
+  .dropdown-menu {
+    font-weight: normal;
+
+    > li > a,
+    .item-link i {
+      color: $prime-black $i;
+
+      &:hover,
+      :focus {
+        @include prime-color;
+        background: none $i;
+      }
+    }
+
+    .item-link i {
+      font-size: 20px;
+    }
+
+    &:hover {
+
+      > li > a,
+      .item-link i {
+
+        @include prime-color;
+      }
+    }
+  }
+
+  .dropdown-menu > li > a:focus,
+  .dropdown-menu > li > a:hover {
+    @include prime-color;
+  }
+
+  //====================================
+  // Prime Menu
+  //====================================
+
+  #side-menu {
+    margin-bottom: 40px;
+
+    >li {
+      margin-bottom: 2px;
+
+      a {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        color: $tc-white;
+        border-radius: 35px;
+        margin: 0 10px;
+        padding: 7px;
+        font-size: 11px;
+
+        i {
+          font-size: 18px;
+          margin-right: 0;
+        }
+      }
+
+      &.active,
+      &:hover {
+
+        > a {
+          @include prime-bg-gradient;
+        }
+      }
+
+
+      .nav-second-level {
+
+        > li {
+
+          &.active,
+          &:hover {
+
+            a {
+              color: lighten($prime-primary, 20%);
+            }
+          }
+
+          a {
+            background: none $i;
+            padding: 7px 20px 0 40px;
+            margin: 0;
+          }
+        }
+
+        .nav-third-level {
+          margin-left: 20px;
+
+          li {
+            width: 100%;
+            margin: 0;
+            margin-top: 5px;
+
+            a {
+              color: $prime-white;
+              padding: 0 15px 0 30px;
+              margin: 0;
+            }
+
+            &.active,
+            &:hover {
+
+              a {
+                color: lighten($prime-primary, 20%);
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .nav > li > a i {
+      margin: 0 $i;
+    }
+
+    .wrap-menu-icon {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    // -----------------------------
+    // ICONS MENU
+    // -----------------------------
+
+    $hgt: 25px;
+    $wdt: 20px;
+
+    .fa-laptop {
+      @include ico-menu('menu-ico_home', $hgt, $wdt);
+    }
+
+    // minha conta
+    .fa-user {
+      @include ico-menu('menu-ico_account', $hgt, $wdt);
+    }
+
+    // TSS
+    .fa-cubes {
+      @include ico-menu('menu-ico_tss', $hgt, $wdt);
+    }
+
+    // Produtos
+    .fa-server {
+      @include ico-menu('menu-ico_products', $hgt, $wdt);
+    }
+
+    // IAAS
+    .fa-cloud {
+      @include ico-menu('menu-ico_iaas', $hgt, $wdt);
+    }
+
+    // Gestão de Usuários
+    .fa-address-card {
+      @include ico-menu('menu-ico_adm-users', $hgt, $wdt);
+    }
+
+    // Administração
+    .fa-cogs {
+      @include ico-menu('menu-ico_adm', $hgt, $wdt);
+    }
+
+    // trust-center
+    .fa-lock {
+      @include ico-menu('menu-ico_trust-center', $hgt, $wdt);
+    }
+
+    // Ev Comercial
+    .fa-building {
+      @include ico-menu('menu-ico_com-event', $hgt, $wdt);
+    }
+
+    // Janela de Manutenção
+    .fa-clock {
+      @include ico-menu('menu-ico_maintenance', $hgt, $wdt);
+    }
+
+    // Migrador
+    .fa-dolly-flatbed {
+      @include ico-menu('menu-ico_migrator', $hgt, $wdt);
+    }
+
+    // DEVstudio
+    .fa-dev {
+      @include ico-menu('menu-ico_maintenance', $hgt, $wdt);
+    }
+
+  }
+
+  .menu-prime-item {
+    justify-content: space-between;
+  }
+
+
+
+//==========================================================
+  // TOP Navigation
+//==========================================================
+
+.navbar-fixed-top,
+.navbar-static-top {
+    background: $prime-white;
+  }
+
+  .tcloud-name {
+    color: $tc-black;
+    font-weight: bold;
+
+    span {
+      color: $prime-primary;
+      text-transform: uppercase;
+      margin-left: 5px;
+    }
+  }
+
+  .banner-area.image {
+    height: auto $i;
+  }
+
+  .topnav-company-name {
+
+    .dropdown {
+      background: none;
+      border: 1px solid $prime-primary;
+      border-radius: 5px;
+      padding: 5px 10px;
+
+      > a {
+        @include prime-color;
+      }
+
+      .fa-angle-down {
+        background: none $i;
+        color: $prime-primary;
+      }
+    }
+  }
+
+  .topnav-company-name.highligh {
+    background: none;
+  }
+
+  .tc-prime-company-name {
+    border: none $i;
+
+    &.highlight{
+
+      &:after,
+      &:before {
+        display: none;
+      }
+
+      a {
+        color: $prime-primary;
+      }
+
+    }
+  }
+
+  .nav {
+
+    &.navbar-top-links {
+      > li > a {
+        background: none $i;
+        color: $prime-black $i;
+        padding: 10px 5px $i;
+
+        &:hover {
+          @include prime-color;
+        }
+      }
+
+      .area-icon {
+        height: 40px;
+        width: 40px;
+        border-radius: 0;
+
+        .dropdown {
+          padding: 0 $i;
+        }
+
+      }
+
+      .dropdown {
+        background: none;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+      }
+
+      .fa-tasks {
+        @include ico-topmenu('topmenu-ico-actions', 25px, 25px );
+      }
+    }
+  }
+
+  .ico-notes {
+    background-image: url("/assets/img/topmenu/topmenu-ico-note.svg") $i;
+  }
+
+  .btn-icon.dropdown-toggle.count-info.tmu-color.assist-token-dropdown {
+
+    .assistent-call {
+      position: relative;
+      background: none;
+      @include ico-topmenu('topmenu-ico-help', 25px, 25px );
+    }
+  }
+
+  .btn-icon.dropdown-toggle.count-info.tmu-color {
+    display: flex;
+    position: relative;
+
+    .fa-envelope {
+      @include ico-topmenu('topmenu-ico-messages', 25px, 25px );
+    }
+
+  }
+
+  .btn-group-icons {
+
+    .icon-group {
+      @include prime-color;
+      padding: 0 $i;
+      position: relative;
+      top: 0;
+      left: 0;
+
+      .icon-main {
+        left: 0 $i;
+        top: 4px $i;
+        @include ico-topmenu('topmenu-ico-imperso', 25px, 25px );
+      }
+
+      .icon-second {
+        display: none;
+      }
+    }
+  }
+
+
+
+
+//==========================================================
+// Prime T-Cloud UI KIT Components
+//==========================================================
+
+  //====================================
+  // Tab Menu
+  //====================================
+  .tc-menu {
+    background: $prime-gray-10 $i;
+    border-radius: 7px $i;
+  }
+
+  .tab-title {
+
+    &:hover {
+      background: $prime-complemt-2 $i;
+    }
+
+    &.tab-title-active {
+      @include prime-bg;
+    }
+  }
+
+  .area-navigation {
+
+    td {
+      &:first-child,
+      &:last-child {
+
+        button {
+          @include prime-color;
+        }
+      }
+    }
+  }
+
+
+  .subnav {
+
+    .tc-menu {
+      background: none $i;
+    }
+  }
+
+
+
+
+
+
+
+
+  //====================================
+  // Modal
+  //====================================
+
+  .tc-mode-info {
+
+    h4 {
+      margin: 0;
+      padding: 0;
+      color: #fff$i;
+      font-weight: normal$i;
+      text-transform: uppercase;
+      font-size: 13px;
+    }
+  }
+
+
+  //==========================================================
+  // Contract Admin
+  //==========================================================
+
+  .adm-contrato {
+
+    .nav-tabs .nav-link.active,
+    .nav-tabs .nav-item.show .nav-link,
+    .nav-tabs .nav-link:not(.active):focus,
+    .nav-tabs .nav-link:not(.active):hover {
+      @include prime-white;
+    }
+
+  }
+
+  //==========================================================
+  // STEPS - table-trilha
+  //==========================================================
+
+  .table-trilha {
+
+    .circle {
+      border: none $i;
+      background-color: $prime-gray-50 $i;
+      position: relative;
+      z-index: 1;
+
+      &.icon-step-active {
+        border: none $i;
+        background-color: $prime-primary $i;
+
+        .area-index {
+          font-size: 20px $i;
+          color: $prime-white $i;
+        }
+
+      }
+    }
+
+    .area-index {
+      color: $prime-gray-100 $i;
+    }
+
+    .step-line {
+      background-color: $prime-gray-50 $i;
+    }
+  }
+
+
+//==========================================================
+//==========================================================
+// PAGES
+//==========================================================
+//==========================================================
+
+
+  //=================================================
+  // Dashboard
+  //=================================================
+
+  .prime-dashboard {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    margin-bottom: 20px;
+  }
+
+  .admin-email-wrap {
+
+    i {
+      font-size: 20px;
+    }
+  }
+
+
+
+  .dash-users-admin {
+    min-width: 450px;
+  }
+
+  .card-shadow-tit {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .dash-users-admin {
+
+    .card-shadow-subtit {
+      display: none $i;
+    }
+  }
+
+
+  .tc-card-engprime {
+    @include prime-mkt-gradient;
+    color: $tc-white;
+    padding: 20px;
+    border-radius: 10px;
+    flex: 1;
+
+    a {
+      color: $tc-white;
+    }
+  }
+
+  .tc-card-engprime-header {
+    margin-bottom: 20px;
+  }
+
+  .tc-img-engprime {
+    overflow: hidden;
+    border-radius: 30px;
+    height: 43px;
+    width: 43px;
+
+    img {
+      width: 100%;
+    }
+  }
+
+  .tc-card-engprime-name {
+    font-size: 16px;
+    text-transform: uppercase;
+  }
+
+  .tc-card-engprime-content {
+    display: flex;
+    gap: 20px;
+  }
+
+  .tc-card-Tooltip {
+    display: flex $i;
+    font-weight: normal;
+    font-size: 12px;
+    text-transform: none;
+
+    i {
+      font-size: 20px;
+      color: $prime-gray-100;
+    }
+  }
+
+  .product-card-info {
+    font-size: 12px;
+    flex-flow: row-reverse $i;
+    justify-content: flex-end;
+    gap: 20px;
+
+    background: $prime-gray-10;
+    padding: 8px 10px;
+    border-radius: 6px;
+
+    max-width: 346px;
+    width: 345px;
+    position: absolute;
+    top: 18px;
+
+    .product-card-title-wrap {
+      color: $prime-black $i;
+      background: transparent $i;
+      margin: 0$i;
+      padding: 0$i;
+      gap: 5px$i;
+
+      .ambient-title,
+      .topologie-length {
+        font-size: inherit$i;
+      }
+
+      .ambient-title {
+        font-weight: bold$i;
+      }
+    }
+  }
+
+  .product-card-logo-wrap {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    margin: 0$i;
+
+    img {
+      display: none;
+    }
+
+    h2 {
+      display: block $i;
+      font-size: 12px $i;
+      color: $prime-black;
+      text-transform: uppercase;
+      margin: 0 $i;
+      font-weight: bold $i;
+    }
+
+    &:before {
+      content: 'Linha';
+      text-transform: uppercase;
+      font-weight: bold;
+      color: $prime-black;
+    }
+  }
+
+  .card-topology {
+    display: flex $i;
+    flex-flow: column $i;
+    justify-content: space-between $i;
+    min-height: 176px $i;
+
+    border:1px solid $prime-gray-100;
+    color: $prime-black $i;
+    border-radius: 5px $i;
+    box-shadow: none $i;
+
+
+    &:hover .card-topology__header {
+      background-color: transparent$i;
+      // @include prime-color;
+    }
+
+    .card-topology__header {
+      background-color: transparent$i;
+      @include prime-color;
+      text-transform: uppercase;
+      border-bottom: 1px solid $prime-gray-50;
+    }
+
+    .card-topology__footer {
+      background-color: transparent$i;
+      border-top: 1px solid $prime-gray-50;
+    }
+  }
+
+  .dash-product-list-container {
+
+    .col-10 {
+      -ms-flex: 0 0 100%$i;
+      flex: 0 0 100%$i;
+      max-width: 100%$i;
+      width: 100%$i;
+      margin-top: 70px;
+    }
+
+  }
+
+  .prime-dashboard-search {
+    position: absolute;
+    top: 45px;
+    left: 360px;
+    margin: 0;
+
+    .input-group {
+      margin: 0;
+      width: 350px;
+    }
+  }
+
+  .card-products-tit {
+    color: $prime-black$i;
+    font-weight: bold$i;
+  }
+
+  .card-products-wrap {
+    margin-bottom: 0;
+  }
+
+
+  .msg-search {
+    border-radius: 10px;
+
+    .wrap {
+
+      i {
+        font-size: 30px;
+      }
+    }
+  }
+
+  .card-products-content {
+
+    .tc-menu {
+      background: transparent $i;
+      margin: 0;
+    }
+
+    .tab-title {
+      font-size: 16px $i;
+      background: transparent $i;
+      padding: 0 $i;
+      margin-right: 30px;
+
+      min-width: initial $i;
+      max-width: initial $i;
+
+      &:hover,
+      &.tab-title-active {
+        @include prime-color;
+        background: transparent $i;
+      }
+    }
+
+    .area-navigation td:first-child button,
+    .area-navigation td:last-child button {
+      display: none $i;
+    }
+
+    .tab-menu-wrap {
+      margin: 20px 0 0 $i;
+    }
+
+    .msg-search {
+
+      .wrap {
+        border-radius: 10px $i;
+        margin-top: 70px;
+      }
+    }
+  }
+
+  .card-products-header {
+    padding-bottom: 20px;
+  }
+
+  .card-admin-user {
+    display: grid $i;
+    grid-template-columns: repeat(2, 1fr) $i;
+    max-height: 100px $i;
+    overflow-y: auto $i;
+
+    /* Track */
+    ::-webkit-scrollbar-track {
+      background: $prime-gray-50 $i;
+    }
+    /* Handle */
+    ::-webkit-scrollbar-thumb {
+      background: $prime-primary $i;
+    }
+    /* Handle on hover */
+    ::-webkit-scrollbar-thumb:hover {
+      background: $prime-complemt-2 $i;
+    }
+  }
+
+  .admin-fullname-wrap,
+  .admin-email-wrap {
+    gap: 5px $i;
+  }
+
+
+
+  //====================================
+  // onboard engprime
+  //====================================
+
+  .onboard-engprime {
+
+    .tc-card-engprime {
+      min-width: 290px;
+    }
+  }
+
+  .tc-card-engprime-wrap {
+    display: flex;
+    flex-flow: column;
+    flex: 1;
+  }
+
+
+
+  .tc-prime-more-info-link {
+    cursor: pointer;
+    text-transform: uppercase;
+    font-size: 10px;
+    margin-top: 10px;
+
+    display: flex;
+    gap: 5px;
+
+    i {
+      display: flex;
+      font-size: 14px;;
+    }
+  }
+
+  .modal-eng-prime-header {
+    @include flex-center;
+    gap: 20px;
+    @include bdr-bottom(20px, $prime-gray-50);
+
+    .modal-eng-prime-text {
+      margin-left: 40px;
+    }
+  }
+
+  .modal-eng-prime-header-title {
+    font-size: 20px;
+    text-transform: uppercase;
+  }
+
+
+  .modal-eng-prime-name {
+    text-transform: uppercase;
+  }
+
+  .modal-eng-prime-info {
+
+    span {
+      display: block;
+    }
+
+  }
+
+  .numb-order {
+    @include flex-center;
+    border-radius: 50px;
+    height: 70px;
+    width: 70px;
+
+    p {
+      color: $prime-white;
+      font-size: 40px;
+    }
+  }
+
+  .modal-eng-prime-content {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
+
+
+  }
+
+  .modal-eng-prime-content-wrap {
+    @include flex-center;
+    gap: 20px;
+
+    .modal-eng-prime-text-content {
+      display: flex;
+      align-items: center;
+      gap: 20px;
+
+      padding: 10px;
+      border: 2px solid $prime-gray-50;
+      border-radius: 10px;
+      width: 270px;
+    }
+  }
+
+  .modal-eng-prime-thumb {
+    @include flex-center;
+    border: 2px solid $prime-gray-100;
+    border-radius: 50%;
+    height: 50px;
+    width: 50px;
+  }
+
+  //====================================
+  // Actions tab
+  //====================================
+  .sidebar-container {
+
+    .tab-content {
+
+      h4 {
+        display: flex;
+        align-items: center;
+        gap: 7px;
+      }
+    }
+
+    .text-info {
+      font-size: 20px;
+    }
+  }
+
+  .navy-bg {
+
+    &.opened,
+    &:hover {
+
+      h3 {
+        color: $prime-white $i;
+      }
+    }
+  }
+
+  .tc-list-backup-files_title {
+    font-size: 13px $i;
+  }
+
+
+  .tc-backup-wrap {
+
+    .topnav {
+
+      ul {
+        background-color: transparent $i;
+
+        li:hover {
+          background-color: transparent $i;
+        }
+      }
+    }
+
+    h2 {
+      font-size: 14px $i;
+    }
+  }
+
+
+  .tc-product-info {
+
+    a {
+      @include prime-color;
+
+      &:hover {
+        @include prime-color;
+      }
+    }
+
+  }
+
+
+
+  //====================================
+  // VPN
+  //====================================
+
+
+  tc-security-vpn {
+
+    .col-lg-12.text-right {
+
+      .btn.btn-link {
+        color: $prime-white $i;
+      }
+    }
+
+
+    .btn.btn-link.m-r {
+      color: $prime-primary $i;
+    }
+
+    .changes-controllers {
+      .btn.btn-link.m-r {
+        color: $prime-primary $i;
+      }
+    }
+  }
+
+
+  .sql-editor-wrap {
+
+    .history-name {
+      margin: 20px 0 0 $i;
+    }
+  }
+
+  .sql-disclaimer-container {
+    background-color: transparent $i;
+  }
+
+
+  tc-topologie {
+
+    .tc-menu {
+      margin-bottom: 20px;
+    }
+  }
+
+  .tc-security-app-modify-restrictions {
+
+    .label-warning,
+    .badge-warning {
+      background-color: transparent;
+      border: 3px solid $prime-second $i;
+      color: $prime-black $i;
+      border-radius: 5px $i;
+
+      .fa-exclamation-triangle {
+        margin-right: 5px;
+        color: $prime-second $i;
+      }
+    }
+
+    .config-index {
+      background-color: $prime-primary $i;
+    }
+  }
+
+  .whitelist-wrap {
+
+    .config-index {
+      background-color: $prime-primary $i;
+    }
+  }
+
+  .whitelist-wrap,
+    .tc-security-app-modify-restrictions .rowBox {
+    border: 3px solid $prime-gray-50 $i;
+
+  }
+
+
+  //=================================================
+  // Products Topologies
+  //=================================================
+
+  //====================================
+  // Carousel
+  //====================================
+
+  .env-card-header {
+    background: none $i;
+    @include prime-gray-100;
+
+    .fa-cog,
+    .icon-date-create {
+      @include prime-gray-100;
+    }
+
+    .status {
+      color: $prime-black;
+    }
+  }
+
+  .top-id-wrap:hover .top-id,
+  .top-id-wrap:hover i {
+    @include prime-color;
+  }
+
+
+  .slick-dots li.slick-active button:before {
+    @include prime-color;
+  }
+
+  .slick-dots {
+
+    li {
+
+      button:before {
+        @include prime-bgc;
+      }
+
+      &.slick-active {
+
+        button {
+
+          &:before {
+            @include prime-bgc;
+            opacity: 1;
+          }
+        }
+      }
+    }
+  }
+
+  .slick-prev:before,
+  .slick-next:before {
+    @include prime-color;
+  }
+
+  .env-card-wrap {
+
+    .ibox-content.selected > :after,
+    .ibox-content:hover > :after {
+      border-top: 13px solid $prime-primary$i;
+    }
+
+    .ibox-content:hover,
+    .ibox-content.selected {
+      box-shadow: none$i;
+    }
+  }
+
+
+  .slick-dots {
+    display: none$i;
+  }
+
+  .ibox-content.selected > :after,
+  .ibox-content:hover > :after {
+    bottom: -13px$i;
+  }
+
+  .env-card-content {
+
+    .wrap {
+      flex-flow: row-reverse $i;
+    }
+  }
+
+
+  .prime-topologies-header {
+    display: block $i;
+  }
+
+  .prime-topologies-header-content {
+    display: flex;
+    gap: 20px;
+    align-items: stretch;
+    border-bottom: 1px solid $prime-gray-50;
+    height: 53px;
+  }
+
+
+  .prime-topology-title-page {
+    display: flex;
+    align-items: center;
+
+    h1 {
+      font-size: 14px $i;
+      font-weight: 500 $i;
+    }
+
+    i {
+      margin-left: 10px;
+      color: $prime-gray-100;
+    }
+
+    .header-title {
+      background: transparent $i;
+    }
+
+  }
+
+  .prime-length-wrap {
+    display: flex;
+    gap: 20px;
+    align-items: center;
+    border-left: 1px solid $prime-gray-50;
+    padding-left: 20px;
+
+    .tplg-legnth {
+      font-weight: bold;
+    }
+  }
+
+  .env-length,
+  .header-title {
+    display: none $i;
+  }
+
+  .help-docs {
+    position: absolute $i;
+    top: -171px $i;
+    right: -15px $i;
+
+    i {
+      @include prime-color;
+    }
+  }
+
+  .topologies-header {
+    min-height: initial $i;
+    margin: 20px 0 $i;
+  }
+
+  .ibox-content {
+    margin-top: 0 $i;
+    padding: 0 $i;
+    border: none $i;
+  }
+
+
+  .slick-list .slick-slide .ibox-content.selected .env-card-header .status.error {
+    color: red $i;
+  }
+
+  .env-card.error {
+    .slick-list .slick-slide .ibox-content.selected .env-card-header .fa-cog {
+      color: red $i;
+    }
+
+  }
+
+  .env-card {
+
+    .ibox-content {
+      border: 3px solid $prime-gray-100 $i;
+      border-radius: 5px;
+
+      .env-card-header {
+        border-bottom: 2px solid $prime-gray-100;
+      }
+
+      &.selected,
+      &:hover {
+        border-color: $prime-primary $i;
+
+        .env-card-header {
+          border-bottom: 2px solid $prime-primary $i;
+
+          .status,
+          .fa-cog,
+          .icon-date-create {
+            @include prime-color;
+          }
+        }
+      }
+
+    }
+
+    &.error {
+
+      .env-card-header {
+        border-bottom: 2px solid $prime-red $i;
+
+        .status,
+        .icon-date-create {
+          color: $prime-red $i;
+        }
+
+        .status{
+          color: $prime-red $i;
+
+          &.error {
+            background-color: transparent $i;
+          }
+        }
+      }
+
+      .ibox-content {
+        border-color: $prime-red $i;
+
+        &.selected,
+        &:hover
+        {
+
+          .env-card-header {
+            border-bottom: 2px solid $prime-red $i;
+
+            .fa-cog,
+            .status,
+            .icon-date-create {
+              color: $prime-red $i;
+            }
+
+            i {
+              color: $prime-red $i;
+            }
+
+          }
+
+          .env-card-content {
+
+            &:after {
+              border-top-color: $prime-red $i;
+            }
+          }
+        }
+      }
+    }
+
+    &.migrating {
+
+      .env-card-header {
+        border-bottom: 2px solid $prime-second $i;
+
+        .status,
+        .icon-date-create {
+          color: $prime-second $i;
+        }
+
+        .status{
+          color: $prime-second $i;
+
+          &.error {
+            background-color: transparent $i;
+          }
+        }
+      }
+
+      .ibox-content {
+        border-color: $prime-second $i;
+
+        &.selected,
+        &:hover
+        {
+
+          .env-card-header {
+            border-bottom: 2px solid $prime-second $i;
+
+            .fa-cog,
+            .status,
+            .icon-date-create {
+              color: $prime-second $i;
+            }
+
+            i {
+              color: $prime-second $i;
+            }
+
+          }
+
+          .env-card-content {
+
+            &:after {
+              border-top-color: $prime-second $i;
+            }
+          }
+        }
+      }
+    }
+  }
+
+
+
+  .bedge-wrap {
+
+    &.wrap-footer {
+
+      .label-success,
+      .badge-success {
+        color: $prime-black $i;
+        font-weight: normal;
+      }
+    }
+  }
+
+  .internet-access-box,
+  .legendas {
+    background: $prime-gray-10 $i;
+  }
+
+  .vpn-list-box {
+    // @include test;
+
+    .vpn-box  {
+      background-color: $prime-gray-10 $i;
+    }
+  }
+
+  //====================================
+  // Actions
+  //====================================
+
+  #prod-prime {
+
+    .boxFastAccess {
+      border: none $i;
+      border-bottom: 1px solid $prime-gray-50 $i;
+      border-radius: 0 $i;
+      border-top: 1px solid $prime-gray-50 $i;
+
+      margin: 0 0 20px $i;
+
+      tc-menu {
+
+        .tc-menu {
+          margin-bottom: 30px;
+        }
+      }
+
+    }
+
+    .boxAction {
+      border: none $i;
+
+      .box-search {
+        padding: 0 $i;
+        height: initial $i;
+      }
+    }
+
+    .text-success {
+
+      &:hover {
+        @include prime-bg;
+        color: $prime-white $i;
+      }
+
+    }
+  }
+
+
+  #prime-quick-access {
+
+    &:hover .pin-action:hover + .text-success,
+    &:hover .trash-action:hover + .text-success {
+      @include prime-bg;
+      color: $prime-white $i;
+    }
+
+    .text-success,
+    .fa-save {
+      color: $prime-black $i;
+    }
+  }
+
+  .pin-icon {
+    @include prime-color;
+    font-size: 20px;
+    top: 0 $i;
+  }
+
+  .pin-action {
+    background-color: $prime-complemt-2 $i;
+  }
+
+
+  .actions-title-bar {
+
+    h2 {
+      margin: 5px 0 10px;
+      font-size: 20px $i;
+      text-transform: uppercase;
+    }
+
+    small {
+      font-size: 9px $i;
+    }
+  }
+
+
+
+  .monitor-wrap {
+
+    .label-success {
+      @include prime-bgc;
+    }
+
+    .col.btn-wrap {
+      display: none $i;
+    }
+
+  }
+
+  .vertical-timeline-content {
+
+    .ibox-content {
+      padding: 15px $i;
+    }
+  }
+
+  #quickAccess {
+
+    .box-search-row-action:hover .trash-action:hover + .text-success {
+      @include prime-bg;
+    }
+  }
+
+  .boxFastAccess .box {
+    margin: 10px 0 0 $i;
+  }
+
+ .group-smart-form {
+
+    button i {
+      color: $prime-primary $i;
+    }
+
+  }
+
+  //====================================
+  // Services
+  //====================================
+
+  .servicos-table-wrap {
+
+    .btn.btn-xs {
+      background: none$i;
+    }
+
+    .fa-save {
+      @include prime-gray-100;
+    }
+  }
+
+  //====================================
+  // Data Base
+  //====================================
+
+  .database-users {
+    border: none $i;
+    padding: 0 $i;
+
+    p.m-l {
+      display: block $i;
+      margin: 0 0 10px $i;
+    }
+
+    .create-user-box {
+      p {
+        margin-bottom: 10px $i;
+      }
+    }
+  }
+
+  .database-session-management {
+    border: none $i;
+    padding: 0 $i;
+
+    .sessions-table {
+
+      .sessions-header {
+        background-color: $prime-black $i;
+      }
+    }
+  }
+
+
+
+  //====================================
+  // Security
+  //====================================
+
+  .changes-controllers {
+
+    .btn-link {
+      background: transparent $i;
+    }
+  }
+
+  .rules-helper-wrapper {
+
+    .rules {
+      border: 3px solid $prime-gray-100 $i;
+      border-radius: 7px $i;
+
+      .illustration {
+        border: 3px solid $prime-gray-100 $i;
+        border-radius: 7px $i;
+
+      }
+
+      .rule {
+
+        .title {
+          text-transform: uppercase;
+        }
+      }
+    }
+  }
+
+  .tc-security-v2 {
+
+    .topnav {
+      margin: 0 $i;
+
+      ul li:hover {
+        background-color: transparent $i;
+      }
+    }
+
+    .container-button {
+      justify-content: flex-end;
+      display: flex;
+
+      .col-lg-2.mb-2 {
+        justify-content: flex-end;
+        display: flex;
+      }
+    }
+
+    .grid-content .grid-item.item5.action-area .icon-button {
+      font-size: 17px;
+
+    }
+  }
+
+  .know-the-rules-wrap {
+    // @include test(red);
+
+    .primary {
+      background-color: transparent $i;
+    }
+  }
+
+  .country-select-wrap {
+
+    .rules-form,
+    .form-select {
+      background: $prime-gray-10 $i;
+    }
+  }
+
+  tc-security-app-modify-restrictions {
+
+    .rules-form {
+      background: $prime-gray-10 $i;
+
+      i {
+        color: $prime-gray-100 $i;
+      }
+    }
+
+  }
+
+  //====================================
+  // Update central
+  //====================================
+
+
+  .update-central-component {
+
+    .text-right {
+      margin: 0 $i;
+    }
+  }
+
+  .topnav a:hover,
+  .topnav a.active {
+    color: $prime-white $i;
+    @include prime-bg;
+  }
+
+
+  //==========================================================
+  //   My Account
+  //==========================================================
+
+  .card-name  {
+    color: $prime-white $i;
+  }
+
+  //====================================
+  // Consume
+  //====================================
+
+  .tss-contract {
+
+    :after {
+      display: none;
+    }
+
+    h3 {
+      padding: 0 $i;
+    }
+
+
+    .col-12 {
+      padding: 0;
+    }
+
+    .search-wrap {
+      width: 495px;
+    }
+
+    .grid:hover:after {
+      top: -52px;
+      left: 508px;
+    }
+
+    .info-list {
+      display: grid;
+      grid-template-columns: 160px 220px auto;
+      align-items: initial;
+      margin: 0;
+
+      li {
+        margin-left: 0 $i;
+        padding-left: 0 $i;
+      }
+    }
+
+    .consumed {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      justify-content: stretch;
+      gap: 40px;
+    }
+
+    .info-list-tit {
+      align-items: center;
+      gap: 20px;
+
+      div {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+    }
+
+    .info-list-item {
+
+      &.consume {
+        @include test;
+      }
+    }
+  }
+
+  .store-offer {
+    border-radius: 7px $i;
+  }
+
+  .tss-contract .wrap.radius {
+    border: none $i;
+  }
+
+  .prod-contract-title {
+    font-weight: normal $i;
+  }
+
+  .store-offer {
+    align-items: center;
+    justify-content: center;
+  }
+
+  .grid:hover:after {
+    display: block;
+  }
+
+  .recursos-info-total-wrap {
+    background: none $i;
+  }
+
+  .contrato-card {
+    justify-content: initial $i;
+    min-height: initial $i;
+    font-size: 15px;
+  }
+
+  .ambientes-wrap {
+    margin: 0 $i;
+
+    .icon-wrap {
+      @include flex-center;
+      // font-family: 'Font Awesome 6 Free';
+      // color: $prime-gray-100;
+      // height: 50px;
+      // width: 50px;
+
+      // img {
+      //   // display: none;
+      // }
+
+      // &::before {
+      //   font-size: 40px;
+      //   content: "\e163";
+      // }
+    }
+  }
+
+  .contrato-card {
+    min-height: 410px $i;
+    box-shadow: none $i;
+    border: 2px solid $prime-gray-50;
+  }
+
+
+  //====================================
+  // Billing
+  //====================================
+
+  .extrato-card {
+
+    .header {
+
+      h1 {
+        margin-bottom: 20px ;
+      }
+    }
+
+  }
+
+  .billing-header {
+    padding: 10px;
+  }
+
+  .billing-header,
+  .extract-wrap,
+  .billing-content .billing-detail,
+  .total-wrap
+  {
+    border-color: $prime-gray-100 $i;
+  }
+
+  .billing-content {
+
+    .billing-detail:last-child {
+      margin-bottom: 3px;
+    }
+  }
+
+  .total-wrap {
+
+    .total-soma {
+      font-weight: normal;
+    }
+  }
+
+  .offer,
+  .card-offer,
+  .card-offer-title,
+  .offer .offer-tit,
+  .simulation-box
+  {
+    border-radius: 0 $i;
+  }
+
+  .card-offer {
+
+    .wrap {
+      background: $prime-gray-50;
+    }
+  }
+
+  .card-offer,
+  .offer
+  {
+    border-color: $prime-primary $i;
+  }
+
+  .total-wrap,
+  .simulation-box
+
+  {
+    background: $prime-gray-50 $i;
+  }
+
+  .card-offer-title,
+  .offer .offer-tit
+  {
+    background: $prime-primary $i;
+  }
+
+  .offer-wrapper-icon {
+
+    img {
+      @include svg-prime;
+    }
+  }
+
+
+  .card-offer .wrap,
+  .simulation-box
+
+  {
+    background: none $i;
+  }
+
+  .simulation-box {
+    border-top: 1px solid $prime-gray-100;
+  }
+
+  .offer-head-img {
+
+    img {
+      height: 95px;
+    }
+  }
+
+  .offer-wrapper-content {
+
+    .val {
+      margin-bottom: 15px;
+    }
+  }
+
+  .simulation-box {
+    margin: 10px 0 0 $i;
+    padding: 10px $i;
+  }
+
+
+  //====================================
+  // SLA
+  //====================================
+
+  .accordion2-btn:hover {
+    @include prime-bg-50;
+  }
+
+  //====================================
+  // SLA
+  //====================================
+
+  .order-wrap {
+    @include prime-bdr-100;
+  }
+
+  .order-new {
+    @include prime-color;
+
+    .order-detail-tit {
+      @include prime-bg;
+    }
+  }
+
+  .history-list {
+
+    li {
+      @include prime-gray-50;
+
+      a {
+        color: $prime-black $i;
+      }
+    }
+
+  }
+  //==========================================================
+  //   IAAS
+  //==========================================================
+
+  .iaas-start-page {
+
+    .content-helpme {
+
+      h3 {
+        margin-bottom: 20px $i;
+      }
+    }
+
+    .content-helpme {
+      background-color: transparent $i;
+
+    }
+  }
+
+  .container-page-iaas {
+
+    .title-wrap {
+      background: transparent;
+      margin: 0;
+    }
+
+    .container-table {
+
+      .container-columns {
+        background-color: $prime-black $i;
+      }
+    }
+
+    .container-columns {
+
+      .container-info {
+        margin: 0 $i;
+      }
+
+      .fas {
+        color: $prime-white $i;
+      }
+
+    }
+
+    .item-click {
+      font-size: 11px;
+    }
+
+    .container-item .container-options .icon-default {
+      font-size: 40px;
+    }
+
+    .container-body {
+
+      .content-header {
+
+        .container-count-wizard {
+
+          .container-item {
+            border: none $i;
+            background-color: $prime-gray-50 $i;
+            color: $prime-gray-100 $i;
+
+            &.active,
+            &.completed {
+              font-size: 20px $i;
+              color: $prime-white $i;
+              background-color: $prime-primary $i;
+            }
+
+          }
+
+        }
+
+        &:has(.content-helpme) {
+          height: 210px $i;
+        }
+
+      }
+
+      .content-helpme {
+
+        h3 {
+          margin-bottom: 10px;
+        }
+
+      }
+    }
+
+    .primary:disabled {
+      background-color: rgba($prime-primary, 0.5) $i;
+    }
+
+    .container-network {
+
+      .container-list-network {
+        margin-top: 0 $i;
+      }
+    }
+
+    .container-card-list {
+
+      .container-item {
+
+        &:hover,
+        &.active {
+          background-color: $prime-gray-50 $i;
+          color:$prime-black $i;
+          border-radius: 0 $i;
+        }
+      }
+    }
+
+    .container-item {
+
+      .container-options {
+        grid-gap: 15px $i;
+
+        .fa-plus-square {
+          font-size: 22px $i;
+        }
+
+        .icon-default.remove {
+          color:$prime-red $i;
+        }
+      }
+    }
+
+    .container-page {
+
+      .container-table {
+
+        .container-columns {
+          max-height: initial $i;
+          min-height: initial $i;
+
+          .col-item p {
+            margin: 10px $i;
+            font-size: 10px $i;
+            line-height: 15px $i;
+          }
+        }
+      }
+
+    }
+
+    .container-empty {
+      padding: 0 $i;
+    }
+
+    .container-row {
+
+      .col-item {
+
+        &.backup-item {
+          margin: 0 $i;
+        }
+
+        &.actions,
+        &.backup-item
+        {
+          align-items: initial $i;
+        }
+
+        &.actions {
+
+          .remove-icon-button {
+            font-size: 20px $i;
+          }
+        }
+      }
+    }
+
+    .fa-icon-info {
+      color: $prime-second $i;
+    }
+
+    .container-icon {
+      color: $prime-primary $i;
+      background-color: transparent $i;
+    }
+
+    .container-content .container-header .title {
+      text-transform: uppercase $i;
+      font-size: 14px $i;
+    }
+
+    .container-content .checkout-content .resume-env .resume-env-header .offer-controls .offer-button {
+      border-radius: 7px 7px 0 0 $i;
+    }
+
+    .container-content .checkout-content .resume-header .environment-data .content,
+    .container-content .checkout-content .resume-header .network-data .content {
+      background-color: transparent $i;
+      border: 2px solid $prime-gray-50 $i;
+    }
+
+
+
+  // ==========================
+  } // end Style IAAS page
+  // ==========================
+
+  .container-input.success input {
+    background-color: transparent $i;
+    border-color: $prime-primary $i;
+    color: $prime-primary2 $i;
+    font-size: 13px $i;
+  }
+
+  .container-dialog {
+
+    .container-header,
+    .container-header.warning {
+      background-color: $prime-primary $i;
+    }
+  }
+
+
+
+  // ==========================
+  // checkout
+  // ==========================
+
+  .box-vouncher {
+
+    .btn-link {
+      color: $prime-black $i;
+      border: 2px solid #EEEEEE;
+      border-radius: 5px;
+      padding: 10px;
+      font-size: 14px;
+
+      span {
+        color: $prime-primary $i;
+      }
+    }
+
+  }
+
+
+  .virtual-machine-content {
+
+    .vm-flavor__cpu,
+    .vm-flavor__ram,
+    .vm-so-disk__size,
+    .vm-disk-backup__status,
+    .vm-disk__size,
+    .vm-disk__iops
+    {
+      border-radius: 4px $i;
+    }
+
+    .vm-header__expand-btn.active {
+      background: transparent $i;
+    }
+  }
+
+
+  //==========================================================
+  //   IAAS - Import VM
+  //==========================================================
+
+  .iaas-import-vm {
+
+    .welcome-page-title {
+      margin-bottom: 20px;
+    }
+
+    .welcome-page-paragraph {
+      margin-bottom: 10px;
+      line-height: 21px;
+    }
+
+    .welcome-page-content-button {
+      margin-top: 20px;
+    }
+
+    .welcome-page-box {
+      background-color: transparent $i;
+      border: 2px solid $prime-gray-50;
+      border-radius: 5px $i;
+    }
+
+    .welcome-page-box-paragraph {
+      margin-bottom: 20px;
+    }
+
+    .welcome-page-box-icon {
+      background-color: transparent $i;
+
+      i {
+        color: $prime-primary $i;
+      }
+    }
+
+    .welcome-page-box-icon-terminal {
+      border-radius: 4px $i;
+    }
+  }
+
+  .welcome-page-info {
+    flex-basis: unset $i;
+    margin: 0 auto 20px $i;
+  }
+
+  .select-bucket-page-wrap {
+
+    .select-bucket-page-box {
+      background-color: transparent $i;
+      border: 2px solid $prime-gray-50;
+      border-radius: 5px $i;
+    }
+
+    .select-bucket-page-box-icon {
+      background-color: transparent $i;
+    }
+  }
+
+  .box-card-import-virtual-machine {
+
+    .send-request-page-number-step {
+      margin-bottom: 20px $i;
+    }
+  }
+
+  .modal-list-instances-header {
+
+    h2 {
+      font-size: 14px $i;
+      text-transform: uppercase;
+    }
+  }
+
+  .file-manager-container {
+    min-height: initial $i;
+  }
+
+  .box-card-import-virtual-machine {
+
+    .container {
+      border: 1px solid $prime-gray-100 $i;
+    }
+
+    .title-image {
+      height: initial $i;
+      margin: 10px 0 $i;
+    }
+
+    .container-input {
+
+      textarea {
+        height: 95px;
+      }
+    }
+
+    .title-image p {
+      height: initial $i;
+      border-bottom: 1px solid $prime-gray-100 $i;
+      padding-bottom: 5px $i;
+    }
+  }
+
+  .msg-warning-wrap {
+    color: $prime-black $i;
+    background-color: transparent $i;
+    border: 2px solid $prime-second $i;
+
+
+    .msg-warning-paragraph {
+      margin-bottom: 20px $i;
+
+      strong {
+        display: block $i;
+      }
+    }
+  }
+
+  .container-icon.user-name {
+    right: -2px $i;
+  }
+
+  .icon-fm {
+    color: $prime-black $i;
+  }
+
+  //==========================================================
+  //   IAAS - Page
+  //==========================================================
+
+  &.iaas-page {
+
+    .background-page-global {
+      background-color: lighten($prime-primary, 34.8%) $i;
+    }
+
+    .box-relative {
+      top: initial;
+      height: initial;
+    }
+  }
+
+
+  //==========================================================
+  //   IAAS - Ações executadas
+  //==========================================================
+
+  .tc-pipelines {
+
+    .pb-5,
+    .py-5 {
+      padding: 20px 0 0 20px $i;
+
+      .title {
+        margin-bottom: 20px;
+      }
+    }
+
+  }
+
+  .monitor-wrap.label-success {
+    border-color: $prime-primary $i;
+  }
+
+  //==========================================================
+  //   IAAS - Ambientes
+  //==========================================================
+
+  .container-card-topology {
+    border-radius: 5px $i;
+    // @include prime-bdr-100;
+    border: 2px solid $prime-gray-100 $i;
+
+    .container-header-card {
+      background: none $i;
+      color: $prime-black $i;
+      border-bottom: 2px solid $prime-gray-100 $i;
+      border-radius: 5px 5px 0 0 $i;
+    }
+
+    &.active,
+    &:hover {
+      @include prime-bdr;
+
+      i {
+        color: $prime-primary $i;
+      }
+
+      .container-header-card {
+        border-bottom: 2px solid $prime-primary $i;
+
+        span {
+          color: $prime-primary $i;
+        }
+      }
+    }
+
+    &.done {
+
+      &:after {
+        border-top-color: $prime-primary $i;
+        bottom: -15px $i;
+      }
+    }
+
+    &.error {
+      border-color: $prime-red $i;
+
+      .container-header-card {
+        background-color: transparent $i;
+        border-bottom: 2px solid $prime-red $i;
+
+        p,
+        i {
+          color: $prime-red $i;
+        }
+
+      }
+    }
+  }
+
+  .container-card-body,
+  .container-all-list .container-list-vms,
+  .container-body .container-actions
+  {
+    box-shadow: none $i;
+    border-radius: 5px $i;
+  }
+
+
+  .container-body {
+    border-radius: 5px $i;
+
+    .container-card-details {
+
+      .card-details-item {
+        border-radius: 5px $i;
+        font-size: 12px $i;
+        border: 2px solid $prime-gray-50 $i;
+
+        .container-header-card {
+          color: $prime-black $i;
+          background: none $i;
+          border-bottom: 2px solid $prime-gray-50;
+          border-radius: 5px 5px 0 0 $i;
+        }
+
+        &:hover {
+          border-color: $prime-primary $i;
+        }
+
+        .container-infos {
+
+          .info-item {
+            flex-flow: column;
+            gap: 5px;
+            background: none $i;
+            border: 1px solid $prime-gray-50 $i;
+            margin-bottom: 5px;
+
+            &:last-child {
+              margin: 0;
+            }
+          }
+        }
+
+      }
+    }
+
+    .container-actions {
+      border: 2px solid $prime-gray-50 $i;
+
+      .action-item {
+        background: $prime-gray-50 $i;
+
+        &:hover {
+          background: $prime-primary $i;
+          color: $prime-white;
+        }
+
+      }
+    }
+
+    .disk-box {
+      background: none $i;
+      border: 2px solid $prime-gray-50 $i;
+      border-radius: 5px $i;
+    }
+  }
+
+  .container-header-card {
+
+    img {
+      @include svg-prime;
+    }
+
+    p {
+      font-size: 12px;
+    }
+  }
+
+  .tippy-content {
+
+    .access-template-text {
+
+      a {
+        color: $prime-complemt $i;
+      }
+    }
+  }
+
+  .container-empty {
+
+    .empty-image {
+      width: 200px $i;
+    }
+  }
+
+
+  .container-refresh {
+    background-color: transparent $i;
+
+  }
+
+  .vertical-timeline-block {
+
+    .label-info,
+    .badge-info {
+      background: none $i;
+    }
+  }
+
+  .container-item-vm:hover,
+  .container-item-vm.active {
+    background-color: $prime-gray-50 $i;
+  }
+
+  .container-body .container-header .title {
+    margin-bottom: 10px;
+  }
+
+  .timeline-text {
+    font-weight: normal $i;
+  }
+
+  .control-button.refresh.running {
+    background-color: var(--tc-primary);
+  }
+
+  .monitor-dashboard-container .monitor-container .title {
+    margin: 20px 0 $i;
+  }
+
+  //==========================================================
+  //   IAAS - Configurações Gerais
+  //==========================================================
+
+  .container-page .container-table .container-cols {
+    background-color: $prime-black $i;
+  }
+
+  .container-page .container-card-details .card-details-item {
+    border: 2px solid $prime-gray-50 $i;
+
+    .container-header-card {
+      background: none $i;
+      color: $prime-black $i;
+      border-bottom: 1px solid $prime-gray-100 $i;
+    }
+  }
+
+
+  //==========================================================
+  //   IAAS - Ajuda
+  //==========================================================
+
+  .iaas-help-header {
+
+    .wrap {
+      margin: 0 40px;
+
+      p {
+        margin-bottom: 20px;
+        font-weight: normal;
+        margin-bottom: 20px;
+      }
+
+      a {
+        display: inline-flex $i;
+      }
+    }
+  }
+
+
+  .help-content-card {
+    background: none $i;
+    border-radius: 5px $i;
+    box-shadow: 0 0 0 2px $prime-gray-100;
+
+    &:hover {
+      box-shadow: 0 0 0 2px $prime-primary $i;
+    }
+
+    p {
+      margin-bottom: 20px;
+      font-weight: normal;
+      margin-bottom: 20px;
+    }
+
+    a {
+      display: inline-flex $i;
+    }
+  }
+
+
+  //==========================================================
+  //   IAM - Gestão de Usuários
+  //==========================================================
+
+  .grid .grid-content .grid-item:first-child p,
+  .grid .grid-header .grid-item:first-child p {
+    font-weight: normal;
+  }
+
+  .grid .grid-header .grid-item {
+    background: $prime-black $i;
+  }
+
+  .help-iam {
+
+    h1 {
+      margin: 40px 0 20px;
+    }
+  }
+
+
+  .help-iam-header {
+
+    h2, h3, p, li {
+      font-weight: normal $i;
+    }
+  }
+
+  .help-iam-content {
+
+    h3, h4, p, li {
+      font-weight: normal $i;
+    }
+  }
+
+  .tc-accordion {
+    border: 2px solid $tc-gray-200 $i;
+    border-radius: 5px $i;
+
+    .area-filter {
+      padding: 0 $i;
+    }
+
+    .form-control {
+      font-size: 12px $i;
+    }
+  }
+
+
+  .progress-wrap-tex {
+    @include prime-gray-100;
+  }
+
+  .progress-wrap .progress-wrap-bar,
+  .form-fieldset label
+  {
+    @include prime-bg-50;
+  }
+
+  .progress-wrap-text {
+    text-transform: uppercase;
+    font-size: 14px $i;
+    @include prime-gray-100;
+  }
+
+
+  #permissoes {
+
+    .box {
+      border-radius: 5px $i;
+      @include prime-bdr-100;
+      padding: 20px $i;
+    }
+  }
+
+  .card-footer-wrap {
+    margin-bottom: 20px $i;
+  }
+
+  .user-paper {
+
+    .sub-titulo {
+      padding-right: 180px;
+    }
+  }
+
+
+  #tabIamUser {
+
+    .box-grid-content {
+
+      .grid-content {
+
+        .grid-item {
+          background: $prime-gray-10;
+        }
+
+        &:nth-child(odd) {
+
+          .grid-item {
+            background: $prime-gray-50;
+          }
+        }
+
+        &.active {
+
+          .grid-item {
+            background: $prime-primary $i;
+            color:$prime-white $i;
+          }
+
+          &:before {
+            background: $prime-primary;
+          }
+        }
+      }
+    }
+
+  }
+
+  #this-roles {
+
+    .box-border-green {
+      border: 2px solid $prime-primary;
+    }
+  }
+
+  //==========================================================
+  //   Administration
+  //==========================================================
+
+  // ==========================
+  // adm contract
+  // ==========================
+
+  .adm-contrato {
+
+    .header {
+      margin-bottom: 20px;
+    }
+  }
+
+  // ==========================
+  // News
+  // ==========================
+
+  .tc-crud-news {
+
+    .grid-body {
+
+      .grid-for:nth-child(odd) {
+        background: $prime-gray-10 $i;
+      }
+    }
+
+    .news-icon-wrap {
+
+      i {
+        color: $prime-gray-100 $i;
+
+        &.fa-trash-alt:hover {
+          color: $prime-red $i;
+        }
+      }
+    }
+
+    .grid-header {
+      font-weight: normal $i;
+
+      .item {
+        background: $prime-black $i;
+
+        &:first-child,
+        &:last-child {
+          border-radius: 0 $i;
+        }
+      }
+    }
+
+
+    .modal-header {
+
+      h4 {
+        font-weight: normal $i;
+      }
+
+      .fa-exclamation-triangle {
+        color: $prime-second $i;
+      }
+    }
+  }
+
+  // ==========================
+  // Customer feedback
+  // ==========================
+
+
+  .tc-customer-feedback {
+
+    h2 {
+      margin-bottom: 20px;
+    }
+
+    h3 {
+      cursor: pointer;
+      margin-bottom: 20px;
+    }
+  }
+
+  // ==========================
+  // Reports
+  // ==========================
+
+  .project-list {
+    .table-hover tbody tr:hover {
+      background-color: $prime-primary $i;
+    }
+  }
+
+  .inmodal .modal-header small {
+    font-weight: normal $i;
+  }
+
+  .feature-group {
+
+    p {
+      margin: 20px 0 $i;
+    }
+  }
+
+  .ibox-heading h3 {
+    font-size: initial $i;
+    margin-bottom: 10px;
+  }
+
+  // ==========================
+  // Reports
+  // ==========================
+  .tcode-search {
+    margin: 20px 0;
+  }
+
+  // ==========================
+  // IAM
+  // ==========================
+
+  // Associação de Papéis
+  .iam_rules-actions {
+
+    .ibox-content {
+
+      &.container-bg-dark {
+        background-color: transparent $i;
+      }
+
+    }
+
+  }
+
+  .iam_user-rules,
+  .iam_rules-actions,
+  .iam_rules-groups {
+
+    .ibox-content {
+      border: none $i;
+    }
+
+    .ibox-tools {
+      position: relative $i;
+      top: 15px $i;
+      right: 15px $i;
+    }
+
+    .table-hover tbody tr:hover .btn-white:hover {
+      background: $prime-white $i;
+    }
+
+    .feature-actions {
+
+      .btn-white {
+
+        &:hover {
+          color: $prime-primary $i;
+        }
+      }
+    }
+  }
+
+  // ==========================
+  // Provisionamento
+  // ==========================
+
+  .tc-launcher-page {
+
+    .ibox-content {
+      background-color: transparent $i;
+      border: 2px solid $prime-gray-50 $i;
+      border-radius: 5px $i;
+      margin-top: 0 $i;
+      padding: 10px $i;
+      margin-bottom: 20px $i;
+
+      .ibox-content {
+        margin-bottom: 0 $i;
+      }
+    }
+
+    .ibox-heading {
+      margin-top: 10px $i;
+
+      small {
+
+        i {
+          margin-right: 5px;
+          font-size: 14px;
+        }
+      }
+    }
+
+    .text-center {
+
+      .btn-success {
+        border-color: transparent $i;
+      }
+    }
+
+
+    .widget-head-color-box {
+
+      &.card-header {
+        background-color: transparent $i;
+        color: $prime-black $i;
+        border-radius: 7px 7px 0 0 $i;
+        border: 2px solid $prime-gray-50 $i;
+
+        p {
+          line-height: 25px;
+          margin: 20px 0;
+        }
+
+
+      }
+    }
+
+
+    .col-12.text-right {
+
+      .btn-success {
+        border-color: transparent $i;
+      }
+    }
+
+    .widget-text-box {
+      border-radius: 0 0 7px 7px $i;
+      border-width: 2px $i;
+    }
+
+    .ibox-content.search-code {
+
+      .col-12.text-center {
+        align-items: center;
+        justify-content: flex-end;
+        display: flex;
+      }
+    }
+
+  }
+
+  .ibox-title {
+
+    h5 {
+      font-size: 16px $i;
+      text-transform: uppercase $i;
+    }
+  }
+
+  // ==========================
+  // Provisionamento em Exec
+  // ==========================
+
+  .tc-list-provisioning {
+    margin-bottom: 20px;
+
+    .container-item {
+      border: 2px solid $prime-gray-50 $i;
+      border-radius: 5px;
+      box-shadow: none;
+    }
+
+    .container-item .container-top-card .container-infos {
+      border: 1px solid $prime-gray-50 $i;
+      background-color: transparent $i;
+    }
+  }
+
+  // ==========================
+  // Listagem de Templates
+  // ==========================
+
+  .list-component {
+    margin: 20px 0 $i;
+
+    .nav-tabs {
+      margin-bottom: 20px;
+    }
+  }
+
+  // ==========================
+  // Importação de Ambientes
+  // ==========================
+
+  .tc-import-env {
+
+    .card-container {
+      padding: 0 $i;
+      background: none $i;
+    }
+
+    h1 {
+      font-size: 16px $i;
+      text-transform: uppercase $i;
+      margin-bottom: 20px;
+    }
+
+    .panel-body {
+      padding: 20px 20px 0 $i;
+
+      p {
+        margin-bottom: 20px;
+      }
+    }
+  }
+
+
+
+  //==========================================================
+  //   Administration Evento comercial
+  //==========================================================
+
+
+  // ==========================
+  // Requisições
+  // ==========================
+
+  .tc-requests {
+
+    .tc-tab-menu {
+      overflow: hidden $i;
+    }
+
+    .area-navigation td button {
+      top: -3px $i;
+    }
+
+    h3 {
+      @include prime-subtitle;
+    }
+
+    .sec-time {
+      bottom: 130px $i;
+    }
+
+    .box-master {
+      background-color: $prime-gray-10 $i;
+      border-radius: 7px $i;
+
+      &:hover {
+        border: 3px solid $prime-gray-100 $i;
+      }
+
+    }
+
+    .line-info {
+      display: flex;
+      justify-content: flex-end;
+
+    }
+
+    td {
+      padding: 20px 0 $i;
+    }
+
+    th {
+      background-color: $prime-black $i;
+    }
+  }
+
+  //==========================================================
+  //   Trust Center
+  //==========================================================
+
+  .card-new.trustcenter {
+    margin: 25px $i;
+  }
+
+  .trustcenter {
+
+    p {
+      line-height: 22px $i;
+      margin-bottom: 1rem;
+    }
+
+    h1 {
+      margin-bottom: 20px $i;
+    }
+
+    h4 {
+      line-height: 20px;
+      margin-bottom: 10px $i;
+    }
+
+    .text-wrap {
+
+      p {
+        margin-bottom: 5px;
+      }
+    }
+
+    .trust-text-card {
+      border: 3px solid $prime-gray-100;
+      border-radius: 10px;
+    }
+
+    .title-btn-actions,
+    .page-description {
+      margin-bottom: 10px;
+    }
+  }
+
+  .trustcenter-standard {
+    display: none;
+  }
+
+  .trust-center-prime {
+    display: block;
+    margin: 20px 0;
+
+    .trust-center-prime_header {
+      margin-bottom: 20px;
+      padding-bottom: 20px;
+      border-bottom: 1px solid $prime-gray-50;
+
+      h1 {
+        margin-bottom: 10px;
+      }
+
+    }
+
+    .trust-center-prime_content {
+      display: flex;
+      gap: 30px;
+      margin-bottom: 20px;
+    }
+
+   .trust-center-prime_content-wrap {
+      padding-right: 40px;
+    }
+
+    .trust-center-prime_content-wrap-text {
+      margin-bottom: 40px;
+    }
+
+    .trust-center-prime_content-wrap-links {
+      display: grid;
+      grid-template-columns: repeat(3, 2fr);
+      gap: 20px;
+    }
+
+    .trust-center-prime_content-wrap-link_header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 20px;
+    }
+
+    .trust-center-prime_content-wrap-link_title {
+      text-transform: uppercase;
+    }
+
+    .trust-center-prime_content-wrap-link_content {
+      margin-bottom: 20px;
+    }
+
+    .trust-center-prime_content-wrap-link_footer {
+      margin-bottom: 20px;
+    }
+  }
+
+  .trust-text-card .icone {
+
+    img {
+      filter: invert(88%) sepia(11%) saturate(20%) hue-rotate(3deg) brightness(91%) contrast(88%);
+    }
+  }
+
+  .trust-center_certifications {
+
+    img {
+      filter: none $i;
+    }
+
+  }
+
+  .trustcenter-download-wrap {
+
+    p {
+      margin-bottom: 10px;
+    }
+
+    ul {
+      line-height: 30px;
+    }
+  }
+
+  .trust-text-card .btn {
+    display: inline-flex $i;
+    width: initial $i;
+  }
+
+  .trust-text-card {
+
+    .download-button {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+
+      i {
+        left: initial $i;
+        margin: 0 $i;
+      }
+    }
+  }
+
+
+  .tc-sales-history_welcome {
+
+    h2 {
+      margin-bottom: 20px;
+    }
+
+    hr {
+      display: none $i;
+    }
+  }
+
+  .mfa-reports {
+    margin-top: 20px;
+  }
+
+
+  //==========================================================
+  //   Evento comercial
+  //==========================================================
+  // Teste
+  // TCLAUDI2
+
+  .iam-user-adm {
+    // @include test (red);
+    margin-bottom: 20px;
+
+    h2 {
+      text-transform: uppercase;
+      margin-bottom: 40px;
+    }
+
+
+    thead {
+
+      th {
+        padding:10px $i;
+        background-color: $prime-black $i;
+        font-size: 10px $i;
+      }
+    }
+
+    .btn-action-icon {
+
+      i {
+        color: $prime-primary $i;
+      }
+    }
+    .resume .resume-header,
+    .resume .prod-wrap,
+    .resume .company-wrap {
+      box-shadow: none $i;
+      padding: 0 $i;
+    }
+  }
+
+  .com-event_config-products-modal {
+
+    p.text-center {
+      margin-bottom: 20px;
+    }
+
+  }
+
+  .btn-search {
+    display: inline-flex $i;
+  }
+
+  .commercial-event_edit-modal-btn-wrap {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .box-step-actions {
+    margin-top: 0 $i;
+    margin-bottom: 0 $i;
+    margin: 20px auto $i;
+  }
+
+
+  .w-btn {
+    div {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+
+    }
+  }
+
+  .title-product {
+    background-color: $prime-black $i;
+  }
+
+
+
+  //==========================================================
+  // Maintenance
+  //==========================================================
+
+  .list-maintenance-window {
+
+    .card-list-item {
+      background-color: $prime-gray-10 $i;
+      border: 2px solid $prime-gray-100;
+      border-radius: 5px;
+    }
+
+    .card-list-item {
+      background-color: transparent $i;
+
+      .info-header {
+
+        .text-center {
+          text-align: initial $i;
+        }
+      }
+
+      .info-window-title {
+        font-size: 11px;
+      }
+    }
+  }
+
+  //==========================================================
+  // Migration
+  //==========================================================
+
+
+  .migration-list {
+
+    i {
+      @include prime-color;
+    }
+  }
+
+  #newMigrationModal {
+
+    .form-content {
+
+      /* Track */
+      ::-webkit-scrollbar-track {
+        background: $prime-gray-50 $i;
+      }
+      /* Handle */
+      ::-webkit-scrollbar-thumb {
+        background: $prime-primary $i;
+      }
+      /* Handle on hover */
+      ::-webkit-scrollbar-thumb:hover {
+        background: $prime-complemt-2 $i;
+      }
+    }
+
+
+    .btn-upload {
+      @include prime-bgc;
+    }
+
+
+    .box-border,
+    .box-border-label {
+      border-color: $prime-gray-100 $i;
+    }
+
+    .box-border-label {
+      padding-bottom: 10px $i;
+      margin-bottom: 10px $i;
+    }
+
+  }
+
+
+  .tc-uploader {
+
+    .wrap {
+      margin-bottom: 20px;
+    }
+
+    .btn-wrap {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+
+
+
+  //==========================================================
+  // dev studio
+  //==========================================================
+
+  .dev-studio_form {
+
+    .ibox-content {
+      border: none $i;
+    }
+  }
+
+  .dev-studio_form-btn-wrap {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .smart-forms {
+
+    h4 {
+      margin-bottom: 20px;
+      text-transform: uppercase;
+    }
+
+    h2 {
+      margin-bottom: 0 $i;
+    }
+
+  }
+
+  //==========================================================
+  // custumer service
+  //==========================================================
+
+  .token-btn {
+    border-radius: 5px $i;
+    background-color: $prime-primary $i;
+    border-color: $prime-primary $i;
+  }
+
+  //==========================================================
+  // insights
+  //==========================================================
+
+  .insights-card {
+    border-left-color: $prime-primary $i;
+
+    &:hover {
+      background: $prime-complemt-2 $i;
+    }
+  }
+
+  //==========================================================
+  // tc-communication-message
+  //==========================================================
+
+
+
+
+  .tc-communication-message {
+
+    h2 {
+      text-transform: uppercase;
+      text-transform: uppercase;
+      border-bottom: 1px solid $prime-gray-100 $i;
+      padding-bottom: 10px;
+      margin-bottom: 10px $i;
+    }
+
+  }
+
+  //==========================================================
+  // DEVStudio
+  //==========================================================
+
+  ::ng-deep tc-draft-area {
+
+    .topnav {
+
+      a {
+        background: transparent $i;
+        color: $prime-primary $i;
+
+        &.active {
+          border-bottom: none $i;
+        }
+      }
+    }
+  }
+
+  //==========================================================
+  // protheus-erp-form
+  //==========================================================
+
+  .protheus-erp-form {
+    .my-offers-form{
+      .my-offers-form-header{
+        background-color:#6B48FF !important
+      }
+    }
+    .my-offers-form-section-final-result-sum{
+      label{
+        color:#6B48FF $i;
+      }
+      div{
+        span{
+          color:#6B48FF $i;
+        }
+      }
+    }
+  }
+
+  //==========================================================
+  // file-manager-menu
+  //==========================================================
+
+  tc-file-manager-menu {
+
+    .card-path {
+      border: 2px solid $prime-gray-100 $i;
+
+      button {
+
+        &:focus,
+        &:hover {
+          i {
+            color: #6B48FF $i;
+          }
+        }
+      }
+
+      &.area-active {
+        border-color: $prime-primary $i;
+      }
+    }
+
+  }
+
+  tc-list-directory-file {
+    .btn-file {
+      color: #6B48FF $i;
+    }
+  }
+
+
+// =================================================================
+// =================================================================
+}  // End T-Cloud Prime Styles
+// =================================================================
+// =================================================================
+