/* Variaveis para reutilizacao dentro do base.css */

:root {
    /* cores */
    --ms-black: #333;
    --ms-black-light: #4f4f4f;
    --ms-erro: #B74545;
    --ms-erro-light: #FFD0D0;
    --ms-fundo: #f5f5f5;
    --ms-green: #219653;
    --ms-gray-light: #e0e0e0;
    --ms-orange: #F2994A;
    --ms-orange-dark: #e69043;
    --white: #fff;
    --ms-azul: #0a0a1d;

    /* fontes */
    --rodape__font--size: 0.85rem;
    --global__font--size: 16px;
}

/* === Globais === */

html {
    font-size: var(--global__font--size);
    font-weight: 400;
    overflow-y: scroll;
}

body {
    font-family: 'Roboto', sans-serif;
    color: var(--ms-black);
    background: var(--ms-fundo);
    margin-bottom: 90px;
    margin-top: 140px !important;
}

label,
input {
    margin: 5px;
}

.label-infoms {
    min-width: 195px;
}

/* fix para checkbox dos grids de aprovacao da Renault */
input.cbox {
    margin: 0;
}

td button {
    margin-left: 5px;
    width: auto;
}

a {
    text-decoration: none;
}

/* (fix para os links da caixa de selecao de relatorios não ficarem sublinhados) */
a.selectBox:hover {
    text-decoration: none;
}

/* === Sobreposicao do menu Bootstrap e configuracoes === */
/* --> (smenu/addons/bootstrap-4/jquery.smartmenus.bootstrap-4.css) */

.navbar {
    min-height: 60px;
}

.navbar-brand {
    line-height: 50px;
}

/* cor de fundo do menu */
.navbar-custom {
    background-color: var(--ms-green);
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.233);
}

/* texto e logo */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: var(--white);
}

/* cor do link */
.navbar-custom .navbar-nav .nav-link {
    color: var(--white);
}

/* links ativos e sobrepostos */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: var(--ms-gray-light);
}

.dropdown-item {
    font-size: 1rem;
}

.dropdown-item.active,
.dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: var(--ms-green);
}

/* sombra e sobreposicao do menu */
.navbar__menu {
    position: fixed;
    z-index: 10;
    font-size: 1rem;
    top: 0;
    width: 100vw;
}

/* === Sobreposições Django === */

td button {
    height: 35px;
}

td select {
    margin: 5px;
}

/* === BEM (novos estilos) === */

/* header = submenu abaixo do menu oficial */
.header__submenu {
    display: flex;
    align-items: center;
    background: var(--white);
    height: 55px;
    /* transition: 450ms ease; */
}

.header__submenu.scrolled {
    opacity: 0.35;
}

.header__logos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 25px;
    padding-left: 25px;
}

.header__logos--ms {
    width: auto;
    max-height: 25px;
}

.header__logos--cliente {
    width: auto;
    max-height: 25px;
}

/* fim do header */

/* menu rapido Renault */
.content__menu--rapido {
    /* display: flex; */
    padding: 10px;
    margin-top: 10px;
    border-left: 5px solid var(--ms-gray-light);
    border-right: 5px solid var(--ms-gray-light);
    background-color: white;
}

.content__menu--rapido a {
    color: var(--ms-black);
    text-decoration: none;
}

.conteudo {
    background: rgb(255, 255, 255);
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    box-sizing: border-box;
    height: auto;
    padding: 10px 35px 20px 35px;
    font-size: 0.9rem;
    box-shadow: 2px 2px 25px rgba(0, 0, 0, 0.31);
}

.relatorio-base {
    height: 55vmax;
}


/* Home Dashboard */

.page-title {
    font-size: 1.5rem;
}

.welcome {
    display: flex;
    flex-direction: column;
}

.welcome-message,
.aviso-inline-message {
    font-size: 0.9rem;
    font-weight: lighter;
}

