/*
    ____                      _ _
   | __ ) _ __ __ _ _ __   __| (_)_ __   __ _
   |  _ \| '__/ _` | '_ \ / _` | | '_ \ / _` |
   | |_) | | | (_| | | | | (_| | | | | | (_| |
   |____/|_|  \__,_|_| |_|\__,_|_|_| |_|\__, |
                                        |___/
*/
/*

   __     ___    ____  ____
   \ \   / / \  |  _ \/ ___|
    \ \ / / _ \ | |_) \___ \
     \ V / ___ \|  _ < ___) |
      \_/_/   \_\_| \_\____/

*/
:root {
  --text-blue:  #225C88;
  --text-light: #7D8296;
  --text-white: #FFFFFF;
  --text-black: #000000; }

.dashboard-empty-content-area {
  width: 200px;
  margin: 0 10px; }
  .dashboard-empty-content-area .dashboard-empty-content-infobox {
    color: var(--text-light);
    margin-bottom: 10px; }
    .dashboard-empty-content-area .dashboard-empty-content-infobox.showing-false {
      opacity: 0;
      transition: opacity 0.3s linear; }
    .dashboard-empty-content-area .dashboard-empty-content-infobox.showing-true {
      opacity: 1;
      transition: opacity 0.3s linear; }
  .dashboard-empty-content-area .dashboard-empty-button {
    border: 2px dashed var(--text-light);
    color: var(--text-light);
    width: 100%;
    height: 250px;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px; }
    .dashboard-empty-content-area .dashboard-empty-button:hover {
      background: #eeeff1;
      color: var(--text-main); }
    .dashboard-empty-content-area .dashboard-empty-button:active {
      background: var(--text-main);
      color: white;
      border: 2px dashed #F4F5F3; }