/**
 * Copyright (c) 2005-2015 RevX Systems, Inc. All Rights Reserved.
 *
 * All Rights Reserved.  Unpublished rights reserved under
 * the copyright laws of the United States.
 *
 * The software contained on this media is proprietary to
 * and embodies the confidential technology of RevX Systems, Inc.
 *
 * Possession, use, duplication or dissemination of
 * the software and media is authorized only pursuant to
 * a valid written license from RevX Systems, Inc.
 *
 * RESTRICTED RIGHTS LEGEND  Use, duplication, or disclosure
 * by the U.S. Government is subject to restrictions as set
 * forth in Sub paragraph (c)(1)(ii) of DFARS 252.227-7013,
 * or in FAR 52.227-19, as applicable.
 *
 * Standard Site Styling.
 *
 */

  /*
  ** Style for links.
  */
  a:link    {color: #006633;}  /* unvisited link  */
  a:visited {color: #999900;}  /* visited link    */
  a:hover   {color: #33CC00;}  /* mouse over link */
  a:active  {color: #33CC00;}  /* selected link   */

  /*
  ** Body tag styling.
  */

  body
  {
      margin: 0px;
      /* font-family: Agency 'Pontano Sans', sans-serif; */
      font-family: Arial, Verdana, sans-serif;

/*
      background-position: left top;
      background-repeat: no-repeat;
      background-image: url("/images/Covert-Background.jpg");

      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;

*/

      background: #efefef;
      background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZWZlZmVmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
      background: -moz-linear-gradient(-45deg,  #efefef 0%, #ffffff 100%);
      background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#efefef), color-stop(100%,#ffffff));
      background: -webkit-linear-gradient(-45deg,  #efefef 0%,#ffffff 100%);
      background: -o-linear-gradient(-45deg,  #efefef 0%,#ffffff 100%);
      background: -ms-linear-gradient(-45deg,  #efefef 0%,#ffffff 100%);
      background: linear-gradient(135deg,  #efefef 0%,#ffffff 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#ffffff',GradientType=1 );

      font-family: 'Montserrat', sans-serif;
      font-size: 14px;
  }

  select
  {
    width: 300px; height: 40px; border-radius: 5px;
    font-size: 16px; text-align: left; padding-left: 20px;
  }

  input
  {
    width: 300px; height: 40px; border-radius: 5px; padding-left: 10px;
    font-size: 16px;
  }

  table, td
  {
    margin-bottom: 25px;
  }

  /*
  ** Generic Classes to be used in conjunction with others to achieve layout.
  */

  .lCell   { width: 50%; text-align: left;  vertical-align: top; padding-bottom: 40px; margin: 0px; }
  .rCell   { width: 50%; text-align: right; vertical-align: top; padding-bottom: 40px; margin: 0px; }

  .caption { font-size: 18px; font-weight: bold; height: 10px; }
  .regular { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 100; }
  .small   { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: 400; }
  .italic  { font-style: italic; }
  .bold    { font-weight: bold; }



  .right       { text-align: right; }
  .left        { text-align: left; }
  .top         { vertical-align: text-top; }
  .bottom      { vertical-align: text-bottom; }
  .red         { color: #FF0000; }

  /*
  ** Style for declaring the jiggler.  Although this class does nothing, it serves
  ** as the selector for the jQuery jiggler.
  */
  .jiggle
  {

  }

  img.withLeftMargin
  {
    margin-left: 5px;
    opacity: .5;
  }

  img.withLeftMargin:hover
  {
    opacity: 1;
  }


/*
** Selector based styling
*/

  #canvas  {  width: 950px; height: auto;
              margin-left: auto; margin-right: auto; margin-top: 50px;
              padding: 15px;
              border: solid #bfbfbf 1px;
              border-radius: 10px;
              background-color: white;
              box-shadow: 5px 5px 6px #d9d9d9;
           }

  #header  {  width: 100%; height: 100px;
              border: solid black 0px;
           }

  #logo    {  width: 300px; height: 100px; float: left; border: solid black 0px; }
  #social  {  width: 400px; height: 50px; float: right; border: solid black 0px; text-align: right; padding-right: 50px; }

  #title   {  width: 400px; height: 50px; float: right; border: solid black 0px; text-align: right;
              font-family: 'Oswald', sans-serif; font-size: 22px; font-weight: 400; color: #bfbfbf;
              padding-right: 50px;
           }

  #form    {  width: 100%; height: auto;
              border: solid black 0px;
           }

  #footer  {  width: 100%; height: auto;
              border: solid black 0px;
           }

  /*
  ** Styles for the Descriptive list entry fields.
  */
  dl.register
  {
    font:normal 12px/15px Arial;
    position: relative;
    width: 500px;
    margin-left: 25px;
    display: block; text-align: right;
  }

  dt.register
  {
    font: "Times New Roman", Times, serif;
    font-size: 14px;
    clear: both;
    float:left;
    width: 275px;
    padding: 4px 0 2px 0;
    text-align: left;
    color: #000000;
  }

  dd.register
  {
    float: right;
    width: 200px;
    margin: 0 0 8px 0;
    padding-left: 6px;
  }

  /*
  ** Styling for the tooltips.
  */
  .hint
  {
    display: none;
    position: absolute;
    right: -250px;
    width: 200px;
    margin-top: -3px;
    border: 1px solid #c93;
    padding: 10px 12px;
    /*	to fix IE6, I can't just declare a background-color,
        I must do a bg image, too!  So I'm duplicating the pointer.gif
        image, and positioning it so that it doesn't show up
        within the box */
    background: #ffc url(../images/tooltip/pointer.gif) no-repeat -10px 5px;
    color: #000000;
    text-align: left;
  }

  .hint .hint-pointer
  {
    position: absolute;
    left: -10px;
    top: 5px;
    width: 10px;
    height: 19px;
    background: url(../images/tooltip/pointer.gif) left top no-repeat;
  }


/*
** Style for a field when its considered to be "Valid".
*/
input.Valid
{
    outline:none;
    transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    border-radius:8px;
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border:1px solid rgba(0,0,0,    0.2);
    color: #000000;
    font-weight:500;

    box-shadow: 0 0 5px rgba(121, 191, 66, 1);
    -webkit-box-shadow: 0 0 5px rgba(121, 191, 66, 1);
    -moz-box-shadow: 0 0 5px rgba(121, 191, 66, 1);
    border:1px solid rgba(121, 191, 66, 0.8);

}

/*
** Style for an input field when its considered to be Valid and IN FOCUS.
*/
input.Valid:focus
{
    box-shadow: 0 0 5px rgba(121, 191, 66, 1);
    -webkit-box-shadow: 0 0 5px rgba(121, 191, 66, 1);
    -moz-box-shadow: 0 0 5px rgba(121, 191, 66, 1);
    border:1px solid rgba(121, 191, 66, 0.8);
}

/*
** Style for an input field when its considered to be Invalid.
*/
input.Invalid
{
    outline:none;
    transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    border-radius:4px;
    -webkit-border-radius:4px;
    -moz-border-radius:0px;
    border:1px solid rgba(0,0,0, 0.2);
    color: #999999;
    /* background-color: #FFCACA; */
    /* background-color: #ffe6e6; */
    background-color: #fbfce5;

}

/*
** Style for an input field when its considered to be Invalid and IN FOCUS.
*/
input.Invalid:focus
{
    box-shadow: 0 0 5px rgba(191, 66, 78, 1);
    -webkit-box-shadow: 0 0 5px rgba(191, 66, 78, 1);
    -moz-box-shadow: 0 0 5px rgba(191, 66, 78, 1);
    border:1px solid rgba(191, 66, 78, 0.8);
    background-color: #ffffe5;
}

/*
** Style for a field when its considered to be "Valid".
*/
select.Valid
{
    outline:none;
    transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    border-radius:6px;
    -webkit-border-radius:8px;
    -moz-border-radius:6px;
    border:1px solid rgba(0,0,0, 0.2);
    color: #000000;
    font-weight:500;

    box-shadow: 0 0 5px rgba(121, 191, 66, 1);
    -webkit-box-shadow: 0 0 5px rgba(121, 191, 66, 1);
    -moz-box-shadow: 0 0 5px rgba(121, 191, 66, 1);
    border:1px solid rgba(121, 191, 66, 0.8);

}

/*
** Style for an input field when its considered to be Valid and IN FOCUS.
*/
select.Valid:focus
{
    box-shadow: 0 0 5px rgba(121, 191, 66, 1);
    -webkit-box-shadow: 0 0 5px rgba(121, 191, 66, 1);
    -moz-box-shadow: 0 0 5px rgba(121, 191, 66, 1);
    border:1px solid rgba(121, 191, 66, 0.8);
}

/*
** Style for an input field when its considered to be Invalid.
*/
select.Invalid
{
    outline:none;
    transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    border-radius:3px;
    -webkit-border-radius:3px;
    -moz-border-radius:0px;
    border:1px solid rgba(0,0,0, 0.2);
    color:#999999;
    background-color: #ffffe5;
}

/*
** Style for an input field when its considered to be Invalid and IN FOCUS.
*/
select.Invalid:focus
{
    box-shadow: 0 0 5px rgba(191, 66, 78, 1);
    -webkit-box-shadow: 0 0 5px rgba(191, 66, 78, 1);
    -moz-box-shadow: 0 0 5px rgba(191, 66, 78, 1);
    border:1px solid rgba(191, 66, 78, 0.8);
}


/*
** Modal Style Definitions.
*/

.modal
{
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 0, 0, 0, .1 )
    url('../images/modal/busy-loader.gif')
    50% 50%
    no-repeat;
    color: #000000;
}

/*
** Define the class that creates a model SUCCESS user experience.
*/
.modalSuccess
{
    display:none;
    position:fixed;
    z-index:9998;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background: rgba( 0, 0, 0, .1 ) url('../images/modal/success.jpg') 50% 50% no-repeat;
    color: #000000;
}

/*
** Define the class that creates a model FAIL user experience.
*/
.modalFail
{
    display:none;
    position:fixed;
    z-index:9998;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background: rgba( 0, 0, 0, .1 ) url('../images/modal/fail.jpg') 50% 50% no-repeat;
    color: #000000;
}

/*
** Define the class that creates a model Activated user experience.
*/
.modalActivated
{
    display:none;
    position:fixed;
    z-index:9998;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background: rgba( 0, 0, 0, .1 ) url('../images/modal/success.jpg') 50% 50% no-repeat;
    color: #000000;
}

/*
** My Account Styles.
*/

img.myaccount
{
  float: left;
  margin-right: 10px;
}

table.myaccount_container
{
  width: 98%;
  padding-left: 0px;
  padding-right: 45px;
  padding-bottom: 5px;
  padding-top: 10px;
  opacity: .7;
  margin-left: 20px;
}

table.myaccount_container tr
{
  height: auto;
}

table.myaccount_container td
{
    padding: 10px;
}

table.myaccount_container tr:hover
{
  background-color: #efefef;
}

table.myaccount
{
  width: 800px;
  padding-right: 5px;
  padding-left: 45px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 5px;
  margin-left: 10px;
  font-size: 10px;
}

table.myaccount tr
{
    height: auto;
}

table.myaccount td
{
    vertical-align: top;
}

hr.myaccount
{
  border-top: dotted 2px;
  color: #b3b3b3;
  margin-left: 48px;
}

input.myaccount
{
    width: 100%;
    height: 30px;
    margin-right: 10px;

    box-shadow: 0 0 0px rgba(121, 191, 66, 1);
    -webkit-box-shadow: 0 0 0px rgba(121, 191, 66, 1);
    -moz-box-shadow: 0 0 0px rgba(121, 191, 66, 1);
    border:1px solid rgba(121, 191, 66, 0.8);
}

input.send
{
    background-color: #efefef;
    color: #000000;
}

input.send:hover
{
  background-color: #bfbfbf;
  color: #000000;
  cursor: pointer;
}

select.myaccount
{
    width: 195px;
    height: 30px;
    margin-right: 0px;
}


/*
** Table Styling for the Transactions History View
*/

/*
** The payment class is used when rendering the Account Transactions table to
** bring attention to posted payments on the account.
*/

.payment
{
  color: #61b832;
}

.tb_transhist
{
    width: 94%;
    border: solid #ccc 1px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 1px #ccc;
    -moz-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc;
    margin-left: 45px;
}

.tb_transhist tr:hover {
    background: #fbf8e9;
    -o-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

.tb_transhist td, .tb_transhist th {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding: 10px;
    text-align: left;
}

.tb_transhist th {
    background-color: #dce9f9;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
    background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:    -moz-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:     -ms-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:      -o-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:         linear-gradient(top, #ebf3fc, #dce9f9);
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
    border-top: none;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

.tb_transhist td:first-child, .tb_transhist th:first-child {
    border-left: none;
}

.tb_transhist th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
}

.tb_transhist th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
}

.tb_transhist th:only-child{
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}

.tb_transhist tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
}

.tb_transhist tr:last-child td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;
}

/*
** Table Styling for the Active Subscriptions Table
*/

.tb_subscriptions
{
    width: 94%;
    border: solid #ccc 1px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 1px #ccc;
    -moz-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc;
    margin-left: 45px;
}

.tb_subscriptions tr:hover {
    background: #fbf8e9;
    -o-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

.tb_subscriptions td, .tb_subscriptions th {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding: 10px;
    text-align: left;
    vertical-align: top;
}

.tb_subscriptions th {
    background-color: #dce9f9;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
    background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:    -moz-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:     -ms-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:      -o-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:         linear-gradient(top, #ebf3fc, #dce9f9);
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
    border-top: none;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

.tb_subscriptions td:first-child, .tb_subscriptions th:first-child {
    border-left: none;
}

.tb_subscriptions th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
}

.tb_subscriptions th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
}

.tb_subscriptions th:only-child{
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}

.tb_subscriptions tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
}

.tb_subscriptions tr:last-child td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;
}

/*
** Styling for Checkboxes throughout.
*/
.regular-checkbox {
    -webkit-appearance: none;
    background-color: #fafafa;
    border: 1px solid #cacece;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    padding: 9px;
    border-radius: 3px;
    display: inline-block;
    position: relative;
    top: 7px;
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

.regular-checkbox:active, .regular-checkbox:checked:active {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

.regular-checkbox:checked {
    background-color: #e9ecee;
    border: 1px solid #adb8c0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
    color: #99a1a7;
}

.regular-checkbox:checked:after {
    content: '\2714';
    font-size: 14px;
    position: absolute;
    top: 0px;
    left: 3px;
    color: #99a1a7;
}

.cssLink:hover
{
  font-weight: bold;
  cursor: pointer;
}

/*
** This can be over-ridden in the customer CSS to change the default expand/collapse mode of the device
** manager list within the services widget.
**
** none - will default the display to a collapsed DIV
** inline - will default the display to an expanded DIV
*/

.deviceGroupExpandCollapse
{
  display: none;
}

/**
 * Styling for prepaid card validation section. Displays information
 * about entered card number in digital card fashion
 */
 #verifyWrapper{
   font-size: 1.25em;
   width:490px;
   height: 175px;
   border: 1px solid rgba(0,0,0,0.2);
   border-radius: 20px;
   padding: 10px;
   -webkit-box-shadow: 5px 15px 18px 4px rgba(0,0,0,0.28);
   -moz-box-shadow: 5px 15px 18px 4px rgba(0,0,0,0.28);
   box-shadow: 5px 15px 18px 4px rgba(0,0,0,0.28);
   margin-left: -5px;
 }

 #verify{
   display: grid;
   grid-template-columns: 1fr 1fr 1fr
 }

 .gridRow{
   padding: 7px;
   margin: 10px;
   font-size: 1.15em;
   border-radius: 7px;
   background-color: rgba(0,0,0,0.085);
 }

 #verifyCardValue{
   color: #61b832;
   font-size: 1.5em;
   font-weight: bold;
   text-align: right;
   grid-row: 1;
   grid-column: 3;
 }

 #verifyCompanyName {
   text-indent: 10px;
   grid-row: 2;
   grid-column-start: 1;
   grid-column-end: 4;
 }

 #verifyCardNumber{
   text-align: center;
   grid-row: 3;
   grid-column-start: 1;
   grid-column-end: 3;
 }

 #verifyExpiration{
   grid-row: 3;
   grid-column-start: 3;
   grid-column-end: 4;
 }

 #verifyTitle{
   font-size: 1.5em;
   font-weight: bold;
   grid-row: 1;
   grid-column-start: 1;
   grid-column-end: 3;
   background-color: transparent;
 }

