:root {
  --color_main: #1DFF2C;
  --color_main_dark: #0cda19;
  /* --secondary_color:; */
  --color_titles: #ffffff;
  --color_texts: #b3b3b3;
}

body {
  background-color: #121212;
}

/* TÍTULO PRINCIPAL (Usado 1 vez por página)*/

h1 {
  width: 100%;
  font-size: 20px;
  line-height: 100%;
  padding: 0px;
}

/* SUBTITULO PRINCIPAL (Usado 1 vez por página) */

h2 {
  width: 100%;
  font-weight: 500;
  padding: 14px 0px 0px 0px;
  font-size: 16px;
  line-height: 100%;
}


/* CONTEÚDO DE ERRO PARA AS TABELAS LATERAIS */
/* CONTEÚDO DE ERRO PARA AS TABELAS LATERAIS */
.content-error-table {
   position: relative;
   width: 100%;
   padding: 40px 20px;
   /* height: 600px; */
   min-height: 200px;
   align-items: center;
   flex-direction: column;
}

.content-error-table .icon-content-error {
   width: 60px;
   height: 60px;
   margin: 0px auto;
}

.content-error-table h2 {
   margin-bottom: 20px !important;
   color: #1DFF2C !important;
   font-size: 22px !important;
   font-weight: 700 !important;
   text-align: center !important;
}

.content-error-table p {
   /* color: #cecece; */
   color: #fff;
   font-size: 16px;
   font-weight: 500;
   text-align: center;
}



/* ESTILO PARA AS TABELAS LATERAIS */
/* ESTILO PARA AS TABELAS LATERAIS */
.mtable {
   width: 100%;
   margin-bottom: 22px;
   background-color: #0e0e0e;
   border: 1px solid #5A5C5A;
   border-radius: 4px;
   display: flex;
   flex-direction: column;
   padding: 0px 30px;
   transition: all 0.2s ease;
}
a.mtable {
   cursor: pointer;
}

.mtable:hover {
   border: 1px solid #1dff2c;
   box-shadow: 0px 0px 16px 0px #1dff2c1c;
}

.team_user .teams .name_teams {
   color: #ffffff;
}

.team_user::after {
   content: '';
   position: absolute;
   width: 10px;
   border: 10px solid transparent;
   /* border-right-color: #645f5f; */
   border-right-color: #1dff2c;
   right: -30px;
}

.mtable_titles {
   width: 100%;
   color: #9f9f9f;
   position: relative;
   margin: 16px 0px 24px 0px;
}

.t-round {
   position: relative;
   font-size: 13px;
}

.t-closed {
   position: relative;
   font-size: 13px;
}

.mtable_lines {
   position: relative;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 14px;
   color: #fff;
}

.teams {
   align-items: center;
}

.name_teams {
   font-size: 16px;
   font-weight: 600;
   line-height: 100%;
   color: var(--color_texts);
}

.results {
   font-size: 16px;
   color: #9f9f9f;
}

/* Se for o time do usuário usar está classe */

.my_result {
   color: #fff;
   font-weight: 600;
}
.my_result small {
   position: relative;
   top: -2px;
   color: var(--color_main);
   font-weight: 500;
   opacity: 0.7;
}

.shield_teams {
   margin-right: 10px;
   display: flex;
}

.shield_teams img {
   width: 28px;
   height: 28px;
   object-fit: contain;
}

.mtable_footer {
   position: relative;
   width: 100%;
   margin: 20px 0px 14px 0px;
   font-size: 14px;
   color: #9f9f9f;
   cursor: pointer;
   transition: color 0.2s ease;
}

.mtable_footer:hover {
   color: #ffffff;
}

.title_league {
   font-size: 20px;
   font-weight: 700;
   color: var(--color_titles);
}

.view_games_table {
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
}

.view_games_table a {
   display: flex;
   align-items: center;
}

.view_games_table span {
   font-size: 16px;
   color: var(--color_titles);
   font-weight: 600;
   cursor: pointer;
   transition: color 0.2s ease;
}

.view_games_table span:hover {
   color: #c7c7c7;
}

@media(max-width:539px) {
   .title_league {
      font-size: 18px;
   }
}


/* TABELAS A DIREITA */
.align_tables_content {
   max-width: 100%;
   overflow-x: auto;
}
  .align_tables_content::-webkit-scrollbar-track {
     background-color: transparent;
  }

  .align_tables_content::-webkit-scrollbar {
     width: 6px;
     height: 6px;
     background-color: transparent;
  }

  .align_tables_content::-webkit-scrollbar-thumb {
     /* background-color: #1E1E1E; */
     background-color: var(--color_main);
     border-radius: 20px;
  }

  