.home-options-area {
    min-width: 100%;
    height: 140px;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-bottom: 10px solid #e0e0e0;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.slider-left,
.slider-right {
    display: none;
}

.home-option {
    max-width: 100px;
    min-width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 1.25;
}

.home-option:hover {
    cursor: pointer;
}

.home-option .option-icon {
    font-size: 2.5rem;
    color: #CCCCCC;
}

.home-option .option-title {
    font-size: 0.85rem;
    font-weight: bold;
    line-height: 1.15;
    text-transform: uppercase;
}

.home-option a {
    display: flex;
    flex-direction: column;
}

.home-option a,
.home-option a:hover {
    color: var(--ms-green);
    text-decoration: none;
}

.dashboard-no-cards {
    height: 60vh;
    padding: 1rem;
    border: 3px dashed #E0E0E0;
    border-radius: 5px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dashboard-no-cards span {
    color: #c4c4c4;
    font-size: 2rem;
    font-weight: lighter;
}

.dashboard-card-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
}

.dashboard-card {
    width: 32%;
}

.dashboard-card-title {
    width: 125px;
    height: 45px;
    border: 1px solid #E0E0E0;
    border-radius: 5px;
    margin-bottom: -10px;
    padding-top: 7px;
    font-size: 0.85rem;
    font-weight: bold;
    color: #828282;
    text-align: center;
    text-transform: uppercase;
}

.dashboard-card-body {
    height: 100%;
    justify-content: center;
    min-height: 300px;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-bottom: 10px solid #e0e0e0;
    padding: 0.75rem;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}

.dashboard-card table {
    width: 100%;
}

.dashboard-card table td:first-child {
    text-align: right;
}

.dashboard-card table td,
.dashboard-card table th {
    padding: 0.75rem;
    vertical-align: middle;
    line-height: 1.35;
}

.dashboard-card .loader {
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.dashboard-card-source-grouper {
    text-transform: uppercase;
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--ms-black-light);
    text-align: left !important;
}

.dashboard-card-source-clean {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 1rem;
    border: 1px dashed var(--ms-green);
    border-radius: 5px;
    color: var(--ms-green);
    text-transform: uppercase;
    font-size: 0.75rem;
    text-align: center;
    width: 100%;
    justify-content: center;
}

.dashboard-card-body .hidden,
.dashboard-card-source-grouper .hidden {
    display: none;
}


.card-detail-count {
    font-size: 1.5rem;
    color: var(--ms-green);
    font-weight: bold;
}

.card-detail-message {
    font-size: 0.9rem;
    color: #828282;
}

.card-detail-link {
    font-size: 0.9rem;
    text-transform: uppercase;
    font-weight: bold;
}

.card-detail-link.card-detail-link-active {
    color: #FFFFFF;
    background: var(--ms-green);
}

.card-detail-link.card-detail-link-active:hover {
    color: #FFFFFF;
    background: #1B7843;
}

/* Loader para os cards */

.loader .loader-counter,
.loader .loader-line1,
.loader .loader-line2,
.loader .loader-button {
    animation: loader 1.75s infinite ease-in-out;
    -webkit-animation: loader 1.5s infinite ease-in-out;
}

.loader .loader-line1,
.loader .loader-line2 {
    height: 12px;
    margin-bottom: 10px;
    animation-delay: .1s;
}

.loader .loader-counter {
    width: 40px;
    height: 12px;
}

.loader .loader-button {
    width: 54px;
    height: 35px;
    border-radius: 2px;
    animation-delay: .2s;
}

.loader .loader-line1 {
    width: 145px;
}

.loader .loader-line2 {
    width: 80px;
}

@keyframes loader {
    0% {
        background-color: rgba(165, 165, 165, 0.1);
    }
    50% {
        background-color: rgba(165, 165, 165, 0.3);
    }
    100% {
        background-color: rgba(165, 165, 165, 0.1);
    }
}

@-webkit-keyframes loader {
    0% {
        background-color: rgba(165, 165, 165, 0.1);
    }
    50% {
        background-color: rgba(165, 165, 165, 0.3);
    }
    100% {
        background-color: rgba(165, 165, 165, 0.1);
    }
}

.rodape {
    position: fixed;
    bottom: 0;
    padding: 10px;
    width: 100%;
    background-color: var(--ms-green);
    z-index: 99;
}

.rodape__disclaimer {
    display: flex;
    justify-content: space-between;
    font-size: var(--rodape__font--size);
    color: var(--white);
}

.rodape__disclaimer a {
    color: var(--white);
}

.rodape__disclaimer a:hover {
    text-decoration: none;
}


/* === Legacy CSS (antigo base.css) === */

/* Hand cursor on clickable controls */

input[type=button],
input[type=submit],
button {
    cursor: pointer;
}

/*------- Main Left ------*/

#main_left {
    /*position: fixed;*/

    float: left;
    width: 177px;
    margin-left: -204px;
}

