/*
    MEMGINE CSS STYLES - SHARSHA - 25/01/2017
*/
/*
    Grid View
        Alt-Row         # F 7 D B D E
        Header          # A A 2 7 2 F
        Row             # F F F F F 6
    Table
        Alt-Row         # 9 B E 8 E 0
        Row             # F 7 D B D E
        Alt-Row (Sub)   # E 2 F 2 D 5
        Row (Sub)       # F 9 F B B A
*/

/*
    Color Codes
*/
@black: #000000;
@crimsonRed: #990000;
@darkRed: #AA272F;
@grayishGreen: #E2F2D5;
@grayishRed: #F7DBDE;
@paleYellow: #FFFFE6;
@softYellow: #F9FBBA;
@white: #FFFFFF;

/* Imports */
@import "Page.less";

/*
    Common styles
*/
.font (@color: @black, @fstyle: normal, @fvariant: normal, @fweight: normal, @fsize: 11px, @tdecor: none)
{
   color: @color;
   font: @fstyle @fvariant @fweight @fsize Arial, sans-serif;
   text-decoration: @tdecor;
}

/*
    Below styles are arranged by Alphebatical order.
*/

/*
    A Text
*/
.aTextCrimsonRed
{
   .font (@crimsonRed, normal, normal, bold, 11px, none);
   cursor: pointer;
}

/*
    Button Styles
*/

.btnCommon (@bgColor: gray, @color: @black)
{
   .font (@color, normal, normal, bold, 8pt, none);
   background-color: @bgColor;
   border: 2px inset black;
   border-radius: 25px;
   cursor: pointer;
   height: 20px;
   text-align: center;
   vertical-align: bottom;
}

.btnCrimsonRed
{
   .btnCommon(@crimsonRed, @white);
}

.btnCrimsonRedSquare
{
   background-color: #AF2A2F;
   border-style: none;
   color: #FFF;
   font: normal normal bold 13px Arial, sans-serif;
   cursor: pointer;
   height: 25px;
   padding: 5px 15px;
   text-align: center;
   text-decoration: none !important;
   vertical-align: middle;
}

.btnCrimsonRedSquare:hover
{
   background-color: rgba(175,42,47, 0.8);
}


.btnCrimsonRedDisabled
{
   .btnCommon(@crimsonRed, gray);
}

.btnGrey
{
   .btnCommon(gray, @black);
}

.btnGraySquare
{
   background-color: #B2B2B2;
   border-style: none;
   color: #000000;
   font: normal normal bold 13px Arial, sans-serif;
   cursor: pointer;
   height: 25px;
   padding: 4px 12px 4px 12px;
   text-align: center;
   text-decoration: none !important;
   vertical-align: middle;
}

.btnGraySquare:hover
{
   background-color: rgba(0, 0, 0, 0.3);
}



/*
    Div Styles
*/
.divCommonProps (@bcolor)
{
   background-color: @bcolor;
   border-width: thin;
   text-align: center;
   .font (@black, normal, normal, normal, 12px, none);
}

.divCrimsonRed
{
   .divCommonProps (@crimsonRed);
}

.divGrayishGreen
{
   .divCommonProps (@grayishGreen);
}

.divGrayishRed
{
   .divCommonProps (@grayishRed);
}

.divPaleYellow
{
   .divCommonProps (@paleYellow);
}

.divSoftYellow
{
   .divCommonProps (@softYellow);
}

/*
    Drop Down List Styles
*/
.ddlContent
{
   border-style: inset;
   color: #000000;
   font-family: Arial, sans-serif;
   font-size: 11px;
   height: 18px;
   text-decoration: none;
   width: 150px;
}

/*
    General Text Styles (e.g. error msg, sub title, ...)
*/
.bldTxtBlack
{
   .font (@black, normal, normal, bold, 9pt, none);
}

.errTextRed
{
   .font (Red, normal, normal, bold, 9pt, none);
}

.txtCrimsonRed
{
   .font (@crimsonRed, normal, normal, normal, 13px, none);
}

/*
    Grid View Styles
*/
/* Grid view header: Dark Red */
.gvCommonProps (@bcolor, @color: @black, @fweight: normal, @fsize: 11px, @tdecor: none)
{
   background-color: @bcolor;
   border-width: thin;
   height: 20px;
   text-align: center;
   .font (@color, normal, normal, @fweight, @fsize, @tdecor);
}

.gvHeader a
{
   .gvCommonProps (@darkRed, @white, bold, 12px, underline);
}

.gvHeader th
{
   .gvCommonProps (@darkRed, @white, bold, 12px, none);
}

/* Grid view row combination 1: Grayish Red & Pale Yellow */
.gvRowGrayishRed
{
   .gvCommonProps (@grayishRed, @black, normal, 12px, none);
}

.gvRowAltPaleYellow
{
   .gvCommonProps (@paleYellow, @black, normal, 12px, none);
}

/* Grid view row combination 2: Grayish Green & Soft Yellow */
.gvRowGrayishGreen
{
   .gvCommonProps (@grayishGreen, @black, normal, 12px, none);
}

.gvRowAltSoftYellow
{
   .gvCommonProps (@softYellow, @black, normal, 12px, none);
}


/* Grid view pager style */
.gvPager
{
   font-size: small;
   font-stretch: ultra-expanded;
}

.gvPager span
{
   background-color: #AA272F;
   color: white;
}

.gvPager td
{
   padding-bottom: 2px;
   padding-left: 4px;
   padding-right: 4px;
   padding-top: 1px;
}

/*
    Progress Bar
*/
.showLoadingModal
{
   -moz-opacity: 0.5;
   background-color: lightgray;
   left: 0;
   min-height: 100%;
   opacity: 0.5;
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 99;
}

.showLoadingGIF
{
   -webkit-animation: spin 2s linear infinite;
   animation: spin 2s linear infinite;
   border: 16px solid #f3f3f3; /* Light grey */
   border-bottom: 16px solid #46885D;
   border-left: 16px solid #FFFFE6;
   border-radius: 50%;
   border-right: 16px solid #000000;
   border-top: 16px solid #990000;
   display: none;
   width: 60px;
   height: 60px;
   position: fixed;
   z-index: 999;
}

@keyframes spin
{
   0%
   {
      transform: rotate(0deg);
   }

   100%
   {
      transform: rotate(360deg);
   }
}

/*
    Text Box
*/
.txtBox
{
   border-style: inset;
   color: @black;
   font-family: Arial, sans-serif;
   font-size: 11px;
   height: 14px;
   text-decoration: none;
   width: 147px;
}