/**
* @copyright   (C) 2020 - 2021 Tutopic
* @license     GNU General Public License v2 or later
* @license     http://www.gnu.org/licenses/gpl-2.0.html
* @author      Tutopic
*
* This file is part of "Tutopic para WordPress".
* "Tutopic para WordPress" is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License or (at your option) any later version.
* "Tutopic para WordPress" is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
*
*/

/*Home Page*/
.accordion {
  /*background-color: #eee;*/
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  /*background-color: #ccc;*/
}

/*.accordion:after {
  content: '\002B';
  color: var(--dark);
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
  color: var(--primary);
}*/

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

/**/

.notifications-home .p-notify {
  margin: 6px 0px 12px;
  padding-left: 48px;
}

.notifications-home .div-delete-notify {
  color: var(--gray);
}

.notifications-home .div-delete-notify:hover {
  color: var(--dark);
}

.center-circle-notify-container {
  width: 48px;
  display: flex;

  justify-content: center;
  align-items: center;
  height: 22px;
}

.center-cicle-notify {
  width: 10px;
  height: 10px;
  padding: 1px;
  text-align: center;
  border-radius: 90px;
  background: var(--primary);
  color: white;
}

.notifications-home .span-notify {
  text-align: left;
  flex: 1;
  padding-right: 10px;
}

.accordion.notify-tutopic-header {
  background: white;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
}

.accordion.notify-tutopic-header:hover {
  background: rgba(238,238,238,1);
}

.active.accordion.notify-tutopic-header {
  background: rgba(238,238,238,1);
  padding: 14px 18px 4px;
}

.panel.notify-tutopic-panel {
  background: rgba(238,238,238,1);
}


.panel.notify-tutopic-panel {
  border-bottom: 1px solid rgba(216,218,222, 1);
}

.notification-title-moptions {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.clear-notification-div {
  padding-top: 10px;
}

.clear-notification-div a {
  color: var(--primary);
}
.clear-notification-div a:hover {
  color: var(--dark);
}
.clear-notification-div button {
  font-size: 12px;
  margin-right: 0px;
}


@media(max-width:500px){
  .notification-title-moptions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}