/*------- Main Conteúdo ------*/

#main_conteudo {
    width: 100%;
}

#main_center {
    width: 80%;
}

/*------- Main Right ------*/

#main_right {
    float: right;
    width: 15%;
}

/*------- Forms ------*/
.focus {
    border: 2px solid #000000;
    background: #FFFFCC;
}

button {
    float: right;
    position: relative;
    border: 0;
    padding: 0;
    cursor: pointer;
    overflow: visible;
    /* height: 58px; */
}

button::-moz-focus-inner {
    border: none;
    /* overrides extra padding in Firefox */
}

button span {
    float: right;
    position: relative;
    display: block;
    white-space: nowrap;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {

    /* Safari and Google Chrome only - fix margins */
    button span {
        margin-top: -1px;
    }
}


/* OPTIONAL BUTTON STYLES for applying custom look and feel: */
button.Gravar {
    padding: 0 15px 0 0;
    margin-right: 5px;
    text-align: center;
    background: transparent url("../imagens/comum/btn_red_sprite.f34e36b94b92.gif") no-repeat right -140px;
    height: 58px;
}

button.Gravar span {
    padding: 13px 0 0 15px;
    background: transparent url("../imagens/comum/btn_red_sprite.f34e36b94b92.gif") no-repeat left top;
    color: #fff;
    height: 58px;
}

button.Gravar:hover,
button.GravarHover {
    /* the redundant class is used to apply the hover state with a script */
    background-position: right -210px;
    height: 58px;
}

button.Gravar:hover span,
button.GravarHover span {
    background-position: 0 -70px;
    height: 58px;
}

/*------- Tela Consulta ------*/

.tabelaconteudo {
    width: 35%;
    /*1002px; */
    margin: 0 auto;
    text-align: right;
    /* "alternativa" para o hack do IE */
    border-spacing: 10px 5px;
}

.tabelaconteudo2 {
    width: 320px;
    height: 100px;
    border: 0;
    padding: 0;
    border-spacing: 10px 5px;
}

.tbms {
    width: 100%;
    margin: 0 auto;
}

.tbms th {
    font-weight: normal;
}

.tbms select {
    margin: 5px;
    background-color: #eee;
    border: 1px solid #bbb;
}

.tbms input[type="text"],
.tbms input[type="number"],
.tbms input[type="email"] {
    border: 1px solid #d2d2d2;
}

.tbms input[type="text"],
.tbms input[type="number"],
.tbms input[type="email"],
.tbms select {
    height: 35px;
    width: 215px;
    padding: 5px 10px;
}

.tbms input[type="number"].year-input {
    width: 92px;
}

/* masked inputs */
/* cycle input */
input[type="text"][tag="2"] {
    width: 92px;
}

/* date input */
input[type="text"][tag="3"] {
    width: 110px;
}

/* fix de alinhamento para checkbox */
/* afeta checkbox do multiselect e relatorios */

ul.ui-multiselect-checkboxes input[type="checkbox"],
div#ExtraFilters input[type="checkbox"],
div#ExtraFilters input[type="radio"] {
    padding: 0;
    vertical-align: middle;
    position: relative;
    top: -2px !important;
}

/* datepicker input */