/*
 * Displays the Package Long Description in the index page during signup
 * and within the MyAccount page under each package.
*/

.IndexPkgLongTextDesc {
  margin: 10px 0px 10px 0px;
  color: black;
}

.MyAccountDevicesPkgLongTextDesc {
    margin: 0px 0px 50px 0px;
    padding: 0px 0px 0px 0px;
    color: black;
    font-size: 11px;
    font-weight: 500;
}

.MyAccountDevicesPkgTooltip {
    margin: 0px 0px 50px 45px;
    padding: 0px 0px 0px 0px;
    color: #8E8B8B;
    font-size: 10px;
    font-weight: 100;
}

.MySubscriptionsPkgTitle {
    margin: 0px 0px 50px 0px;
    padding: 0px 0px 0px 0px;
    color: black;
    font-size: 12px;
    font-weight: bold;
}

.MySubscriptionsPkgLongTextDesc {
    margin: 0px 0px 50px 0px;
    padding: 0px 0px 0px 0px;
    color: #8E8B8B;
    font-size: 11px;
    font-weight: 200;
}

#billingHistoryHeaderTable, #billingHistoryTransactionsTable, #billingHistoryPaymentsTable {
    border-collapse: collapse;
    width: 100%;
    padding-left: 35px;
    padding-right: 35px;
    margin-bottom: 0px;
}

