@import "typography.css";
@import "buttons.css";
@import "all.min.css";
@import "inputs.css";
@import "links.css";
@import "tables.css";
@import "sizes.css";
@import "dropdowns.css";
@import "paginations.css";
@import "selects.css";
@import "alignments.css";
@import "textfields.css";
@import "textareafields.css";
@import "switches.css";
@import "skeleton.css";
@import "cursors.css";
@import "opacities.css";
@import "statesenterprises.css";
@import "borders.css";
@import "status.css";
@import "progress.css";
@import "modals.css";
@import "evaluationButtons.css";
@import "graphs.css";
@import "boxs.css";
@import "accordion.css";
@import "scrolls.css";
@import "cardAlert.css";

@font-face {
    font-family: "Darker Grotesque";
    src: url(../webfonts/DarkerGrotesque-Light.ttf);
    font-weight: 300;
}

@font-face {
    font-family: "Darker Grotesque";
    src: url(../webfonts/DarkerGrotesque-Regular.ttf);
    font-weight: 400;
}

@font-face {
    font-family: "Darker Grotesque";
    src: url(../webfonts/DarkerGrotesque-Medium.ttf);
    font-weight: 500;
}

@font-face {
    font-family: "Darker Grotesque";
    src: url(../webfonts/DarkerGrotesque-SemiBold.ttf);
    font-weight: 600;
}

@font-face {
    font-family: "Darker Grotesque";
    src: url(../webfonts/DarkerGrotesque-Bold.ttf);
    font-weight: 700;
}

@font-face {
    font-family: "Darker Grotesque";
    src: url(../webfonts/DarkerGrotesque-ExtraBold.ttf);
    font-weight: 800;
}

@font-face {
    font-family: "Darker Grotesque";
    src: url(../webfonts/DarkerGrotesque-Black.ttf);
    font-weight: 900;
}

body,
html,
#app {
    width: 100%;
    height: 100%;
    font-family: "Darker Grotesque" !important;
    font-size: 16px;
    font-weight:600;
}

#app {
    display: flex;
    flex-wrap: wrap;
}

.font-weight-bold {
    font-weight: bold !important;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
}

.mr-1 {
    margin-right: 10px;
}


.ml-1 {
    margin-left: 10px;
}

.login-body {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.gl-main {
  background-color: var(--gl-bg-gray);
  width: calc(100% - 220px);
  min-height: calc(100% - 80px);
  height: auto;
  flex-grow: 1;
}

.gl-area-gray {
    background-color: var(--gl-bg-gray);
}

.gl-nav {
    width: 220px;
    max-width: 100%;
    min-height: calc(100% - 80px);
    height: auto;
    display: flex;
    flex-direction: column;
    background-color: white;
}

.gl-header {
    width: 100%;
    min-height: auto;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

@media(min-width: 769px){
    .gl-header{
        height: 80px;
    }
}

.gl-header-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

.gl-header-around {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px;
}

.gl-icon-outline-box {
    padding: 9px, 24px, 9px, 24px;
    border-radius: 4px;
    background: var(--glemo-sature-blue);
    color: var(--glemo-blue);
}

.gl-stats-product {
    background: #E4E4E7 !important;
    cursor: pointer;
}

.gl-stats-product-active {
    background: #0059FF1A !important;
    border: 1px solid #0059FF;
    cursor: pointer;
}

.gl-stats-box small {
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0em;
    text-align: left;
    color: #71717A;
}

.gl-graph-box {
    gap: 10px;
    border: 1px solid #E4E4E7;
    background: linear-gradient(0deg, #FFFFFF, #FFFFFF), linear-gradient(0deg, #E4E4E7, #E4E4E7);
    border-radius: 10px;
    padding: 10px 20px;
    width: 100%;
}

.dropdown-toggle-without-after::after {
    content: "";
    display: none !important;
  width: 200px;
  min-height: calc(100% - 80px);
  height: auto;
  display: flex;
  flex-direction: column;
  background-color: white;
}

input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

select {
    cursor: pointer !important;
}

.gl-image-selected {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: auto;
    min-height: 200px;
    display: flex;
    justify-content: end;
    align-items: start;
    border: solid 1px black;
}

/*Stepper*/
.gl-steper-conteiner {
  background-color: white;
  padding: 1rem 0.5rem;
}

ol.stepper {
  --default-b: lightgrey;
  --default-c: black;
  --active-b: gray;
  --active-c: white;
  --circle: 2em; /* size of circle */
  --b: 2px; /* line thickness */

    display: flex;
    list-style: none;
    justify-content: space-between;
    background: linear-gradient(var(--default-b) 0 0) no-repeat 50% calc((var(--circle) - var(--b))/2)/100% var(--b);
    counter-reset: step;
    padding: 0;
    font-size: 18px;
    font-weight: bold;
    counter-reset: step;
    overflow: hidden;
}

    ol.stepper li {
        display: flex;
        place-items: center;
        gap: 5px;
        background-color: white;
        padding-right: 0.5rem;
        cursor: pointer;
    }

        ol.stepper li::before {
            content: counter(step) " ";
            counter-increment: step;
            display: flex;
            align-items: center;
            justify-content: center;
            aspect-ratio: 1;
            height: var(--circle);
            border: 5px solid #fff;
            background: var(--default-b);
            color: var(--default-c);
            border-radius: 50%;
            z-index: 1;
        }

        ol.stepper li.active::before {
            background: var(--glemo-blue);
            color: white
        }

        ol.stepper li.active::after {
            content: "";
            position: absolute;
            height: var(--b);
            right: 100%;
            top: calc((var(--circle) - var(--b))/2);
            width: 100vw;
            background: var(--active-b);
        }

/********/

.enterprise-cad-img-title {
    color: var(--glemo-blue);
    font-size: 30px;
    font-weight: 700;
    line-height: 28px;
}

.enterprise-cad-img-text {
    color: #000000A8;
    font-size: 20px;
    line-height: 14px;
    font-weight: 700;
}

.mob-none {
  display: flex;
  flex-wrap: wrap;
}

.enterprise-characteristic-select-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: solid 1px #97979799;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.gl-tag-success::before {
    background-color: #00A669;
    content: "";
    display: inline-block;
    width: 10px; 
    height: 10px; 
    border-radius: 50%; 
    margin-right: 5px;
}

.gl-tag-success {
    background-color: #C2FFE9;
    color: #00A669;
    padding: auto 30px !important;
}

@media (max-width: 768px) {
    .mob-none {
        display: none;
    }

  .gl-main {
    width: 100%;
  }

    .gl-nav {
        width: 0px;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        overflow: hidden;
        transition: 0.5s all ease-in;
    }

        .gl-nav.open {
            width: 200px;
        }

  ol.stepper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    background: none;
    overflow-x: scroll !important;
  }

  ol.stepper li {
    display: flex;
  }

  ol.stepper li.active::after {
    content: "";
    position: absolute;
    width: var(--b);
    bottom: 100%;
    left: calc((var(--circle) - var(--b)) / 2);
    top: auto;
    right: auto;
    height: 100vw;
    background: var(--active-b);
  }
}

.table-adj {
    width: 100%;
}

    .table-adj tr {
        border-bottom: solid 1px #00000061;
    }


.title-finish-cad {
    font-size: 36px;
    line-height: 48px;
    text-align: center;
    color: var(--glemo-blue);
    font-weight: 700;
    margin-bottom: 2rem;
}


.card-campaign-detail {
    background-color: #F6F8F9;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 25px;
    border: 1px solid #00000061;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}