/*------- Detalhes-Grid ------*/
.detgrid-item {
    font-style: normal;
    font-weight: bold;
    text-align: center;
    height: 25px;
}

.detgrid-valor {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 15px;
}

.detgrid-valor > * {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 30ch;
}

.detgrid-valor label {
    font-weight: bold;
}

/* Aviso Modal (fix para rolagem em mensagens maiores) */

.modal-dialog-scrollable {
    display: flex;
    max-height: calc(100% - 3.5rem);
}

.modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 3.5rem);
}

.modal-dialog-scrollable .modal-footer, .modal-dialog-scrollable .modal-header {
    flex-shrink: 0;
}

.modal-dialog-scrollable .modal-body {
    overflow-y: auto;
}

/* Aviso Modal (link dentro do aviso) */
div.avisoModalConteudo a,
div.avisoInlineConteudo a {
    text-decoration: none;
    color: var(--ms-green);
}

div.avisoModalConteudo table,
div.avisoInlineConteudo table {
    width: 100% !important;
    margin-bottom: 1rem;
}

div.avisoModalConteudo table,
div.avisoInlineConteudo table {
    border: 1px solid #dededf;
}

div.avisoModalConteudo th,
div.avisoInlineConteudo th {
    border: 1px solid #dededf;
    background-color: #eceff1;
    padding: 5px;
}

div.avisoModalConteudo td,
div.avisoInlineConteudo td {
    border: 1px solid #dededf;
    background-color: #ffffff;
    padding: 5px;
}

div.avisoModalConteudo ul li,
div.avisoInlineConteudo ul li {
  list-style-type: disc;
}

div.avisoModalConteudo ol li,
div.avisoInlineConteudo ol li {
  list-style-type: decimal;
}

div.avisoModalConteudo ul,
div.avisoInlineConteudo ul {
   list-style-type: disc;
   list-style-position: inside;
}
div.avisoModalConteudo ol,
div.avisoInlineConteudo ol {
   list-style-type: decimal;
   list-style-position: inside;
}
div.avisoModalConteudo ul ul, ol ul,
div.avisoInlineConteudo ul ul, ol ul {
   list-style-type: circle;
   list-style-position: inside;
   margin-left: 15px;
}
div.avisoModalConteudo ol ol, ul ol,
div.avisoInlineConteudo ol ol, ul ol {
   list-style-type: lower-latin;
   list-style-position: inside;
   margin-left: 15px;
}

/*------- Outros ------*/

div#alertaTabContent a {
    text-decoration: none;
    color: var(--ms-green);
}

.bloco-analise-preco {
    color: var(--ms-black-light);
}

.bloco-analise-preco > div {
    min-width: 100px;
}

.bloco-analise-preco .titulo,
.header-analise-preco {
    color: var(--ms-green);
}


.painel-consulta {
    display: flex;
    justify-content: center;
}

table.legenda {
    border: 1px solid #FCBE27;
    height: 30px;
}

.error-code {
    margin-top: 5rem;
    font-size: 17rem;
    color: #219653;
    opacity: 0.75;
    line-height: 1;
    text-align: center;
}

.error-title {
    font-size: 2.5rem;
    color: var(--ms-black);
    padding: 10px 20px;
    border-radius: 50px;
    opacity: 0.85;
    text-align: center;
}

table.detalhe-fee {
    width: 100%;
}

table.detalhe-fee td {
    vertical-align: middle;
}

.fieldbox-descricao-chamado,
.fieldbox-solucao-chamado,
.fieldbox-titulo-chamado {
    display: flex;
}

.texto-descricao {
    word-break: break-word;
    width: 100%;
}

/* Estilização das listas nos campos solução e descrição do chamado*/

.texto-descricao ol > li
{
    list-style-type: decimal;
    list-style-position: inside;
}

.texto-descricao ul > li
{
    list-style-type: disc;
    list-style-position: inside;
}

/*------- Filtro ------*/

#options {
    padding: 5px 0;
    text-align: right;
    width: 188px;
    background: #e3e1de;
}