#invoiceHead {
    padding: 0px;
}

#billingHistoryTransactionsTable td,tr {
    vertical-align: top;
}

.billingHistoryTransactionHr {
    font-weight: bold;
}

.billingHistoryTransactionContent {
    font-size: 12px;
    font-weight: normal;
}

.billingHistoryTransactionId {
    font-size: 10px;
    font-weight: normal;
}

.billingHistoryHr {
    padding: 0px;
    margin: 0px;
    vertical-align: top;
}

.billingHistoryHr td,tr {
    padding: 0px;
    margin: 0px;
    vertical-align: top;
    font-size: 12px;
}

#billingHistoryPaymentsTable tr:nth-child(even) {
    background-color: #ebebeb;
}

#billingHistoryPaymentsTable td {
    vertical-align: top;
    font-size: 12px;
}

.usageContainer{
  display:block;
  width:750px;
}

#usageChartContainer{
  height: auto;
  width:750px;
}

table.dataTable tbody td {
    font-family: "Courier New";
}

.dataTables_filter input{
    margin-bottom: 20px;
}

.deviceGroupExpandCollapse td {
    vertical-align: middle !important;
}

.edmActionsCell {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.edmActionsCell img {
    align-self: center;
    max-width: 25px;
    max-height: 25px;
    display:block;
    margin:auto;
}

.edmRestoreIcon, .edmSuspendIcon, .edmDeleteIcon {
    vertical-align: middle;
    padding: 5px;
    line-height: 39px;
}

.edmRestoreIcon {
    color: #5cac5c;
}

.edmSuspendIcon {
    color: #909090;
}

.edmDeleteIcon {
    color: #ff6464;
}

.edmDeleteIcon:hover {
    color: red;
    cursor: pointer;
    content: url("/images/edmDeleteHover.png");
}

.edmSuspendIcon:hover {
    color: #242424;
    cursor: pointer;
    content: url("/images/edmSuspendHover.png");
}


.edmRestoreIcon:hover {
    color: green;
    cursor: pointer;
    content: url("/images/edmRestoreHover.png");
}

#edmWrapper {
    margin-left: 50px;
    width: 810px;
}

