/*
 * COPYRIGHT INFORMATION - DO NOT REMOVE
 *
 * This file is part of the MagicMail (TM) Project and is
 * Copyright (c) LinuxMagic Inc. 2002-2019 All Rights Reserved
 *
 * This file contains Original Code as created by LinuxMagic Inc.
 *
 * The Original Code is distributed on an 'AS IS' basis,
 * WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, AND LINUXMAGIC
 * HEREBY DISCLAIMS ALL SUCH WARRANTIES, INCLUDING WITHOUT LIMITATION, ANY
 * WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, QUIET
 * ENJOYMENT OR NON-INFRINGEMENT.
 *
 * Do NOT download, distribute, use or alter this software or file in any
 * way without express written permission from LinuxMagic Inc. or its parent
 * company Wizard Tower TechnoServices signed by an authorized company officer.
 *
 * Author(s): Anonymous
 *            William Storey <william@linuxmagic.com>
 *
 * $Id: css.css 44802 2022-11-23 00:38:27Z shaun $
 */

/* THIS FILE SHOULD NEVER BE TOUCHED OR MODIFIED *
 * IT IS PART OF THE MAGICMAIL COPYRIGHT
 */

/* If you need to modify the look/feel of your site, then
 * look at the user.css in ./html_files.
 */

/* We want to have standardization across our interfaces, try to keep only standards in the next or previous sections */
/* Taken from Evgueni's work on the MagicMail User Interface,  MagicMail Server CSS (2.1) css/magicmail.emailoptions.css */
/* Some of those should be deprecated as they get standardized. */

/* Notifications are used on every page typically, except for modals 
   @import 'notification.css';
*/

/* New Styles for the Admin Interface Revamp */
/* MP: We need to deprecate these */
h3.newSubtitle {
   font-size: 14px;
   font-weight: bold;
   margin: 0px 0px 5px 0px;
}

h3.homepage_header {
   font-size: 15px;
   font-weight: bold;
   margin: 0px 0px 0px 0px;
}
.clickAble {
   cursor: pointer;
}
/*
select,input {
   font: 12px Verdana,Arial,Helvetica,sans-serif;
   max-width: 690px;
}
*/
/* Only in admin interface at present, should it be in all MagicMail */
p.desc {
    font-size: 0.8em;
    padding: 5px;
    color: #333;
    border: 1px dotted #CCC;
    margin-bottom: 5px;
}

#uInfoTable table.MagicDataTable {
    background: none;
}

/* Specific to user.php on admin interface */
/* MOVE to css/user.css */
.td-label, table.MagicDataTable td.td-label {
    vertical-align: bottom;
    padding-bottom: 6px;
}
table.MagicDataTable td.cell-bottom-border {
    border-bottom: 1px solid #DBDBDB !important;
}
.font-10, table.MagicDataTable td.font-10 {
    font-size: 10px;
}
/* End Move */

/* Move to email.css? */
.specific-setting-help {
    background: url(../pics/helpicon.gif) no-repeat;
    float: right;
    border: 0;
    cursor: help;
    display: block;
    height: 12px;
    font-size: 0;
    padding: 0;
    width: 12px;
    margin: 9px 2px 0px 0px;
}

/* Used in feedback volunteers */
.checkbox_selectors a {
    color: white;
    font-size: 10px;
    text-decoration: none;
    border-bottom: 1px dotted;
}

/* Only used on Admin site, AdminSubHeaderRow, move to css.css */
#loginTable {
    width: 350px !important;
    padding: 0px;
    border-collapse: separate;
    box-shadow: 3px 3px 5px 3px rgba(105,105,105,0.6);
    -webkit-box-shadow: 3px 3px 5px 3px rgba(105,105,105,0.6);
    -moz-box-shadow: 3px 3px 5px 3px rgba(105,105,105,0.6);
    /* To align in a visual center, we should calculate 1000-menuwidth x .5 */
    margin: 40px auto 20px 100px;
    border-radius: 3px ;
    -moz-border-radius: 3px ;
    -webkit-border-radius: 3px ;
}

/* This should be part of wizard.css, or the MagicDataTable */
#loginTable .tr .td:first-child {
    padding: 50px !important;
}

/* Override for admin site only */
#MagicMenu ul li a {
    padding-left: 0px;
}

/* Side Bar is the div inside that holds the menu in the admin interface */
/* MP: Do we need this, or is this a standard H4 we use everywhere? */
#Sidebar h4 {
        /* background: transparent url('./pics/bullet.gif') no-repeat 0px 3px; */
        color: #10456B;
        font-size: 1.2em;
        font-weight: bold;
        margin: 13px 5px 0 5px;
        padding: 0;
        text-transform: none !important;
        width: 100%;
}