#options a {
    text-decoration: none;
    color: #50524f;
}

#options a.consult {
    text-decoration: none;
    color: #2c7b14;
}

#options a:hover {
    color: #5c0018;
}

#acc {
    width: 185px;
    list-style: none;
    padding-left: 3px;
    background: #e3e1de;
}

#acc h3 {
    border: 0 solid #2c7b14;
    color: #FFFFFF;
    cursor: pointer;
    font-weight: bold;
    padding: 3px 13px 8px;
    width: 158px;
    background: url("../imagens/filtro/filtro.9553039f9445.png");
    _background: url("../imagens/filtro/filtro.c0995dee1f2d.gif")
}

#acc h3:hover {
    background: url("../imagens/filtro/filtro_over.6cb546adc264.png");
    _background: url("../imagens/filtro/filtro_over.dfc2ab78fc2c.gif");
    color: #426837
}

#acc h3.selected {
    color: black;
    background: url("../imagens/filtro/filtro_over.6cb546adc264.png");
    _background: url("../imagens/filtro/filtro_over.dfc2ab78fc2c.gif")
}

#acc .acc-section {
    overflow: hidden;
    background: #e3e1de;
}

#acc .acc-content {
    width: 180px;
    background: #e3e1de;
}

#acc .acc-content select {
    background: #fff;
    width: 182px;
}


#acc .acc-content label {
    display: block;
    float: left;
    padding: 3px 3px 0;
    width: 175px;
}

#acc .acc-content input {
    width: 170px;
}

#nested {
    width: 200px;
    list-style: none;
    color: #033;
    margin-bottom: 15px;
}

#nested h3 {
    width: 162px;
    border: 2px solid #2c7b14;
    padding: 6px 6px 8px;
    font-weight: bold;
    margin-top: 5px;
    cursor: pointer;
    background: url("../imagens/filtro/filtro.9553039f9445.png");
    _background: url("../imagens/filtro/filtro.c0995dee1f2d.gif");
}

#nested h3:hover {
    background: url("../imagens/filtro/filtro_over.6cb546adc264.png");
    _background: url("../imagens/filtro/filtro_over.dfc2ab78fc2c.gif");
}

#nested .acc-section {
    overflow: hidden;
    background: #fff;
}

#nested .acc-content {
    width: 200px;
    padding: 15px;
    border: 1px solid #9ac1c9;
    border-top: none;
    background: #fff;
}

#filtro {
    position: fixed;
    width: 190px;
    z-index: 50;
    margin-left: 202px;
}

#filtro .showfilter-hidden {
    background-repeat: no-repeat;
    background-position: center bottom;
    background-image: url("../imagens/filtro/filtro-hidden.ea0d22c206ed.png");
    padding: 34px 64px 0;
    margin-top: -3px;
    width: 60px;
}

#filtro .showfilter-hidden:hover {
    background-image: url("../imagens/filtro/filtro-hidden-hover.15777f6fd606.png");
}

#filtro .showfilter-show {
    background-repeat: no-repeat;
    background-image: url("../imagens/filtro/filtro-show.0a38a85d6252.png");
    float: right;
    margin-right: -35px;
    margin-top: 35px;
    padding: 35px 13px 0;
    width: 10px;
}

#filtro .showfilter-show:hover {
    background-image: url("../imagens/filtro/filtro-show-hover.3cf5420203da.png");
    margin-right: -125px;
    width: 100px;
}

/*------- Lista Ajax ------*/
.result_list_container {
    position: relative;
    width: 100%;
}

.result_list_container .results table {
    width: 100%;
}

.result_list_container .searchbar {
    border-bottom: 1px solid #ddd;
    color: #666;
    padding: 3px;
}

#lupaBtn {
    position: fixed;
    bottom: 90px;
    right: 30px;
    z-index: 1;
    font-size: 18px;
    border: none;
    outline: none;
    background: var(--ms-green);
    box-shadow: 2px 2px 3px rgba(149, 149, 149, 0.45);
    color: white;
    cursor: pointer;
    padding: 15px;
    height: 50px;
    width: 50px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.35s;
}