/* CARDS DE NOTICIAS */
.content-news {
  position: relative;
  width: 100%;
  padding: 20px 10px;
  margin-top: 15px;
  border-top: 1px solid #5B5B5B;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.content-news .image-news {
  position: relative;
  width: calc(50% - 15px);
  height: 250px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: hidden;
}
.content-news .image-news img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.content-news .informations-news {
  position: relative;
  width: calc(50% - 15px);
}
.content-news .informations-news > a {
  display: flex;
  flex-direction: column;
}
.content-news .informations-news > a h3 {
  width: 100%;
  /* height: 53px; */
  min-height: 2ch;
  height: auto;
  color: var(--color_titles);
  font-size: 18px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.content-news .informations-news > a p {
   /* height: 60px; */
   min-height: 3ch;
   height: auto;
   margin-top: 12px;
   font-size: 14px;
   color: var(--color_texts);
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
}

.cªªªªontent-news .informations-news .details-news {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.content-news .informations-news .details-news .origin-news  {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   margin-top: 10px;
   margin-right: 30px;
}
.content-news .informations-news .details-news .origin-news  img {
  max-width: 20px;
  object-fit: contain;
  height: max-content;
}

.content-news .informations-news .details-news .origin-news  p {
  margin-top: 0px;
  margin-left: 8px;
  color: var(--color_titles);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.content-news .informations-news .details-news span {
   margin-top: 10px;
  color: var(--color_texts);
  font-size: 13px;
  font-weight: 400;
}


.content-news .informations-news .evaluation-news {
  width: 100%;
  padding: 24px 0px 26px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 25px;
  border-top: 1px solid #ffffff51;
}
.content-news .informations-news .evaluation-news .options-evaluation {
  display: flex;
}
.content-news .informations-news .evaluation-news .options-evaluation .option-evaluation {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff35;
  color: var(--color_titles);
  border-radius: 6px;
  margin-right: 10px;
  transition: background-color 0.2s;
  cursor: pointer;
}
.content-news .informations-news .evaluation-news .options-evaluation .option-evaluation.voted,
.content-news .informations-news .evaluation-news .options-evaluation .option-evaluation:hover {
  background-color: #ffffff72;
}

.content-news .informations-news .evaluation-news .likes-news {
  display: flex;
  align-items: center;
}

.content-news .informations-news .evaluation-news .likes-news p {
  margin: 0px 8px;
  color: var(--color_titles);
  font-size: 13px;
  font-weight: 700;
}

.content-news .informations-news .evaluation-news .likes-news span {
  color: #c7c7c7;
  font-size: 13px;
  font-weight: 500;
}




/* TOP NEWS */

.banner_top_news_content {
  width: 100%;
}
.banner_top_news_content h1 {
  color: var(--color_titles);
}

.banner_top_news_content h2 {
  color: var(--color_texts);
}


.banner_top_news_content .content-news {
  flex-direction: column;
}
.banner_top_news_content .content-news .image-news {
  width: 100%;
  height: 600px;
  object-fit: cover;
}
.banner_top_news_content .content-news .informations-news {
   position: absolute;
   width: 100%;
   height: calc(100% - 20px);
   display: flex;
   align-items: flex-start;
   justify-content: flex-end;
   flex-direction: column;
   padding: 0px 40px;
   top: 0px;
}
.banner_top_news_content .content-news .informations-news>a h3 {
   height: 67px;
   padding: 0px;
   font-weight: 700;
   font-size: 26px;
   line-height: 120%;
}
.banner_top_news_content .content-news .informations-news>a p {
   font-size: 15px;
}





.container_top_news a {
  display: flex;
}

.container_top_news {
  position: relative;
  width: 100%;
  min-height: 400px;
}

.container_top_news img {
  position: relative;
  width: 100%;
  object-fit: contain;
  object-position: top;
  filter: brightness(0.65);
}

.text_top_news_content {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding: 0px 40px;
  top: 0px;
}

.text_top_news {
  position: relative;
  width: 100%;
}

.title_main_news {
  width: 100%;
}

.title_main_news h3 {
  width: 100%;
  min-height: 35px;
  height: auto;
  font-size: 26px;
  line-height: 120%;
  padding: 0px;
  color: var(--color_titles);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.news_origin_content {
  position: relative;
  width: 100%;
  margin-top: 24px;
  display: flex;
  align-items: center;
}

.align_img_text_origin_content {
  display: flex;
}

.container_card_secondary_news .news_origin_content img {
  max-width: 20px;
  object-fit: contain;
  height: max-content;
  border: 1px solid red;
}

.news_origin_content p {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--color_titles);
  margin-left: 8px;
}

.news_origin_content span {
  font-size: 13px;
  font-weight: 400;
  color: var(--color_texts);
  margin-left: 30px;
}

.interactions_news_content {
  width: 100%;
  padding: 24px 0px 26px 0px;
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  border-top: 1px solid #ffffff51;
}

.align_boxes_interactions {
  display: flex;
}

.box_interaction {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff35;
  color: var(--color_titles);
  border-radius: 6px;
  margin-right: 10px;
  transition: background-color 0.2s;
  cursor: pointer;
}

.box_interaction.voted,
.box_interaction:hover {
  background-color: #ffffff72;
}

.align_like_number {
  display: flex;
  align-items: center;
}

.align_like_number p {
  margin: 0px 8px;
  color: var(--color_titles);
  font-size: 13px;
  font-weight: 700;
}

.align_like_number span {
  color: #c7c7c7;
  font-size: 13px;
  font-weight: 500;
}

.new_secondary_content {
  width: 100%;
  /* ------------ */
  /* ------------ */
}

/* ------------ */

/* ------------ */

/* ------------ */

/* ------------ */

/* ------------ */

/* CARD DE NOTÍCIA SECUNDÁRIA */

.container_card_secondary_news {
  position: relative;
  width: 100%;
}

.container_card_secondary_news a {
   display: flex;
}
.new_secondary_content .content-news {
   flex-direction: column;
}
.new_secondary_content .content-news .image-news {
  width: 100%;
  height: 200px;
}
.new_secondary_content .content-news .informations-news {
   width: 100%;
}



.container_card_secondary_news img {
  width: 100%;
  height: 164px;
  cursor: pointer;
  object-fit: cover;
  object-position: top;
}

.container_title_secondary_news {
  position: relative;
  width: 100%;
  /* height: 56px; */
  min-height: 2ch;
  height: auto;
  margin-top: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.container_title_secondary_news p {
  color: var(--color_titles);
  font-size: 20px;
  font-weight: 700;
}

.container_card_secondary_news .news_origin_content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
}

.align_origin_content {
  display: flex;
  align-items: center;
}

.container_card_secondary_news .news_origin_content p {
  white-space: nowrap;
}

.container_card_secondary_news .interactions_news_content {
  margin-top: 14px;
  padding: 16px 0px 0px 0px;
  border-top: 1px solid #ffffff51;
}

/* ------------ */

/* ------------ */

/* ------------ */

/* ------------ */

/* ------------ */

/* CARDS DE NOTÍCIAS EM DESTAQUE */

.news_main_content {
  position: relative;
  width: 100%;
}

.news_main_content h3 {
  width: 100%;
  color: var(--color_titles);
  font-size: 20px;
  font-weight: 700;
  padding: 0px;
}
.news_main_content .style_main_title {
   margin-bottom: 20px;
}


/* ------------ */

/* ------------ */

/* ------------ */

/* ------------ */

/* ------------ */

/* TABELAS A ESQUERDA */

.tables_left_content {
  width: 100%;
  background-color: #0E0E0E;
  margin-top: 70px;
  border: 1px solid #5B5B5B;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0px 0px 18px #ffffff24;
}

.header_table_left_content {
  width: 100%;
  padding: 8px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #5B5B5B;
  background-color: #1E1E1E;
}

.header_table_left_content h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--color_titles);
}

.header_table_left_content span {
  padding-top: 3px;
  font-size: 14px;
  font-weight: 500;
  color: #838383;
  display: block;
}

.tables_left_content table {
  width: 100%;
  border-collapse: collapse;
  color: var(--color_titles);
  text-align: left;
}

.tables_left_content table tr th {
  padding: 12px 28px;
  font-weight: 600;
  font-size: 14px;
}

.align_space_col {
  padding: 10px 0px !important;
}

table tr .align_space_col {
  width: 100%;
}

.align_col {
  text-align: right;
}
.align_col_center {
  text-align: center;
}

.tables_left_content table tr td {
  font-size: 14px;
  padding: 11px 28px;
  color: var(--color_texts);
  /* display: flex; */
}

.tables_left_content table tr td p {
  font-size: 14px;
  margin-left: 12px;
}

.align_td_content {
  display: flex;
  align-items: center;
}
a.align_td_content {
   pointer-events: none;
}
a.align_td_content:hover {
   color: var(--color_main);
}
a.align_td_content img,
a.align_td_content p {
   pointer-events: all;
}

.tables_left_content table tr td img {
  width: 20px;
  height: 20px;
  /* margin-right: 12px; */
  object-fit: contain;
}

.button_view_table {
  width: 100%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
  background-color: #1D1D1D;
}

.button_view_table h3 {
  font-size: 14px;
  padding: 17px 0px;
  line-height: 100%;
  font-weight: 700;
  color: var(--color_main);
}

.button_view_table svg {
  margin-left: 12px;
  margin-top: 2px;
}

.button_view_table:hover {
  background-color: #242424;
}

.my_team_style {
  position: relative;
  width: 100%;
  background-color: #070707;
}

.my_team_style::after {
  position: absolute;
  content: '';
  width: 6px;
  height: 60%;
  left: 0px;
  top: calc(50% - 30%);
  background-color: var(--color_main);
}

.my_team_style td {
  font-weight: 700;
  color: #ffffff !important;
}

.table_two {
  margin-top: 20px;
}

.pub_content {
  width: 100%;
  margin-top: 26px;
}

.pub_content p {
  font-size: 13px;
  font-weight: 400;
  color: #949494;
}

.pub_content a {
  display: flex;
}

.pub_content img {
  width: 100%;
  margin-top: 8px;
  object-fit: contain;
}

/* ------------ */

/* ------------ */

/* ------------ */

/* ------------ */

/* ------------ */

/* ÚLTIMAS NOTÍCIAS */

.title_sec_product-29 {
  width: 100%;
  padding: 0px;
  font-size: 20px;
  font-weight: 700;
  color: var(--color_titles);
}

.content_card_model_003 {
  margin-top: 6px;
  padding: 5px 11px;
}

.content-carousel .content-news {
   flex-direction: column;
}
.content-carousel .content-news .image-news {
  width: 100%;
  height: 160px;
}
.content-carousel .content-news .informations-news {
   width: 100%;
}
.content-news .informations-news>a p {
   /* height: 40px; */
   min-height: 2ch;
   height: auto;
   -webkit-line-clamp: 2;
}



.controls_carousel_card_model_003 {
  position: absolute;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  width: 106%;
  height: 56px;
  top: calc(50% - 28px);
  left: calc(50% - 53%);
  pointer-events: none;
}

.controls_carousel_card_model_003 span {
  position: relative;
  padding: 0px;
  margin: 0px;
  width: 54px;
  height: 54px;
  border: none;
  pointer-events: all;
  transition: all 0.2s ease;
  border-radius: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #ffffff;
  opacity: 0.8;
}

.controls_carousel_card_model_003 span svg {
  position: relative;
  width: 36px;
  height: 36px;
  left: calc(50% - 18px);
}

.controls_carousel_card_model_003 span:first-child svg {
  left: calc(50% - 20px);
}

.controls_carousel_card_model_003 span:hover {
  color: var(--color_main);
  opacity: 1;
}

.controls_carousel_card_model_003 span.arrow-disabled:hover, .controls_carousel_card_model_003 span.arrow-disabled {
  opacity: 0;
}

/* ------------ */

/* ------------ */

/* ------------ */

/* ------------ */

/* ------------ */

/* SECTION DE NOTÍCIAS FINAIS */

.last_main_news_content {
  position: relative;
  width: 100%;
  display: flex;
  /* border: 1px solid red */
}

.img_last_news_content {
  width: 50%;
  height: 360px;
}

.img_last_news_content img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.text_last_news_content {
  width: 50%;
  background-color: #0E0E0E;
  border: 1px solid #5B5B5B;
}

.final_news_content {
  position: relative;
}

.final_news_content .text_top_news a h3 {
  font-size: 24px;
}

.final_news_content .text_top_news a p {
  margin-top: 20px;
  font-size: 18px;
  color: var(--color_texts);
}

/* ------------ */

/* ------------ */

/* ------------ */

/* ------------ */

/* ------------ */

/* RESPONSIVO */

@media(max-width:539px) {
  h1 {
    font-size: 18px !important;
  }
  h2 {
    padding: 10px 0px 0px 0px;
    font-size: 14px !important;
  }
  .style_main_title {
    font-size: 18px !important;
  }
  /* CARDS */
  .text_top_news_content {
    position: relative;
    padding: 0px;
  }
  .title_main_news {
    margin-top: 12px;
  }
  .title_main_news h3 {
    font-size: 18px;
    line-height: 120%;
  }
  .news_origin_content {
    margin-top: 16px;
    justify-content: space-between;
  }
  .interactions_news_content {
    margin-top: 16px;
    padding: 16px 0px;
  }
  .container_title_secondary_news {
    height: 38px;
    margin-top: 12px;
  }
  .container_title_secondary_news p {
    font-size: 14px;
  }
  .container_card_secondary_news .news_origin_content {
    margin-top: 20px;
  }
  .news_origin_content p {
    font-size: 12px;
    font-weight: 400;
  }
  .news_origin_content span {
    font-size: 12px;
  }
  .align_like_number p {
    font-size: 11px;
  }
  /* TABELAS A DIREITA */
  /* .tables_left_content {
    margin-top: 40px;
  } */
  .header_table_left_content h3 {
     margin-right: 30px;
    font-size: 14px;
  }
  .header_table_left_content span {
    font-size: 11px;
  }
  .tables_left_content table tr th {
    font-size: 13px;
  }
  .tables_left_content table tr td {
    font-size: 13px;
  }
  .tables_left_content table tr td p {
    font-size: 13px;
    white-space: nowrap;
  }
  .button_view_table svg {
    display: none;
  }
  /* ------------ */
  /* ------------ */
  /* ------------ */
  /* ------------ */
  /* CARDS DESTAQUES */
  .box_interaction {
    width: 26px;
    height: 26px;
  }
  .align_like_number span {
    font-size: 11px;
  }
  .container_card_secondary_news .interactions_news_content {
    padding: 14px 0px 0px 0px;
    margin-top: 14px;
  }
}

@media(max-width: 1024px) {
  /* ARROWS CONSTROLLS */
  .controls_carousel_card_model_003 {
    width: 100%;
    left: 0px;
  }
}


/* ------------ */

/* ------------ */

/* ------------ */

/* ------------ */

/* SELECT */

.align_all_content {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  z-index: 1;
}

.container_select {
  position: relative;
  min-width: 184px;
  height: 46px;
  display: flex;
  padding: 0px 26px 0px 22px;
  justify-content: space-between;
  align-items: center;
  line-height: 100%;
  border-radius: 10px;
  background-color: #0E0E0E;
  border: 2px solid #252525;
  box-shadow: 0px 0px 16px #000000;
  cursor: pointer;
  transition: all 0.3s ease;
}

.container_select::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 20px;
  border-radius: 20px;
  left: -2px;
  background-color: var(--color_main);
}

