/*  HTML5 ✰ Boilerplate  */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,  footer, header, hgroup,
menu, nav, section, summary, time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display:block;
}
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#666; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
caption, th, td {text-align:left;font-weight:normal;float:none !important;}
table, th, td {vertical-align:middle;}
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }


body { font:13px/1.231 sans-serif; *font-size:small; }
select, input, textarea, button { font:99% sans-serif; }
pre, code, kbd, samp { font-family: monospace, sans-serif; }

body, select, input, textarea {   color: #444; }
h1,h2,h3,h4,h5,h6 { font-weight: bold; }
html { overflow-y: scroll; }

a:hover, a:active { outline: none; }
a, a:active, a:visited { color: #607890; }
a:hover { color: #036; }

ul, ol { margin-left: 1.8em; }
ol { list-style-type: decimal; }

nav ul, nav li { margin: 0; }
small { font-size: 85%; }
strong, th { font-weight: bold; }
td, td img { vertical-align: middle; }
sub { vertical-align: sub; font-size: smaller; }
sup { vertical-align: super; font-size: smaller; }
pre {  padding: 15px;  white-space: pre;  white-space: pre-wrap;  white-space: pre-line;  word-wrap: break-word; }
textarea { overflow: auto; }
.ie6 legend, .ie7 legend { margin-left: -7px; }
input[type="radio"] { vertical-align: text-bottom; margin-right: 7px;}
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
label, input[type=button], input[type=submit], button { cursor: pointer; }
button, input, select, textarea { margin: 0; }
input:valid, textarea:valid   {  }
input:invalid, textarea:invalid { border-radius: 1px;  -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red;  box-shadow: 0px 0px 5px red; }
.no-boxshadow input:invalid,
.no-boxshadow textarea:invalid { background-color: #f0dddd; }

::-moz-selection{ background: #5E92FF; color:#fff; text-shadow: none; }
::selection { background:#5E92FF; color:#fff; text-shadow: none; }
a:link { -webkit-tap-highlight-color: #FF5E99; }

button {  width: auto; overflow: visible; }
.ie7 img { -ms-interpolation-mode: bicubic; }

.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.hidden { display: none; }
.visuallyhidden { position: absolute !important; clip: rect(1px 1px 1px 1px);  clip: rect(1px, 1px, 1px, 1px); }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after {  content: "\0020"; display: block; height: 0; visibility: hidden;	 }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }


 /* Primary Styles
    Author:
 */
/* forms.css */
label {font-weight:bold;}
fieldset {padding:0 1.4em 1.4em 1.4em;margin:0 0 1.5em 0;border:1px solid #ccc;}
legend {font-weight:bold;font-size:1.2em;margin-top:-0.2em;margin-bottom:1em;}
fieldset, #IE8#HACK {padding-top:1.4em;}
legend, #IE8#HACK {margin-top:0;margin-bottom:0;}
input[type=text], input[type=password], input.text, input.text2, input.title, textarea {background-color:#fff;border:1px solid #bbb;}
input[type=text]:focus, input[type=password]:focus, input.text:focus, input.text2:focus, input.title:focus, textarea:focus {border-color:#666;}
select {background-color:#fff;border-width:1px;border-style:solid;}
input[type=text], input[type=password], input.text, input.text2, input.title, textarea, select {margin:0.5em 0; max-width: 100%;}
input.text, input.title {width:300px;padding:5px;}
input.text2 {width:150px;padding:5px;}
input.text2 {width:150px;padding:5px;}
input[disabled="disabled"], input[readonly] { background-color: whitesmoke; }
select[disabled="disabled"] { background-color: whitesmoke; }
input.title {font-size:1.5em;}
textarea {width:390px;height:250px;padding:5px;}
form.inline {line-height:3;}
form.inline p {margin-bottom:0;}
.error, .alert, .notice, .success, .info {padding:0.8em;margin-bottom:1em;border:2px solid #ddd;}
.error, .alert {background:#fbe3e4;color:#8a1f11;border-color:#fbc2c4;}
.notice {background:#fff6bf;color:#514721;border-color:#ffd324;}
.success {background:#e6efc2;color:#264409;border-color:#c6d880;}
.info {background:#d5edf8;color:#205791;border-color:#92cae4;}
.error a, .alert a {color:#8a1f11;}
.notice a {color:#514721;}
.success a {color:#264409;}
.info a {color:#205791;}
.error { display: block; }

div .validation-error {
    background: none repeat scroll 0 0 #FBE3E4;
    border: 1px solid #FBC2C4;
    margin-bottom: 18px;
    padding:15px;
}

div .validation-error span {
    background: url('https://assets1.cleartax-cdn.com/img/cross-transparent.png');
    background-repeat: no-repeat;
    background-size: 18px;
    display: block;
    font-size: 16px;
    padding-left: 24px;
}

div.validation-error ul {
    margin: 0;
}

div .validation-error li {
    font-size: 18px;
    margin: 4px 0 0 41px;
}


div.validation-success-border {
    background: #e6efc2;
    padding: 15px;
    border: 1px solid #c6d880;
}

div .validation-success {
    background: url('https://assets1.cleartax-cdn.com/img/tick-transparent.png');
    background-repeat: no-repeat;
    background-size: 18px;
    display: block;
    font-size: 16px;
    padding-left: 24px;
}

/* --------------------------------------------------------------

   grid.css
   * Sets up an easy-to-use grid of 24 columns.

   By default, the grid is 950px wide, with 24 columns
   spanning 30px, and a 10px margin between columns.

   If you need fewer or more columns, namespaces or semantic
   element names, use the compressor script (lib/compress.rb)

-------------------------------------------------------------- */

/* A container should group all your columns. */

/* This code should be overrrided by 2015.css*/

.container {
  width: 950px;
  margin: 0 auto;
}
/*
 ol.container2
{
  margin-top:10px;
 }

ol.container2 li{
  width: auto;
  list-style:none;
  float:left;
  margin-left:10px;
  text-align:center;
}


ol.container2 li a
{
    padding : 0px 20px 0px 20px;
    color:   white;
    font-weight:700;
    text-decoration : none;
}

ol.container2 li a:hover
{
    text-decoration: underline;
} */


/* Use this class on any .span / container to see the grid. */
.showgrid {
  background: url(../img/grid.png);
}


/* Columns
-------------------------------------------------------------- */

/* Sets up basic grid floating and margin. */
.column, .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-13, .span-14, .span-15, .span-16, .span-17, .span-18, .span-19, .span-20, .span-21, .span-22, .span-23, .span-24 {
  float: left;
  margin-right: 10px;
}

h3.accordion-header
{
    padding-left: 25px;
    font-size: 20px;
}

/* The last column in a row needs this class. */
.last { margin-right: 0; }

/* Use these classes to set the width of a column. */
.span-1 {width: 30px;}

.span-2 {width: 70px;}
.span-3 {width: 110px;}
.span-4 {width: 150px;}
.span-5 {width: 190px;}
.span-6 {width: 230px;}
.span-7 {width: 270px;}
.span-8 {width: 310px;}
.span-9 {width: 350px;}
.span-10 {width: 390px;}
.span-11 {width: 430px;}
.span-12 {width: 470px;}
.span-13 {width: 510px;}
.span-14 {width: 550px;}
.span-15 {width: 590px;}
.span-16 {width: 630px;}
.span-17 {width: 670px;}
.span-18 {width: 710px;}
.span-19 {width: 750px;}
.span-20 {width: 790px;}
.span-21 {width: 830px;}
.span-22 {width: 870px;}
.span-23 {width: 910px;}
.span-24 {width:950px; margin-right:0;}
td.span-auto{width:auto;}
img.status-image{  width:20px;  height:20px;}

.imgcontainer img { max-width: 100%; }

/* Use these classes to set the width of an input. */
input.span-1, textarea.span-1, input.span-2, textarea.span-2, input.span-3, textarea.span-3, input.span-4, textarea.span-4, input.span-5, textarea.span-5, input.span-6, textarea.span-6, input.span-7, textarea.span-7, input.span-8, textarea.span-8, input.span-9, textarea.span-9, input.span-10, textarea.span-10, input.span-11, textarea.span-11, input.span-12, textarea.span-12, input.span-13, textarea.span-13, input.span-14, textarea.span-14, input.span-15, textarea.span-15, input.span-16, textarea.span-16, input.span-17, textarea.span-17, input.span-18, textarea.span-18, input.span-19, textarea.span-19, input.span-20, textarea.span-20, input.span-21, textarea.span-21, input.span-22, textarea.span-22, input.span-23, textarea.span-23, input.span-24, textarea.span-24 {
  border-left-width: 1px;
  border-right-width: 1px;
  padding-left: 5px;
  padding-right: 5px;
}

input.span-1, textarea.span-1 { width: 18px; }
input.span-2, textarea.span-2 { width: 58px; }
input.span-3, textarea.span-3 { width: 98px; }
input.span-4, textarea.span-4 { width: 138px; }
input.span-5, textarea.span-5 { width: 178px; }
input.span-6, textarea.span-6 { width: 218px; }
input.span-7, textarea.span-7 { width: 258px; }
input.span-8, textarea.span-8 { width: 298px; }
input.span-9, textarea.span-9 { width: 338px; }
input.span-10, textarea.span-10 { width: 378px; }
input.span-11, textarea.span-11 { width: 418px; }
input.span-12, textarea.span-12 { width: 458px; }
input.span-13, textarea.span-13 { width: 498px; }
input.span-14, textarea.span-14 { width: 538px; }
input.span-15, textarea.span-15 { /*width: 578px;*/ }
input.span-16, textarea.span-16 { width: 618px; }
input.span-17, textarea.span-17 { width: 658px; }
input.span-18, textarea.span-18 { width: 698px; }
input.span-19, textarea.span-19 { width: 738px; }
input.span-20, textarea.span-20 { width: 778px; }
input.span-21, textarea.span-21 { width: 818px; }
input.span-22, textarea.span-22 { width: 858px; }
input.span-23, textarea.span-23 { width: 898px; }
input.span-24, textarea.span-24 { width: 938px; }

/* Add these to a column to append empty cols. */

.append-1 { padding-right: 40px;}
.append-2 { padding-right: 80px;}
.append-3 { padding-right: 120px;}
.append-4 { padding-right: 160px;}
.append-5 { padding-right: 200px;}
.append-6 { padding-right: 240px;}
.append-7 { padding-right: 280px;}
.append-8 { padding-right: 320px;}
.append-9 { padding-right: 360px;}
.append-10 { padding-right: 400px;}
.append-11 { padding-right: 440px;}
.append-12 { padding-right: 480px;}
.append-13 { padding-right: 520px;}
.append-14 { padding-right: 560px;}
.append-15 { padding-right: 600px;}
.append-16 { padding-right: 640px;}
.append-17 { padding-right: 680px;}
.append-18 { padding-right: 720px;}
.append-19 { padding-right: 760px;}
.append-20 { padding-right: 800px;}
.append-21 { padding-right: 840px;}
.append-22 { padding-right: 880px;}
.append-23 { padding-right: 920px;}

/* Add these to a column to prepend empty cols. */

.prepend-1 { padding-left: 40px;}
.prepend-2 { padding-left: 80px;}
.prepend-3 { padding-left: 120px;}
.prepend-4 { padding-left: 160px;}
.prepend-5 { padding-left: 200px;}
.prepend-6 { padding-left: 240px;}
.prepend-7 { padding-left: 280px;}
.prepend-8 { padding-left: 320px;}
.prepend-9 { padding-left: 360px;}
.prepend-10 { padding-left: 400px;}
.prepend-11 { padding-left: 440px;}
.prepend-12 { padding-left: 480px;}
.prepend-13 { padding-left: 520px;}
.prepend-14 { padding-left: 560px;}
.prepend-15 { padding-left: 600px;}
.prepend-16 { padding-left: 640px;}
.prepend-17 { padding-left: 680px;}
.prepend-18 { padding-left: 720px;}
.prepend-19 { padding-left: 760px;}
.prepend-20 { padding-left: 800px;}
.prepend-21 { padding-left: 840px;}
.prepend-22 { padding-left: 880px;}
.prepend-23 { padding-left: 920px;}


/* Border on right hand side of a column. */
.border {
  padding-right: 4px;
  margin-right: 5px;
  border-right: 1px solid #ddd;
}

/* Border with more whitespace, spans one column. */
.colborder {
  padding-right: 24px;
  margin-right: 25px;
  border-right: 1px solid #ddd;
}


/* Use these classes on an element to push it into the
next column, or to pull it into the previous column.  */


.pull-1 { margin-left: -40px; }
.pull-2 { margin-left: -80px; }
.pull-3 { margin-left: -120px; }
.pull-4 { margin-left: -160px; }
.pull-5 { margin-left: -200px; }
.pull-6 { margin-left: -240px; }
.pull-7 { margin-left: -280px; }
.pull-8 { margin-left: -320px; }
.pull-9 { margin-left: -360px; }
.pull-10 { margin-left: -400px; }
.pull-11 { margin-left: -440px; }
.pull-12 { margin-left: -480px; }
.pull-13 { margin-left: -520px; }
.pull-14 { margin-left: -560px; }
.pull-15 { margin-left: -600px; }
.pull-16 { margin-left: -640px; }
.pull-17 { margin-left: -680px; }
.pull-18 { margin-left: -720px; }
.pull-19 { margin-left: -760px; }
.pull-20 { margin-left: -800px; }
.pull-21 { margin-left: -840px; }
.pull-22 { margin-left: -880px; }
.pull-23 { margin-left: -920px; }
.pull-24 { margin-left: -960px; }

.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24 {float: left; position:relative;}


.push-1 { margin: 0 -40px 1.5em 40px; }
.push-2 { margin: 0 -80px 1.5em 80px; }
.push-3 { margin: 0 -120px 1.5em 120px; }
.push-4 { margin: 0 -160px 1.5em 160px; }
.push-5 { margin: 0 -200px 1.5em 200px; }
.push-6 { margin: 0 -240px 1.5em 240px; }
.push-7 { margin: 0 -280px 1.5em 280px; }
.push-8 { margin: 0 -320px 1.5em 320px; }
.push-9 { margin: 0 -360px 1.5em 360px; }
.push-10 { margin: 0 -400px 1.5em 400px; }
.push-11 { margin: 0 -440px 1.5em 440px; }
.push-12 { margin: 0 -480px 1.5em 480px; }
.push-13 { margin: 0 -520px 1.5em 520px; }
.push-14 { margin: 0 -560px 1.5em 560px; }
.push-15 { margin: 0 -600px 1.5em 600px; }
.push-16 { margin: 0 -640px 1.5em 640px; }
.push-17 { margin: 0 -680px 1.5em 680px; }
.push-18 { margin: 0 -720px 1.5em 720px; }
.push-19 { margin: 0 -760px 1.5em 760px; }
.push-20 { margin: 0 -800px 1.5em 800px; }
.push-21 { margin: 0 -840px 1.5em 840px; }
.push-22 { margin: 0 -880px 1.5em 880px; }
.push-23 { margin: 0 -920px 1.5em 920px; }
.push-24 { margin: 0 -960px 1.5em 960px; }

.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24 {float: left; position:relative;}

/* Typography */
/* Default font settings.
   The font-size percentage is of 16px. (0.75 * 16px = 12px) */
html { font-size:100.01%; }
body {
  font-size: 75%;
  color: #222;
  background: #fff;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}

body.smoky-bg  { background: whitesmoke; }

/* Headings
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #111; }

h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
h2 { font-size: 2em; margin-bottom: 0.75em; }
h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
h6 { font-size: 1em; font-weight: bold; }

h1 img, h2 img, h3 img,
h4 img, h5 img, h6 img {
  margin: 0;
}

.underlined {
    color: #666;
    border-bottom: 3px solid #666;
    padding-bottom:5px;
}

/* Text elements
-------------------------------------------------------------- */

p           { margin: 0 0 1.5em; }
/*
    These can be used to pull an image at the start of a paragraph, so
    that the text flows around it (usage: <p><img class="left">Text</p>)
 */
.left  			{ float: left !important; }
p .left			{ margin: 1.5em 1.5em 1.5em 0; padding: 0; }
.right 			{ float: right !important; }
p .right 		{ margin: 1.5em 0 1.5em 1.5em; padding: 0; }

a:focus,
a:hover     { color: #09f; text-decoration: underline; }
a           { color: #06c; text-decoration: none}
a.underline { color: #09f; text-decoration: underline; }

blockquote  { margin: 1.5em; color: #666; font-style: italic; }
strong,dfn	{ font-weight: bold; }
em,dfn      { font-style: italic; }
sup, sub    { line-height: 0; }

abbr,
acronym     { border-bottom: 1px dotted #666; }
address     { margin: 0 0 1.5em; font-style: italic; }
del         { color:#666; }

pre         { margin: 1.5em 0; white-space: pre; }
pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; }


/* Lists
-------------------------------------------------------------- */

li ul,
li ol       { margin: 0; }
ul, ol      { margin: 0 1.5em 1.5em 0; padding-left: 1.5em; }

ul          { list-style-type: disc; }
ol          { list-style-type: decimal; }

dl          { margin: 0 0 1.5em 0; }
dl dt       { font-weight: bold; }
dd          { margin-left: 1.5em;}


/* Tables
-------------------------------------------------------------- */

/*
    Because of the need for padding on TH and TD, the vertical rhythm
    on table cells has to be 27px, instead of the standard 18px or 36px
    of other elements.
 */
table       { margin-bottom: 1.4em; width:100%; }
th          { font-weight: bold; }
thead th    { background: #c3d9ff; }
th,td,caption { padding: 4px 10px 4px 5px; }
/*
    You can zebra-stripe your tables in outdated browsers by adding
    the class "even" to every other table row.
 */
tbody tr:nth-child(even) td,
tbody tr.even td  {
    background: #e5ecf9;
}
tfoot       { font-style: italic; }
caption     { background: #eee; }


/* Misc classes
-------------------------------------------------------------- */
/*
.small      { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
.large      { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
*/
.hide       { display: none; }

.quiet      { color: #666; }
.loud       { color: #000; }
.highlight  { background:#ff0; }
.added      { background:#060; color: #fff; }
.removed    { background:#900; color: #fff; }

.first      { margin-left:0; padding-left:0; }
.last       { margin-right:0; padding-right:0; }
.top        { margin-top:0; padding-top:0; }
.bottom     { margin-bottom:0; padding-bottom:0; }

/* Buttons
-------------------------------------------------------------- */

a.button, button {
  display:block;
  float:left;
  margin: 0.7em 0.5em 0.7em 0;
  padding:5px 10px 5px 7px;   /* Links */

  border:1px solid #dedede;
  border-top:1px solid #eee;
  border-left:1px solid #eee;

  background-color:#f5f5f5;
  font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
  font-size:100%;
  line-height:130%;
  text-decoration:none;
  font-weight:bold;
  color:#565656;
  cursor:pointer;
}
button {
  width:auto;
  overflow:visible;
  padding:4px 10px 3px 7px;   /* IE6 */
}
button[type] {
  line-height:17px;           /* Safari */
}

*:first-child+html button[type] {
  padding:4px 10px 3px 7px;   /* IE7 */
}
button img, a.button img{
  margin:0 3px -3px 0 !important;
  padding:0;
  border:none;
  width:16px;
  height:16px;
  float:none;
}

/* Button colors
-------------------------------------------------------------- */

/* Standard */
button:hover, a.button:hover{
  background-color:#dff4ff;
  border:1px solid #c2e1ef;
  color:#336699;
}
a.button:active{
  background-color:#6299c5;
  border:1px solid #6299c5;
  color:#fff;
}

/* Positive */
body .positive {
  color:#529214;
}
a.positive:hover, button.positive:hover {
  background-color:#E6EFC2;
  border:1px solid #C6D880;
  color:#529214;
}
a.positive:active {
  background-color:#529214;
  border:1px solid #529214;
  color:#fff;
}

/* Negative */
body .negative {
  color:#d12f19;
}
a.negative:hover, button.negative:hover {
  background-color:#fbe3e4;
  border:1px solid #fbc2c4;
  color:#d12f19;
}
a.negative:active {
  background-color:#d12f19;
  border:1px solid #d12f19;
  color:#fff;
}

/* "Awesome" buttons from the dudes at z */
.awesome, .awesome:visited, a.awesome, a.awesome:visited {
    background: #222 url(https://assets1.cleartax-cdn.com/img/alert-overlay.png) repeat-x;
    display: inline-block;
    padding: 5px 10px 6px;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    position: relative;
    cursor: pointer;
}

    .awesome:hover							{ background-color: #111; color: #fff; }
    .awesome:active							{ top: 1px; }
    .small.awesome, .small.awesome:visited 			{ font-size: 11px; /*padding: ; */}
    .awesome, .awesome:visited,
    .medium.awesome, .medium.awesome:visited 		{ font-size: 13px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); padding: 6px 11px 7px;  }
    .large.awesome, .large.awesome:visited 			{ font-size: 14px; padding: 8px 14px 9px; }
    .larger.awesome, .larger.awesome:visited 		{ font-size: 16px; padding: 12px 20px 13px; }
    .huge.awesome, .huge.awesome:visited 			{ font-size: 20px; padding: 16px 28px 18px; }
    .length.awesome, .length.awesome:visited        { font-size: 13px; padding: 5px 30px 6px; }
    /* D4A017 */
    .gold.awesome, .gold.awesome:visited		{ background-color: #d4a017; }
    .gold.awesome:hover						    { background-color: #af7817; }

    .green.awesome, .green.awesome:visited		{ background-color: #91bd09; }
    .green.awesome:hover						{ background-color: #749a02; }
    .blue.awesome, .blue.awesome:visited		{ background-color: #2daebf; }
    .blue.awesome:hover							{ background-color: #007d9a; }
    .red.awesome, .red.awesome:visited			{ background-color: #e33100; }
    .red.awesome:hover							{ background-color: #872300; }
    .magenta.awesome, .magenta.awesome:visited		{ background-color: #a9014b; }
    .magenta.awesome:hover							{ background-color: #630030; }
    .orange.awesome, .orange.awesome:visited		{ background-color: #ff5c00; }
    .orange.awesome:hover							{ background-color: #d45500; }
    .yellow.awesome, .yellow.awesome:visited		{ background-color: #ffb515; }
    .yellow.awesome:hover							{ background-color: #fc9200; }

/* Screen.css */
/* Indentation instead of line shifts for sibling paragraphs. */
/*   p + p { text-indent:2em; margin-top:-1.5em; }
   form p + p  { text-indent: 0; } /* Don't want this in forms. */

/* For great looking type, use this code instead of asdf:
   <span class="alt">asdf</span>
   Best used on prepositions and ampersands. */
.alt {
  color: #666;
  font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", Georgia, serif;
  font-style: italic;
  font-weight: normal;
}
.light
{
    color: #666;
}
.semilight
{
    color: #333;
}
.bluehl
{
    color: #0070C0;
}
/* For great looking quote marks in titles, replace "asdf" with:
   <span class="dquo">&#8220;</span>asdf&#8221;
   (That is, when the title starts with a quote mark).
   (You may have to change this value depending on your font size). */
.dquo { margin-left: -.5em; }
/* Reduced size type with incremental leading
   (http://www.markboulton.co.uk/journal/comments/incremental_leading/)
   This could be used for side notes. For smaller type, you don't necessarily want to
   follow the 1.5x vertical rhythm -- the line-height is too much.
   Using this class, it reduces your font size and line-height so that for
   every four lines of normal sized type, there is five lines of the sidenote. eg:
   New type size in em's:
     10px (wanted side note size) / 12px (existing base size) = 0.8333 (new type size in ems)
   New line-height value:
     12px x 1.5 = 18px (old line-height)
     18px x 4 = 72px
     72px / 5 = 14.4px (new line height)
     14.4px / 10px = 1.44 (new line height in em's) */
p.incr, .incr p {
  font-size: 10px;
  line-height: 1.44em;
  margin-bottom: 1.5em;
}
.narrate
{
    font-size: 14px;
    line-height: 1.5em;
}

.largenarrate
{
    font-size: 18px;
    line-height: 1.8em;
}

.mediumnarrate
{
    font-size: 16px;
    line-height: 1.6em;
}

.change-ay
{
    font-size: 11px;
    color: #888;
    position: relative;
    top: -2px;
    margin-left: 10px;
}
/* Surround uppercase words and abbreviations with this class.
   Based on work by Jørgen Arnor Gårdsø Lom [http://twistedintellect.com/] */
.caps {
  font-variant: small-caps;
  letter-spacing: 1px;
  text-transform: lowercase;
  font-size:1.2em;
  line-height:1%;
  font-weight:bold;
  padding:0 2px;
}

.readable
{
    line-height:1.5em;
}
/* Misc classes and elements
-------------------------------------------------------------- */

.field-validation-valid
{
    display: none !important;
}
.validation-summary-valid
{
    display: none;
}

/* In case you need to add a gutter above/below an element */
div.prepend-top, .prepend-top {
  margin-top:1.5em;
}
div.append-bottom, .append-bottom {
  margin-bottom:1.5em;
}

/* Use a .box to create a padded box inside a column.  */
.box {
  padding: 1.5em;
  margin-bottom: 1.5em;
  background: #e5eCf9;
}

/* Use this to create a horizontal ruler across a column. */
hr {
  background: #ddd;
  color: #ddd;
  clear: both;
  float: none;
  width: 100%;
  height: 1px;
  margin: 0 0 1.45em;
  border: none;
}

hr.space {
  background: #fff;
  color: #fff;
  visibility: hidden;
}


/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clearfix:after, .container:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  overflow:hidden;
}
.clearfix, .container {display: block;}

/* Regular clearing
   apply to column that should drop below previous ones. */

.clear { clear:both; }













@media all and (orientation:portrait) {

}

@media all and (orientation:landscape) {

}

@media screen and (max-device-width: 480px) {


  /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
}

@media print {
  * { background: transparent !important; color: #444 !important; text-shadow: none !important; }
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a:after { content: " (" attr(href) ")"; }
  abbr:after { content: " (" attr(title) ")"; }
  .ir a:after { content: ""; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}

/*For red Links*/
a.implink {
color:#dd4b39;
font-weight:bold;
}

a.implink:hover
{
    color:red;
}

a.optionlink,
a.optionlink:link,
a.optionlink:visited {
    margin: 0 .25em;
    padding: .14em .3em .25em .4em;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    color: #607890;
    text-decoration: none;
    font-weight: bold;
    -webkit-transition: all .1s linear;
}
a.optionlink:hover,
a.optionlink:active {
    background-color: #FF5C00;
    color:#FFFAFA;
}



/* Header
============================== */

/* header {
  height: 74px;
}
  header .holder {
    position: relative;
    width: 940px;
    margin: 0 auto;
  }

  Logotype

  header h1 a {
    display: block;
    position: absolute;
    top: 3px; left: -22px;
    width: 206px;
    height: 67px;
    margin: 0;
    background: url(../img/ClearTax_Logo_web_206.png) no-repeat 0 0;
    color: #333;
    text-indent: -9999em;
    font-size: .8em;
    z-index: 100;
  }
 */


/* Navigation
------------------------------ */

/* header nav
{
    float: right;
  width: 730px;
  margin-left: 160px;
}
  header nav ul {
    padding-top: 27px;
    text-align: right;
    font-size: 14px;
  }
    header nav ul > li {
      display: inline;
      position: relative;
      list-style: none;
    }
      header nav ul > li > a,
      header nav ul > li > a:link,
      header nav ul > li > a:visited {
        margin: 0 .25em;
        padding: .14em .3em .25em .4em;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        color: #333;
        text-decoration: none;
        font-weight: bold;

        -webkit-transition: all .1s linear;
      }
      header nav ul > li > a:hover,
      header nav ul > li > a:active {
        background-color: #FF5C00;
        color:#FFFAFA;
      }
      header nav ul > li.active > a {
        background-color: #333;
        color: #FFDE00;
        cursor: default;
      }

      header nav .badge-new {
        display: inline-block;
        margin-left: .1em;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        padding: .15em .4em .25em;
        background-color: #E71E17;
        color: #FFF;
        text-transform: uppercase;
        text-shadow: 0 1px 0 rgba(0, 0, 0, .2);
        line-height: 1;
        font-size: .75em;
        vertical-align: .1em;
      }
      header nav a:visited .badge-new {
        background-color: #665E26;
        color: #FFDE00;
      }
      header nav li.active .badge-new {
          background-color: #FFDE00;
          color: #333;
          text-shadow: none;
        } */



/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/*
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay {
    background-color: rgba(0,0,0,.7);
    opacity: 0.9;
    filter: alpha(opacity = 90);
}
#colorbox{outline:0;}
    #cboxTopLeft{width:21px; height:21px; background:url(/css/images/controls.png) no-repeat -101px 0;}
    #cboxTopRight{width:21px; height:21px; background:url(/css/images/controls.png) no-repeat -130px 0;}
    #cboxBottomLeft{width:21px; height:21px; background:url(/css/images/controls.png) no-repeat -101px -29px;}
    #cboxBottomRight{width:21px; height:21px; background:url(/css/images/controls.png) no-repeat -130px -29px;}
    #cboxMiddleLeft{width:21px; background:url(/css/images/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(/css/images/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(/css/images/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(/css/images/border.png) 0 -29px repeat-x;}
    #cboxContent{background:#fff; overflow:visible;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:28px;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
        #cboxLoadingOverlay{background:url(/css/images/loading_background.png) no-repeat center center;}
        #cboxLoadingGraphic{background:url(/css/images/loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }

        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0; background:url(/css/images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url(/css/images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext:hover{background-position:-50px -25px;}
        #cboxClose{position:absolute; top:-7px; right:-7px; border-radius: 0 10px 0 0 !important; background:url(/css/images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose:hover{background-position:-25px -25px;}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

.tac { text-align: center; }
.tar { text-align: right; }
.tal { text-align: left; }


/* register page */

.rg-container { padding-top: 8px; }

.rg-box {
    margin: 40px 0 40px 40px;
}

.rg-img {
    float: left;
    width: 75px;
    margin-right: 25px;
    text-align: center;
}

.rg-info {
    width: 330px;
    float: left;
    color: #bbb;
}

.rg-info h3 {
    margin: 6px 0 3px;
    color: #aaa;
}

 .center-nav
 {
     display: inline-block;
     margin: 10px auto;
     padding-left: 0;
 }

 .secondary-nav
 {
     margin-left: 70px;
 }

 /*Card UI*/

.card {
    border: 1px solid #ddd;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 0 0 6px #ddd;
    -moz-box-shadow: 0 0 6px #ddd;
    -webkit-box-shadow: 0 0 6px #ddd;
    position: relative;
    line-height: 1.5;
    color: #666;
    font-size: 15pt;
    margin: 20px auto;
    overflow: hidden;
    text-align  :left;
}

.card-heading {
    font-family: "Trebuchet MS", Arial, Sans-Serif;
    font-size: 17pt;
    color: #666;
    margin-bottom: 10px;
}
    .card:after {
        content: "";
        position: absolute;
        border: 12px solid transparent;
        border-width: 6px;
        border-top-right-radius: 4px;
        right: 0;
        top: 0;
        z-index: -1;
        transition: border-width 100ms ease-in;
    }

    .card-info:after {
        border-top-color: red;
        border-right-color: red;
    }

.card:hover {
    box-shadow: 0 2px 10px #ddd;
    /*top:;*/
}

.card:hover:after {
    border-width: 12px;
}

.card-inner {
    padding: 16px 22px 18px;
    border-radius: 5px;
}

.card p {
    margin-bottom: 20px;
}
.card p:last-child {
    margin-bottom: 5px;
}

.card-tear {
    position: relative;
    left: -5%;
    background: #777;
    padding: 20px 10%;
    width: 90%;
    color: #eee;
    text-shadow: 0 1px 1px #505050;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.25);
}

    .card-tear-error {
    position: relative;
    left: -5%;
    background: none repeat scroll 0 0 #FBE3E4;
    padding: 20px 10%;
    width: 90%;
    box-shadow: inset 0 0 20px #FBC2C4;
}

.tight-yellow-box
{
    background: #FFFCE6;
    padding: 3px;
    padding-left: 6px;
    padding-bottom: 0;
    margin: 3px;
    margin-bottom: 13px;
    border: 1px solid #FFF5AE;
    opacity: 1;
    transition: all 300ms ease-in-out;
}

.tight-yellow-box.hide
{
    -webkit-transition: all 300ms ease-in-out;
    display: block;
    margin: 0;
    padding: 0;
    height: 0;
    overflow: hidden;
    border: none;
    opacity: 0;
    transition: all 300ms ease-in-out;
}

.tight-yellow-box p:last-child
{
    margin-bottom: 0.5em;
}

.quiet-button {
    display: inline-block;
    background: #eee;
    padding: 3px 6px 4px;
    border-radius: 4px;
    font-size: 8pt;
    text-align: center;
    text-transform: uppercase;
    color: #888;
    font-weight: normal;
    font-family: "Source Sans Pro", sans-serif;
    margin-left: 10px;
    text-decoration: none;
}


.paytax-box-wrap {
  position: relative;
  overflow: hidden;
  padding: 0 20px 20px; }

.paytax-box {
  padding: 1.2em 1.4em;
  margin: 0 0 1.5em;
  border-radius: 5px;
  position: relative;
  border: 1px solid #ccc;
  box-shadow: 0 3px 0 0 #ccc;
  font-size: 12px;
  line-height: 1.6;
  color: #666;
  -webkit-transition: left 250ms ease-out, opacity 350ms ease-in;
  -moz-transition: left 250ms ease-out, opacity 350ms ease-in;
  -ms-transition: left 250ms ease-out, opacity 350ms ease-in;
  transition: left 250ms ease-out, opacity 350ms ease-in;
  left: 0;
  opacity: 1; }
  .paytax-box.box-orange {
    border-right: 5px solid #ff5c00; }
  .paytax-box.box-blue {
    border-right: 5px solid #2daebf; }
  .paytax-box.box-blue {
    border-right: 5px solid #91bd09; }
  .paytax-box.ani.ani-left {
    left: 300px; }
  .paytax-box.ani.ani-opacity {
    opacity: 0; }


.narration-list
{
    margin: 0 6px;
}

.narration-close
{
    width: 35px;
    display: inline-block;
    margin: 2px 6px;
    font-size: 1.5em;
}

.narration-header
{
    font-weight: bold;
    margin: 6px 0;
}

.narration-footer
{
    margin: 6px 0;
}

.narration-item {
    display: flex;
}

/* Fixing HTML5 inputs to look normal */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {-moz-appearance: textfield;}
input:invalid { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
:-moz-submit-invalid { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; }
:-moz-ui-invalid { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; }

/*validation errors*/

.field-validation-error {
    display: block;
    margin-top: -.7em;
    max-width: 289px;
}

/* uncomment below if you want banner only to display on the checkincometaxrefundstatus page */
/* .mobile-download-app-banner { display: none; } */

.mobile-download-app-banner.refund-status-banner { display: block; }

@media (min-width: 641px) {
  .mobile-download-app-banner {
    display: none;
  }

    .referral-promo-text {
        width: 60%;
        margin-right: 0;
        display: inline-block;
        vertical-align: middle;
    }

    .referral-promo-btn {
        width: 35%;
        position: relative;
        display: inline-block;
    }
}
@media (max-width: 640px) {
  .mobile-download-app-banner {
    display: block;
  }
  #upload-from-16-header {
    font-size: 20px;
    margin-top: 20px;
  }
}
@media (width: 320px) {
  .mobile-download-app-banner .action a {
    font-size: 10px;
  }
  .mobile-download-app-banner .rating {
    padding-right: 5px;
    padding-top: 0px;
  }
}

/* misc */
#go-to-tax-return, .left-shadow {
    background: url('/img/left-shadow.png') top left repeat-y;
}


/* paytax summary specific styles*/
    .paytax-summary .down-arrow{
        position: relative;
    }
    .paytax-summary .down-arrow::after{
        content: "\276e";
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        transform: rotate(-90deg);
        position: absolute;
        right: -13px;
    }

    .paytax-summary .collapse-box .collapsible{
        display: none;
    }
    .paytax-summary .collapse-box{
        position: relative;
    }
    .paytax-summary .collapse-trigger::before{
        content: "View ";
    }
    .paytax-summary .collapse-box input[type="checkbox"]{
        display: block;
        width: 100%;
        height: 20px;
        left: 0;
        cursor: pointer;
        top: 0;
        position: absolute;
        outline: 0;
        z-index: 1;
        opacity: 0;
    }
    .paytax-summary .collapse-box input[type="checkbox"]:checked~.collapse-trigger::before{
        content: "Hide ";
    }
    .paytax-summary .collapse-box input[type="checkbox"]:checked~.down-arrow::after{
        transform: rotate(90deg);
    }
    .paytax-summary .collapse-box input[type="checkbox"]:checked~.collapsible{
        display: block;
    }
    .paytax-summary .summary-table{
        width:100%;
    }
    .paytax-summary .summary-table .row{
        overflow: hidden;
        position: relative;
        width: 110%;
        margin-bottom: 15px;
    }
    .paytax-summary .summary-table .row p{
        margin: 0;
    }
    .paytax-summary .summary-table .row small{
        position: absolute;
        right: 0;
        width: 120px;
        color: #AAA;
        top: 0px;
        line-height: 1.4;
        padding-top: 5px;
    }
    .paytax-summary .summary-table .row a{
        margin: 0;
        font-weight: bold;
    }
    .paytax-summary .summary-table .sub-row{
        display: inline-block;
        background: white !important;
        border: thin solid #EAEAEA;
        border-radius: 4px;
        overflow: hidden;
        padding: 10px;
        padding-left: 15px;
        padding-right: 0px;
        position: relative;
    }
    .paytax-summary .sub-row.has-zero::before{
        content: "";
        width: 8px;
        background-color: #FF7777;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }
    .paytax-summary .step{
        padding-left: 40px;
        position: relative;
    }
    .paytax-summary .step::before{
        width: 25px;
        height: 25px;
        content: "";
        border-radius: 50%;
        border: thin solid #AAA;
        position: absolute;
        top: 0;
        left: 0px;
        color: #888;
        font-size: 14px;
        text-align: center;
        background-color: white;
        line-height: 25px;
    }
    .paytax-summary .step-1{
        padding-bottom: 80px;
        line-height: 1.61;
    }
    .paytax-summary .step-1::before{
        content: "1";
    }
    .paytax-summary .step-2::before{
        content: "2";
    }
    .paytax-summary .step-1::after{
        content: "";
        width: 1px;
        height: 100%;
        background: #AAA;
        position: absolute;
        top: 26px;
        left: 13px;
    }
    @media (max-device-width:320px){
        .paytax-summary .summary-table .row a{
            margin: 0;
            font-weight: bold;
            display: block;
            width: 100%;
        }
        .paytax-summary .ml20{
            margin-left: 0;
        }
        .paytax-summary .step{
            padding-left: 0;
        }
        .paytax-summary .step::before,
        .paytax-summary .step::after{
            content: none;
        }

        table.summary-personal-info-table{
            table-layout: auto !important;
        }
        table.summary-personal-info-table td{
            min-width: 150px;
        }
        .paytax-summary .summary-table .row,
        .paytax-summary .summary-table .sub-row span{
            width: 100% !important;
        }
        .paytax-summary .summary-table .sub-row{
            width: 100%;
            box-sizing:border-box;
        }
        .paytax-summary .summary-table .row small{
            padding-top: 10px;
        }
        .paytax-summary .summary-income-info-table td{
            white-space: nowrap;
        }
        .paytax-summary .summary-income-info-table{
            table-layout: auto !important;
        }
        .paytax-summary .summary-income-info-table th{
            white-space: nowrap;
            padding: 5px !important;
        }
        .paytax-summary .summary-table .row small{
            width: 70px;
        }
    }

/*paytax hra calculator*/

    .paytax-salary .popup-overlay{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 101;
    display: none;
    }
    .paytax-salary table tr td{
      background: white;
    }
    .paytax-salary table tr:nth-child(2) td{
      padding: 10px 5px 20px 5px;
    }
    .paytax-salary table tr:nth-child(3) td{
      padding: 10px 9px 20px 5px;
    }
    .paytax-salary .red-text{
        color: red;
    }
    .paytax-salary .green-text{
        color: green;
    }
    small{
        font-size: 12px;
        color: #AAA;
    }
    #hra-popup a {
        text-decoration:none;
    }
    .paytax-salary .popup-content{
        max-width: 600px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform:translate(-50%,-50%);
        -webkit-transform:translate(-50%,-50%);
        -moz-transform:translate(-50%,-50%);
        -ms-transform:translate(-50%,-50%);
        min-height: 100px;
        background-color: white;
    }
    .paytax-salary .popup-close-btn{
        line-height: 30px;
        height: 30px;
        width: 30px;
        cursor: pointer;
        position: absolute;
        top: -15px;
        right: -15px;
        border-radius: 50%;
        color: #777;
        float: right;
        background-color: white;
        box-shadow: 0px 0px 3px rgba(0,0,0,0.75);
    }
    .paytax-salary .close-btn:active{
        margin-top: 0;
    }
    .paytax-salary .boxes{
        overflow: hidden;
    }
    .paytax-salary .questionaire{
        overflow: hidden;
        -webkit-transition:all 0.3s linear;
        -moz-transition:all 0.3s linear;
        -ms-transition:all 0.3s linear;
        transition:all 0.3s linear;
    }
    .paytax-salary .questionaire .question{
        padding: 20px;
        box-sizing:border-box;
        float: left;
        height: 300px;
	width: 600px;
    }
    .paytax-salary .questionaire .awesome{
        padding: 10px 15px;
        border-radius: 0;
    }
    .paytax-salary .result-box{
        height: 250px;
    }

    .paytax-salary .questionaire input[type="radio"]{
        line-height: 15px;
        height: 15px;
    }
    .paytax-salary .has-tooltip{
        position: relative;
    }
    .paytax-salary .has-tooltip span.title{
        color: #06c;
        cursor: pointer;
        display: inline-block;
        line-height: 1.45;
    }
    .paytax-salary .has-tooltip .tooltip{
        opacity: 0;
        width: 100%;
        max-width: 250px;
        background: rgba(255,255,255,0.95);
        display: block;
        right: 0;
        position: absolute;
        padding: 5px;
        z-index: 2;
        line-height: 1.5;
        max-height: 0px;
        overflow: hidden;
        box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
        margin-top: 0;
        border-radius: 5px;
        -webkit-transition:all 0.3s linear;
        -moz-transition:all 0.3s linear;
        -ms-transition:all 0.3s linear;
        transition:all 0.3s linear;
    }
    .paytax-salary .has-tooltip .tooltip[align="left"]{
      left: 0;
      right: auto;
    }
    .paytax-salary .has-tooltip .title:hover ~ .tooltip{
        opacity: 1;
        margin-top: 6px;
        max-height: 999px;

    }
    .paytax-salary .questionaire .error{
      padding: 0;
      background: none;
      border: 0;
      color: red;
      text-align: right;
      position: absolute;
      left: 50%;
      opacity: 0;
      top: 30px;
      transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
      -moz-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      transition:all 0.1s linear;
      -webkit-transition:all 0.1s linear;
      -moz-transition:all 0.1s linear;
      -ms-transition:all 0.1s linear;
    }
    .paytax-salary .questionaire .rent-label .error{
      left: 77.5%;
    }
    .paytax-salary .questionaire .error-state ~.error{
      opacity: 1;
      top: 11px;
    }

    .paytax-salary .back-btn{
        margin-top: -25px;
    }
    .paytax-salary .input-group input,
    .paytax-salary .input-group .has-tooltip{
        display: inline-block;
        max-width: 49%;
    }
    .paytax-salary .input-group{
      position: relative;
    }
    .paytax-salary .input-group .tooltip{
        min-width: 220px;
    }
    @keyframes shakeit {
    0% {
        transform:translatex(-5px);
        -webkit-transform:translatex(-5px);
        -moz-transform:translatex(-5px);
        -ms-transform:translatex(-5px);
    }
    50% {
        transform:translatex(5px);
        -webkit-transform:translatex(5px);
        -moz-transform:translatex(5px);
        -ms-transform:translatex(5px);
    }
    100% {
        transform:translatex(0px);
        -webkit-transform:translatex(0px);
        -moz-transform:translatex(0px);
        -ms-transform:translatex(0px);
    }
    }
    @-moz-keyframes shakeit {
    0% {
        transform:translatex(-5px);
        -webkit-transform:translatex(-5px);
        -moz-transform:translatex(-5px);
        -ms-transform:translatex(-5px);
    }
    50% {
        transform:translatex(5px);
        -webkit-transform:translatex(5px);
        -moz-transform:translatex(5px);
        -ms-transform:translatex(5px);
    }
    100% {
        transform:translatex(0px);
        -webkit-transform:translatex(0px);
        -moz-transform:translatex(0px);
        -ms-transform:translatex(0px);
    }
    }
    @-ms-keyframes shakeit {
    0% {
        transform:translatex(-5px);
        -webkit-transform:translatex(-5px);
        -moz-transform:translatex(-5px);
        -ms-transform:translatex(-5px);
    }
    50% {
        transform:translatex(5px);
        -webkit-transform:translatex(5px);
        -moz-transform:translatex(5px);
        -ms-transform:translatex(5px);
    }
    100% {
        transform:translatex(0px);
        -webkit-transform:translatex(0px);
        -moz-transform:translatex(0px);
        -ms-transform:translatex(0px);
    }
    }

/*Spinner*/
    @keyframes spinit {
    0% {
        transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
    }
    100% {
        transform:rotate(360deg);
        -webkit-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
    }
    }
    @-moz-keyframes spinit {
    0% {
        transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
    }
    100% {
        transform:rotate(360deg);
        -webkit-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
    }
    }
    @-ms-keyframes spinit {
    0% {
        transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
    }
    100% {
        transform:rotate(360deg);
        -webkit-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
    }
    }


    .paytax-salary .error-state {
        animation-name: shakeit;
        animation-duration: 0.1s;
        -webkit-animation-iteration-count: 3;
        animation-iteration-count: 3;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: relative;
        box-shadow: 0px 0px 8px 2px #CCC;
        border: thin solid #CC0000 !important;
    }

    .paytax-salary .spinner{
        height: 25px;
        width: 25px;
        margin: 0px auto 0 auto;
        transition:all 1s linear;
        animation-name: spinit;
        animation-duration: 0.5s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;

    }
    .paytax-salary .spinner span{
        display: block;
        width: 10px;
        height: 10px;
        background: #999;
        border-radius: 50%;
    }
    #hra-adjust-success {
        background: url('https://assets1.cleartax-cdn.com/img/tick-transparent.png');
        background-repeat: no-repeat;
        background-size: 18px;
        background-position: 0 center;
        padding-left: 24px;
        padding: 5px 24px;
        display: none;
    }
    .paytax-salary .hra-city-radio label {
        padding-right: 25px;
    }
    .paytax-salary .unimp {
        color:#AAA;
    }

    @media (max-width: 480px){
        .paytax-salary .popup-content{
            width: 90%;
        }
        .paytax-salary .questionaire .question{
            height: auto;
            max-height: 350px;
            overflow: hidden;
        }
        .paytax-salary .input-group input, .input-group .has-tooltip{
            vertical-align: top;
            margin: 0;
            line-height: 35px;
            height: 35px;
            box-sizing:border-box;
        }
        .paytax-salary .q3 .tooltip{
            left: auto;
            right: 0;
            top: 0;
        }
        .paytax-salary .q5 table{
            margin-top: -30px;
        }
        .paytax-salary .rent-label{
            margin: 0;
            line-height: 35px;
        }
        .paytax-salary .questionaire input,
        .paytax-salary .questionaire select{
            line-height: 35px;
            height: 35px;
        }
        .paytax-salary .result-box{
            height: 300px;
        }
        .paytax-salary .hra-city-radio label{
          display: inline-block;
          width: #333;
          margin: 10px 0;
        }

    }


/*CSS icons*/
.icon-mail{
  margin: 20px auto 30px auto;
  display: block;
  width: 70px;
  height: 50px;
  position: relative;
  background: white;
  border:1px solid #AAAAAA;
  border-radius: 8px;
}
.icon-mail::before{
  content: "";
  border: 1px solid #AAAAAA;
  position: absolute;
  height: 46px;
  width: 46px;
  top: -16px;
  transform: rotate(40deg) skewX(-10deg);
  -webkit-transform: rotate(40deg) skewX(-10deg);
  -moz-transform: rotate(40deg) skewX(-10deg);
  -ms-transform: rotate(40deg) skewX(-10deg);
  left: 11px;
  border-radius: 0 0 10px 0;
  border-top: 0;
  border-left: 0;
}
.icon-text{
  width: 60%;
  margin: 10px auto;
  padding: 20px;
  box-shadow: 0 0 2px rgba(0,0,0,0.3);
  border-radius: 4px;
}
.icon-tick{
  width: 60px;
  height: 60px;
  margin: 20px auto;
  display: block;
  position: relative;
  background-image: url('/img/icon-efiling.png');
  background-position: center center;
  background-size: 100%;
  background-repeat: no-repeat;
}
.pb0{
  padding-bottom: 0 !important;
}
.text-normal{
  font-weight: normal;
}
.btn.btn-lg.btn-referral-promo {
    background-color: white;
    border-radius: 5px;
    padding: 15px;
    color: #0099e5;
    font-weight: 500;
    font-size: 12px;
    text-decoration: none;
}
.icon-list {
    margin: .5em 0;
    padding: 5px;
    vertical-align: middle;
}
.total_output {
    font-weight: bold;
}
a.toggle-narration-btn {
    text-decoration: none !important;
}

/*CSS for Social Media Sharing on Summary and Capital Gains Page*/
.text-share {
    display: block;
    width: 100%;
    height: 75px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    color: #555555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; }
.text-share:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.share-on {
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    color: #596C85;
}
.social-btn:hover {
    opacity: 0.8;
}
.twitter-tag-box {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    box-sizing: border-box;
    border-radius: 20px;
    width: 168px;
    height: 92px;
    float: left;
    margin-right: 30px;
    margin-left: 30px;
    padding-top: 20px;
    cursor: pointer;
}
.twitter-tag-box:hover {
    border: 3px solid #1877F2;
}
.twitter-item {
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
}
.twitter-tag {
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    color: #1877F2;
}