#grid {
    height: auto;
}

.dhx_grid-content {
    border: 1px solid rgb(118, 118, 118)!important;
}

select#edmPackageDropdown {
    margin-bottom: 15px;
    width: 350px;
    color: red;
    font-weight: bold;
}

select#edmPackageDropdown option {
    font-weight: bold;
}

#edmAddLine {
    margin-left: 5px;
    width: 125px;
    background: white;
    border: 1px solid rgb(118, 118, 118);
    color: #0d9c0d;
    font-weight: bold;
}

#edmAddLine:hover {
    border: 2px solid rgb(118, 118, 118);
    color: #005f00;
}

#edmPackageLineCount {
    float: right;
    text-align: right;
    line-height: 40px;
    width: 280px;
    margin-left: 10px;
    margin-right: 10px;
    font-size: 16px;
}

.btn-edm-activate {
    color: green;
    font-weight: bold;
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
}

#edmActivateWrapper {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: rgba(0,0,0,0.3);
}

#edmActivateContainer {
    background-color: white;
    border-radius: 5px 5px 5px 5px;
    border: 1px solid black;
    width: 500px;
    height: 425px;
    text-align: center;
    position: absolute;
    left:50%;
    top:50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 101;
}

#edmActivateClose {
    line-height: 21px;
    border-radius: 2px 2px 2px 2px;
    color: white;
    background-color: red;
    font-weight: bold;
    float:right;
    margin-top: -7px;
    margin-right: -7px;
    display:inline-block;
    padding:1px 7px;
}

#edmActivateClose:hover {
    cursor: pointer;
    background-color: #900000;
}

#edmActivateTitle {
    padding-top: 40px;
    height: 50px;
    font-weight: bold;
    text-align: center;
}

.edmActivateDropDown, .edmActivateInput {
    width: 350px;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid black;
    outline: none;
}

select.edmActivateDropDown {
    font-weight: bold;
}

select.edmActivateDropDown option {
    font-weight: revert;
    color: black;
}

#edmActivateButton {
    color: green;
    width: 350px;
    margin-top: 40px;
    padding: 10px;
    border: 1px solid black;
    font-weight: bold;
    background-color: Transparent;
    background-repeat:no-repeat;
    cursor:pointer;
    overflow: hidden;
    outline:none;
}

#edmActivateButton:hover {
    background-color: whitesmoke;
    color: #005f00;
}

.edmValid {
    border: 1px solid black;
}

.edmValid:focus {
    border: 1px solid green;
}

.edmInvalid {
    border: 1px solid red;
}

#edmActivateSelectedPackageText {
    font-weight: bold;
    color:red;
}

#edmActivateSelectedServiceText {
    color:red;
}

#state {
    width: 190px;
}