/* Override, admin interface only */
.MagicContentTable {
    background: #FFF url(../pics/blue_curve_body.svg) no-repeat;
}

div.horizontalTabs {
    width: 100%;
    /*
     * li height + li top padding + 1 for border px.
     * ensure li height & top padding are from li.active (the largest).
     * -1 height from li.active as we want li.active to overrun the border
     * bottom.
     */
    height: 35px;
    border-bottom: 1px solid #999;
    padding: 0;
}
div.horizontalTabs ul {
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0;
}
div.horizontalTabs ul li {
    display: block;
    padding: 1px 2px 1px 2px;
    margin: 15px 0 0 0;
    height: 17px;

    background: #DEDEDE url(../pics/background-tableheader.gif) repeat-x;
    border: 1px solid #999;
    border-bottom: none;
    float: left;

    border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
}
div.horizontalTabs ul li.active {
    margin: 11px 0px 0px 0px;
    height: 17px;
    padding: 3px 4px 3px 4px;

    box-shadow: 0 0 5px black;
    -webkit-box-shadow: 0 0 5px black;
    -moz-box-shadow: 0 0 5px black;
}
div.horizontalTabs ul li a {
    text-decoration: none;
    font-weight: bold;
}

#infoDiv_display {
    display: none;
    position: absolute;
    left: 0px;
    top: 0px;
    border: solid 1px #2d2d2d;
    background: #fff;
    padding: 5px;
    width: 400px;
    font-size: 12px;
    font-weight: bold;
    /* for long lines - break and wrap */
    word-wrap: break-word;
    /* scroll bar if too long or we could did not break to wrap */
    overflow: auto;
    z-index: 5;
}

#infoDiv_display h3 {
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}

#loggedinas {
    margin: -10px 4px 6px 10px;
}


.MagicContentCelltitle {
    margin: 0rem 0rem 1rem;
}

.MagicContentCelltitle p {
    margin: 0rem 0rem 0.4rem;
}

.MagicContentCelltitle h2 {
    margin: 0rem;
    font-size: 1.4rem;
}

.MagicContentCellRow {
    margin: 1rem 0rem;
}

.MagicContentCellRow a {
    font-weight: bold;
    font-size: 0.9rem;
}


/*WIDGET tag status*/

/* 
 * NOTE: The parent element of this widget MUST have a position: relative; 
 */
#MagicMenu ul > li {
    position: relative;
}

/* NEW tag styles */
.new-tag {
    z-index: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 2px;
    margin: 0 auto;
    width: 24px;
    height: 24px;
    /*Animation*/
    animation-name: fade-in2;
    animation-duration: .2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}
.new-tag .container {
    z-index: 1;
    position: absolute;
    width: 0;
    height: 0;
    background-color: blue;
    transform: scale(.8) translate(-1px, -1px);
}

/*Shadow of the shape*/
.new-tag .container.back {
    z-index: 0;
    transform: scale(.9) translate(-2.8px, -2.8px);
    opacity: .8;
}
.new-tag .container.back .shape{
    border-bottom: 30px solid black;
}
.new-tag .container.back .shape.before::before {
    border-top: 30px solid black;
}
.new-tag .container.back .shape.after::before {
    border-top: 30px solid black;
}

/*Shape*/
.new-tag .container .shape {
    position: absolute;
    width: 0;
    height: 0;
    top: -3px;
    left: 0;
    border-left: 17px solid transparent;
    border-right: 17px solid transparent;
    border-bottom: 30px solid #21619c;
}
.new-tag .container .shape.after {
    transform: rotate(30deg) translate(2px, -1px);
}
.new-tag .container .shape.before::before,
.new-tag .container .shape.after::before{
    width: 0;
    height: 0;
    border-left: 17px solid transparent;
    border-right: 17px solid transparent;
    border-top: 30px solid #21619c;
    position: absolute;
    content: "";
    top: 10px;
    left: -17px;
}
/*Text*/
.new-tag p {
    z-index: 1;
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    font-weight: bold;
    color: white;
}

/* Caution Tag */
.caution p {
    background: url(../pics/icon-warning.png);
    background-size: auto;
    background-size: 100%;
    width: 18px;
    height: 18px;
    position: absolute;
    right: 7px;
    top: 0;
    bottom: 0;
    display: flex;
    margin: auto;
    background-repeat: no-repeat;
}

/* Widgets Animations */
@keyframes fade-in {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    100% {
        opacity: 1;
        transform: scale(.7);
    }
}
@keyframes fade-in2 {
    0% {
        transform: rotate(0deg) scale(0.3);
    }
    100% {
        transform: rotate(25deg) scale(.8);
    }
}