.container_select.func_select_open, .container_select:hover {
  box-shadow: 0px 0px 16px 0px #1dff2c21;
  border-color: var(--color_main);
}

.container_select p {
  font-size: 16px;
  font-weight: 400;
  color: var(--color_titles);
}

.container_select.func_select_open p, .container_select:hover p {
  color: var(--color_main);
}

.icon_select {
  position: relative;
  left: 12px;
  color: var(--color_titles);
}

.container_select.func_select_open svg, .container_select:hover svg {
  color: var(--color_main);
}

.content_open_select {
  position: absolute;
  width: 196px;
  max-height: 310px;
  padding: 0px 0px;
  overflow: auto;
  top: 130%;
  /* right: 0px; */
  border-radius: 10px;
  background-color: #0E0E0E;
  box-shadow: 0px 0px 12px -3px #000000;
  opacity: 0;
  transition: all 0.2s ease;
  pointer-events: none;
  cursor: pointer;
}
.content_open_select::-webkit-scrollbar-track {
   background-color: transparent;
}
.content_open_select::-webkit-scrollbar {
   width: 6px;
   height: 6px;
   background-color: transparent;
}
.content_open_select::-webkit-scrollbar-thumb {
   /* background-color: #1E1E1E; */
   background-color: var(--color_main);
   border-radius: 20px;
}

.content_open_select.func_select_open {
  opacity: 1;
  pointer-events: all;
}

.container_options_select {
  position: relative;
  padding: 12px 18px;
  transition: background-color 0.1s ease;
  color: #CFCFCF;
  font-size: 14px;
  border-bottom: 1px solid #242424;
  background-color: #0E0E0E;
}

.container_options_select:hover {
  background-color: #0a0a0a;
}

.option_selected {
  font-weight: 600;
  color: var(--color_main);
}

.option_selected::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 100%;
  top: 0px;
  left: 0px;
  background-color: var(--color_main);
}

@media(max-width:767px) {
  .align_all_content {
    justify-content: flex-start;
  }
}

@media(max-width:500px) {
   .content-news {
      flex-direction: column;
   }
   .content-news .image-news {
      width: 100%;
   }
   .content-news .informations-news {
      width: 100%;
      margin-top: 20px;
   }
}


@media(max-width:319px) {
  .box_interaction {
    width: 24px;
    height: 24px;
    margin-right: 3px;
  }
}