#lupaBtn:hover {
    background: #1e7c3e;
}

.modal-consulta-form {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 100%;
    width: 100%;
    z-index: 99;
    top: 0;
    left: 0;
    position: absolute;
    background: rgba(238, 238, 238, 0.45);
}

.modal-consulta-form-hidden {
    display: none;
}

.fechaBtn {
    /*position: absolute;*/
    font-size: 35px;
    cursor: pointer;
    color: var(--ms-green);
    transition: color 0.35s;
    margin: 0 0 0 100%;
}

.fechaBtn:hover {
    color: #1e7c3e;
}

.hideModal {
    z-index: -1;
    opacity: 0;
    animation: hide .25s;
    transform: scale(0);
}

@keyframes hide {
    from {
        z-index: 99;
        transform: scale(1);
        opacity: 1;
    }
    to {
        z-index: -1;
        transform: scale(0);
        opacity: 0;
    }
}

.showModal {
    opacity: 1;
    z-index: 99;
    animation: show .2s;
    transform: scale(1);
}

@keyframes show {
    from {
        transform: scale(0);
        opacity: 0;
        z-index: -1;
    }
    to {
        transform: scale(1);
        opacity: 1;
        z-index: 99;
    }
}


/* override do base_form */

div.readonly.readonly-custom input {
    display: inline;
}

div.readonly.readonly-custom label {
    display: contents !important;
}

/* === Chamado 23178 - Tips de importação de APs via Plano === */

div.form-row div.importar-ap-pi-agencia-tips {
    margin-bottom: 0 !important;
}

div.form-row div.importar-ap-pi-agencia-tips li {
    list-style-type: square !important;
}

.sfm-black {
    color: var(--ms-black);
}

.sfm-green {
    color: var(--ms-green);
}

.sfm-red {
    color: var(--ms-erro);
}

.sfm-blue{
    color: var(--ms-azul);
}


/* === Media Queries === */

@media screen and (max-width: 524px) {
    .rodape {
        padding: 5px;
    }

    .rodape__disclaimer {
        flex-wrap: wrap;
        justify-content: center;
    }

    .rodape__disclaimer > span {
        font-size: 0.8rem;
        margin-bottom: 0;
    }

    .error-code {
        font-size: 12rem;
    }

    .error-title {
        font-size: 1.75rem;
    }

    .fieldbox-descricao-chamado,
    .fieldbox-solucao-chamado,
    .fieldbox-titulo-chamado {
        display: flex;
        flex-direction: column;
        text-align: justify;
    }
}

@media screen and (max-width: 834px) {

    section.navbar__menu {
        max-height: calc(100% - 50px);
        overflow-y: auto;
    }

    /* classe para ocultar opções dos menus nas versões mobile */
    .no-mobile {
        display: none;
    }

    .ui-jqgrid tr.jqgrow {
        height: 30px !important;
    }

    .label-infoms {
        min-width: 110px;
    }

    .bloco-analise-preco > div:nth-child(1) {
        width: 100%;
    }

}

@media screen and (max-width: 1024px) {
    .dashboard-no-cards span {
        font-size: 1.5rem;
    }

    .dashboard-card-area {
        flex-direction: column;
    }

    .dashboard-card {
        width: 100%;
    }

    .dashboard-card-body {

    }
}

@media screen and (max-width: 480px) {
    .home-options-area {
        overflow: hidden;
        justify-content: flex-start;
    }

    .home-option {
        min-width: 100%;
    }

    .option-disabled {
        display: none;
    }

    .slider-left,
    .slider-right {
        display: inline;
        position: absolute;
        font-size: 2rem;
        color: #cccccc;
    }

    .slider-left:hover,
    .slider-right:hover {
        user-input: pointer;
    }

    .slider-left {
        left: 15%;
    }

    .slider-right {
        right: 15%;
    }
}