@import url("/OutSystemsUIWeb/Theme.BaseTheme.css?579");


/* ================================================

Primary color customization
For additional color customizations, you can change the color code for the colors below

  ================================================ */
  
:root {
    --color-primary: #8aa400; /*primary-color*/
    --color-primary-hover: #8aa400; /*primary-color*/
    --color-secondary: #8aa400; /*primary-color*/
    
    --color-green-primary: #8AA400 /*primary-button-color*/
}
* {
    margin: 0;
    padding: 0;
    letter-spacing: 1px;
}
html, body {
    line-height: 1.15;
        font-size: 16px;
}
body {
    background-color: #fff;
}
@font-face {
    font-family: 'Nunito';
    src: url('/Theme_UI/Nunito-Regular.ttf');
    font-weight: 400;
    font-style: normal;
}
@font-face {
 font-family: 'Nunito-SemiBold';
  src: url("/Theme_UI/Nunito-SemiBold.ttf");
  font-weight: 600;
  font-style: normal;
}
@font-face {
 font-family: 'Nunito-Bold';
  src: url("/Theme_UI/Nunito-Bold.ttf");
  font-weight: 700;
  font-style: normal;
}
@font-face {
 font-family: 'Nunito-Light';
  src: url("/Theme_UI/Nunito-Light.ttf");
  font-weight: 300;
  font-style: normal;
}
@font-face {
    font-family: 'Nunito-ExtraLight';
    src: url("/Theme_UI/Nunito-ExtraLight.ttf");
    font-weight: normal;
    font-style: normal;
}


/* Theme css */
html, body {
    font-family: 'Nunito', 'Arial';
    color: #666666;
}
h1 {
  font-weight: 300;
  font-size: 34px; }

h2 {
  font-weight: 200;
  font-size: 28px; }

h3 {
  font-size: 20px; }

p {
  font-size: 16px;
  line-height: 21px; }

.bold {
  font-family: 'Nunito-Bold', 'Arial';
  font-weight: 700; }

ul li,
ol li {
  display: inline-block;
  list-style: none; }
/*helping css start*/
.green-text {
    color: #DAFB2E;
    font-size: 18px; 
}


.hide-widget
{
    display:none !important;
}

.theme-container{
    max-width: 90em;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    text-transform: uppercase;
   }
.ThemeGrid_Container {
    max-width: 90em !important;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.account-wrapper {
    color: #fff;
}
 h2 {
    font-weight: 200;
    font-size: 28px;
}
.alignCenterFlex{
    align-items: center;
}
h1, h2, h3 {
    line-height: 1.15;
}
input:focus {
    outline-offset: -2px;
}
:focus {
    outline: -webkit-focus-ring-color auto 1px;
}
button, input, optgroup, select, textarea {
    
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}
.rounded-button {
    cursor: pointer;
}
.flexVCenter{
        display: -webkit-box;
         display: -ms-flexbox;
    display: flex;
     display: flex;
    align-items: baseline;
}
/*helping css end*/

/* header css start */
.register-header {
    background-color: rgb(78, 99, 125);
    color: white;
    padding: 23px;
    font-size: 18px;
}
.layout header.header {
    background-color: #4E637D;
}
.layout-login-form{ background-color: rgba(78, 99, 125, 0.7) !important;
    color: white;
    font-size: 16px;}
.header .Main_Menu .Menu_TopMenu.Menu_TopMenuActive {
    background: #8AA400;
    position: relative;
}
.header .Main_Menu .Menu_TopMenu.Menu_TopMenuActive:after {
    top: 99%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-top-color: #8AA400;
    border-width: 20px;
    margin-left: -20px;
}
.header .Main_Menu .Menu_TopMenu:hover a::after {
    content: '';
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -4px;
    border-width: 0 0 2px;
    border-style: solid;
}
.Menu_TopMenu > div a, .Menu_TopMenu > div a:visited {
    color: #fff;
}
.header .account-wrapper .Menu_TopMenu:hover, .header .account-wrapper .Menu_TopMenu {
    border-bottom: 0;
}
.header .account-wrapper .Menu_DropDownArrow {
    border-top-color: #fff !important;
}
.header .account-wrapper .Menu_TopMenu:hover > div .Menu_DropDownArrow:before, .header .account-wrapper .Menu_TopMenu:hover > div .Menu_DropDownArrow:after {
    background-color: #fff;
}
.layout-top .header .ThemeGrid_Container {
    max-width: 90em;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding-left: 0;
    padding-right: 0;
    padding: 0 0 !important;
}
.layout-top .header .ThemeGrid_Container {
    position: relative;
    width: auto;
}
.header .application-name {
    height: 70px;
    padding: 23px 20px;
    cursor: pointer;
}
.header .header-top {
    height: auto;
}
/* Display */
.phone .display-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    
}
.header .header-center {
    padding: 0 0;
}
.header .Main_Menu .Menu_TopMenu {
    padding: 23px 20px;
    border-top: 0;
    transition: none;
    border-bottom: 0 !important;
}
.header .Menu_TopMenu > div > a {
     font-family: 'Nunito-Light';
    font-size: 22px;
    letter-spacing: 0.7px;
    color: white;
        font-weight: 300 !important;
        position: relative;
}
.header .Menu_DropDownButton:not(:first-child){
    margin-left: 0;
}
.Menu_TopMenuActive > div a , .Menu_TopMenuActive > div a:visited{
    color:#fff;
}
.Menu_TopMenuActive > div a:hover, .Menu_TopMenu:hover.Menu_TopMenuActive > div a {
    color: #DAFB2E;
}
.current-page, .account-wrapper, .mobile-footer {
    font-family: 'Nunito-Light';
    font-size: 18px;
    letter-spacing: 0.7px;
    color: white;
    padding-right: 25px;
    font-weight: 300;
}
.account-wrapper div {
    font-weight: 300;
}
.account-wrapper {
    position: absolute;
    right: 0px;
    padding: 20px 0px;
    height: 70px;
    cursor: pointer;
    text-align: right;
    float: right;top: 0;
}
.account-wrapper:hover {
    color: #DAFB2E;
}

/*UserInfo popup*/

.account-wrapper .Menu_DropDownButton.open .Menu_TopMenu {
    z-index: unset;
}

.account-wrapper .Menu_DropDownArrow {
    z-index: 1;
}

.account-wrapper .Menu_DropDownPanel {
    padding: 0px !important;
    top: 5px;
    width: 100%;
    box-shadow: 0px 1px 0.1px rgba(0, 0, 0, 0.5);
    background-color: white;
    border-radius: 31px;
    z-index: 0;
    height: 150px;
    background-clip: unset;
    left: 2px;
}

.account-wrapper .Menu_DropDownButton.open .greeting {
    color: #4E637D;
    position: relative;
    z-index: 1;
}
.account-wrapper .Menu_SubItemsPlaceholder {
    top: 50px;
    left: 12px;
    position: relative;
    width: 90%;
}

.account-wrapper .Menu_DropDownButton.open .Menu_TopMenu>div::after {
    z-index: 10;
    content: '';
    position: absolute;
    left: 22px;
    bottom: 10px;
    border-width: 0 0 2px;
    border-style: solid;
    color: #4E637D;
}
.account-wrapper .Menu_DropDownButton.open .Menu_TopMenu>div::after {
    left: 0;
    width: 100%;
}
.header .account-wrapper .Menu_DropDownPanel a::after {
    color: #4E637D;
    content: '';
    display: block;
    border-bottom: 1px solid;
    position: relative;
    z-index: 0;
    top: 2px;
    height: 1px;
}
.header .account-wrapper .Menu_DropDownPanel a {
    text-align: right;
    padding: 0;
    font-size: 18px;
    font-family: 'Nunito-Light';
    letter-spacing: 0.7px;
    color: #4E637D;
    text-decoration: none;
}
.header .account-wrapper .Menu_DropDownPanel a:hover{
    color: #8AA400;
}
.header .account-wrapper .Menu_DropDownPanel .Menu_SubItemsPlaceholder>div>div {
    padding: 10px;
}
.header .greeting{
display: block;
}
.account-wrapper .Menu_DropDownButton.open .clientIdDisp {
    color: #fff;
}
.account-wrapper .Menu_DropDownButton.open .Menu_TopMenu>div {
    position: relative;
}
.account-wrapper .Menu_DropDownArrow:before {
    background-color: #ffffff;
}
.account-wrapper .Menu_DropDownArrow:after {
    background-color: #ffffff;
}
.header .account-wrapper .Menu_TopMenu:hover > div .Menu_DropDownArrow:before, .header .account-wrapper .Menu_TopMenu:hover > div .Menu_DropDownArrow:after {
    background-color: #ffffff;
}
.account-wrapper .Menu_DropDownButton.open .Menu_DropDownArrow:before , .account-wrapper .Menu_DropDownButton.open .Menu_DropDownArrow:after {
    background-color: #4e637d;
}
.header .account-wrapper .Menu_DropDownArrow {
/*
    right: -3px;
    top: -10px;
*/
    right: 3px;
    bottom: 10px;
}
.header .account-wrapper .Menu_DropDownButton.open .Menu_TopMenu:hover > div .Menu_DropDownArrow:before, .header .account-wrapper .Menu_DropDownButton.open .Menu_TopMenu:hover > div .Menu_DropDownArrow:after {
    background-color: #4e637d;
}
a,a:hover,a:visited
{color:#4E637D}
.Application_Menu.Main_Menu .Menu_TopMenu:hover > div .fa, .Application_Menu.Main_Menu .Menu_TopMenu:hover > div a, .Application_Menu.Main_Menu .Menu_TopMenu:hover > div a:visited {
    color: #DAFB2E;
}
/* Header css end */

/* Button css start */
.button, .task-list .task .submit-button, .task-list .task .dismiss-button {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none;
    min-width: 160px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
}
.blue-with-white-button {
    background-color: #4E637D;
    border: 2px solid white;
    color: white;
}
.rounded-button {
    border-radius: 999px;
}
.small-button {
    padding: 10px 25px;
    font-size: 18px;
    font-weight: 200;
    width: 170px;
}
.smaller-button {
  padding: 10px 25px;
  font-size: 14px;
  font-weight: 200;
  width: 90px; }

.rounded-button {
  border-radius: 999px; }

.green-button {
  background-color: var(--color-green-primary);
  border: 2px solid var(--color-green-primary);
  color: white; }

.blue-button {
  background-color: #4E637D;
  border: 2px solid #4E637D;
  color: white; }

.borderless-blue-button {
  background-color: #4E637D;
  color: white; }

.borderless-gray-button {
  background-color: rgba(78, 99, 125, 0.4);
  color: white; }

.button.time-button, .task-list .task .time-button.submit-button, .task-list .task .time-button.dismiss-button {
  width: 130px; }

.wide-button {
  width: 100%; }

.disabled {
  opacity: 0.6; }
  .gray-with-blue-button {
    background-color: #F0EFEF;
    border: 2px solid #4E637D;
    color: #4E637D;
}

.ellipsisOverflow {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* button css end */

/* label css start */
.input-label {
  padding: 7px 28px; }
/* label css end */
/* input css start */
input {
  color: #666666; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0; }
input[type='number'] {
  -moz-appearance: textfield; }
  .big-input input {
    font-size: 30px;
    height: 42px;
    width: 100%; }
  .big-input button {
    font-size: 28px;
    color: #666666;
    padding: 0;
    border-radius: 0;
    height: 42px;
    width: 42px; }
.round-input {
  border-radius: 999px; }
select {
  background: url("/Theme_UI/img/dropdown_triangle.png?2268&694") no-repeat;
  background-position: right 15px bottom 19px;
  margin: 0;
  width: 100%;
  cursor: pointer;
  color: #4E637D;
  background-color: white;
  font-size: 18px;
  padding: 14px 28px;
  overflow: hidden;
  border-radius: 999px;
  border: 2px solid #4E637D;
  -webkit-appearance: none;
  -moz-appearance: none; 
  }
input[type="text"] , input[type="email"] {
    border-radius: 999px;
    border: 2px solid #4E637D;
    color: #4E637D;
    font-size: 18px;
    padding: 15px 28px;
}
.round-dropdown-wrapper select::-ms-expand {
  /* hide the default arrow in ie10 and ie11 */
  display: none; }
.rounded-dropdown2 {
  background-color: white;
  font-size: 18px;
  padding: 14px 28px 13px;
  overflow: hidden;
  width: 100%;
  border-radius: 999px;
  border: 2px solid #4E637D; }
.small-input {
  border-radius: 999px;
  border: 2px solid #4E637D;
  color: #4E637D;
  font-size: 16px;
  padding: 16px 24px; }
.medium-input {
  border-radius: 999px;
  border: 2px solid #4E637D;
  color: #4E637D;
  font-size: 18px;
  padding: 15px 28px; }
.input-label {
      display: flex;
    flex-direction: row;
    padding: 7px 28px;
  }
  
 /* input css start */   

.centered-element {
    display: block;
    margin: auto;
    width: 94px;
}
.heavy-bottom-divider {
    border-bottom: 2px solid white;
}
.top-padded-submit {
    margin-top: 30px;
}
.medium-button {
    padding: 10px 50px;
    font-size: 22px;
    font-weight: 400;
}
.submit-wrapper {
    text-align: center;
}
/*footer css start*/
.footer{
    position: relative;
    color: #4E637D;
    z-index: 9;
}

.footerLogin {
    position: fixed;
    bottom: 0;
    width: 100%;
    color: #4E637D;
    z-index: 9;
}

.footer .contact-bar {
    color: white;
    padding: 10px 25px;
}

.center-flex {
    display: flex;
    align-items: center;
}

.backgroundBlue {
    background-color: #4E637D;
}

.footer .footer-info {
    font-size: 13px;
    background-color: white;
    padding: 10px 25px 10px;
    text-align: center;
}
.footer .green-text {
    width: 45.72881%;
    float: left;
    margin-right: 1.69492%;
    text-align: center;
    display: block;
}

.footer-info div * {
    text-align: center;
}
.footer-info .copyright {
    margin-bottom: 7px;
}
.footer-info div .links a {
    padding: 0px 10px;
}
.footer-info a {
    text-decoration: none;
    color: #4E637D;
    padding: 0 10px;
}
.footer-info a:hover {
    text-decoration: underline;
}
.footer .question-mark-button-wrapper {
    width: 15.25424%;
    float: left;
    margin-right: 1.69492%;
}
.footer .green-text {
    width: 23.72881%;
    float: left;
    margin-right: 1.69492%;
    text-align: right;
    display: block;
}
.footer .phone-number {
    width: 23.72881%;
    float: right;
    margin-right: 0;
    display: block;
    font-size: 16px;
    text-align: center;
}
.registration-section {
    padding: 32px 0;
}
.question-mark-button {
/*  width: 100%;*/
    float: left;
    margin-left: 0;
    margin-right: 0;
    padding-left: 46px;
}
/* .question-mark { */
    /* position: absolute; */
    /* border-radius: 50%; */
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
    /* height: 46px; */
    /* width: 44px; */
    /* background-color: white; */
    /* color: #4E637D; */
    /* font-size: 20pt; */
    /* float: left; */
    /* z-index: 1; */
/* } */
 .question-mark {    
    position: absolute;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    width: 48px;
    background-color: white;
    color: #4E637D;
    font-size: 20pt;
    float: left;
    top: -1px;
    left: -1px;
 }
.faqButton{
    border: 2px solid white;
    border-radius: 30px;
    height: 50px;
    min-width: 250px;
    position: relative;
}

.layout-top .content .footer.ThemeGrid_Container {
    margin: 0;
    padding: 0;
    max-width: 100%;
}
/*footer css end*/
/* my account page css start */
.top-update-button:disabled {
    background-color: darkgray;
    border: darkgray;
}
.my-account .section {
    padding: 35px 0;
    border-bottom: 2px solid #4E637D;
}
.my-account .section {
    padding: 35px 0;
    border-bottom: 2px solid #4E637D;
}
 .my-account .section:last-child {
      border-bottom: none; }
.my-account .question-and-answer.sub-section {
    padding: 20px;
    margin: 40px 0px;
    border: 2px solid #F0EFEF;
    border-radius: 10px;
    background-color: #F0EFEF;
}
.my-accountTitle{
    padding: 35px 0;
    border-bottom: 2px solid #4E637D;
}
/* my account page css end */

/* terms page css  */
.terms-of-use {
   padding-right: 20px;
  padding-bottom: 275px;
  background-color: #e9ebee;
  font-family: 'Nunito-Light';
  word-wrap: break-word; }
  .terms-of-use section {
    padding-bottom: 30px; }
  .terms-of-use p {
    padding-top: 15px; }
  .terms-of-use .tossubsection {
    font-weight: bold;
    padding-bottom: 20px;
    margin-bottom: 10px;
    font-size: 20px; }
  .terms-of-use .tossubheading {
    font-style: italic;
    margin-top: 10px; }
  .terms-of-use div.subsubsection {
    padding-top: 15px;
    padding-bottom: 5px; }
  .terms-of-use section:after {
    color: #4E637D;
    content: '';
    display: block;
    border-bottom: 1px solid;
    position: relative;
    z-index: 0;
    top: 10px; }
  .terms-of-use ol {
    margin-left: 5%;
    margin-top: 10px; }
    .terms-of-use ol li {
      padding-bottom: 12px;
      display: list-item;
      list-style-type: inherit; }
  .terms-of-use ul {
    margin-left: 5%;
    margin-top: 10px; }
    .terms-of-use ul li {
      padding-bottom: 12px;
      display: list-item;
      list-style: none; }
  .terms-of-use .type-label {
    font-family: Nunito-Bold;
    margin-top: 10px; }
/* terms page css  */
/*faq page css start  */

.faq-list {
    padding-right: 20px;
  padding-bottom: 275px;
  background: #e9ebee;
  font-family: Nunito-Light; }
  .faq-list section {
    padding-bottom: 30px; }
  .faq-list .question {
    padding-bottom: 10px; }
  .faq-list section:after {
    color: #4E637D;
    content: '';
    display: block;
    border-bottom: 1px solid;
    position: relative;
    z-index: 0;
    top: 10px; }
  .faq-list li {
    padding-bottom: 12px; }

/*faq page css start  */

/* document page start */
.documents-table {
  padding-bottom: 86px; }
  .documents-table:after {
    content: " ";
    display: block;
    clear: both; }

.document-summary-headings {
  border-bottom: 1px solid #4E637D; }

.document-summary-large {
  border-bottom: 1px solid rgba(78, 99, 125, 0.5); }

.document-summary-large,
.document-summary-headings {
  font-size: 16px;
  font-family: Nunito-Light;
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
  padding: 10px;
  position: relative; }
  .document-summary-large .icon-file,
  .document-summary-headings .icon-file {
    position: absolute;
    left: 10px;
    top: 25%;
    font-size: 30px; }
  .document-summary-large .document-file-name,
  .document-summary-headings .document-file-name {
    font-family: 'Nunito-ExtraLightItalic';
    font-size: 12px; }
  .document-summary-large .document-name,
  .document-summary-headings .document-name {
    width: 40.67797%;
    float: left;
    margin-right: 1.69492%;
    padding-left: 5%; }
  .document-summary-large .document-date-added,
  .document-summary-headings .document-date-added {
    width: 15.25424%;
    float: left;
    margin-right: 1.69492%; }
  .document-summary-large .document-added-by,
  .document-summary-headings .document-added-by {
    width: 23.72881%;
    float: left;
    margin-right: 1.69492%; }
  .document-summary-large .button, .document-summary-large .task-list .task .submit-button, .task-list .task .document-summary-large .submit-button, .document-summary-large .task-list .task .dismiss-button, .task-list .task .document-summary-large .dismiss-button,
  .document-summary-headings .button,
  .document-summary-headings .task-list .task .submit-button, .task-list .task
  .document-summary-headings .submit-button,
  .document-summary-headings .task-list .task .dismiss-button, .task-list .task
  .document-summary-headings .dismiss-button {
    float: right; }
h2.pageHeading {
    font-size: 40px;
    margin: 0 0 1em;
    padding: 1em 0 0;
}

.button.right-margin, .task-list .task .right-margin.submit-button, .task-list .task .right-margin.dismiss-button {
  margin-right: 10px; }

.document-title {
  font-family: 'Nunito-Bold';
  font-size: 16px; }

.document-summary-small {
  padding: 10px;
  font-family: 'Nunito-Light';
  border-bottom: 1px solid black; }
/* document page css end */

/*media css start from here*/
@media (max-width: 767px) and (min-width: 1px){
    .footer .green-text ,  .footer .phone-number {
        text-align: center;
    }
    .footer .contact-bar {
         flex-direction: column;
         padding: 3.5em 50px 0;
    }
    .footer .question-mark-button-wrapper {
        width: 100%;
        float: left;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 10px;
    }
    .footer .phone-number {
        width: 100%;
        float: left;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 10px;
        text-align: center;
    }
}
@media (max-width: 768px) and (min-width: 1px){
    .footer .green-text {
        width: 100%;
        margin-right: 0;
        font-size: 22px;
        font-family: 'Nunito-SemiBold';
        text-align: center;
        position: absolute;
        top: 15px;
        left: 0px;
    }
    .footer .contact-bar {
    padding-top: 3.5em;
    }
}
@media (min-width: 768px){
    .footer .question-mark-button-wrapper {
        width: 23.72881%;
        float: left;
        margin-right: 1.69492%;
    }
    .footer .phone-number {
        text-align: center;
    }
    .registration-section {
        margin: 0 56px;
}
}
@media (min-width: 1000px){
    .theme-container {
        margin: 0 auto;
    }
}
@media (max-width: 90em){
    .theme-container {
        margin: auto 1em;
    }
}

/*media css end*/

/* Styles for link */

.faq-list a:link, .terms-of-use a:link {
  color: blue;
  text-decoration: underline;
}

/* visited link */
.faq-list a:visited {
  color: blue;
}

/* mouse over link */
.faq-list a:hover {
  color: blue;
}

/* selected link */
.faq-list a:active {
  color: blue;
}

.header .Main_Menu .Menu_TopMenu.Menu_TopMenuActive {

padding-left: 23px;
padding-right: 23px;
}

.header .Main_Menu .Menu_TopMenu {
padding: 23px 23px;
cursor: unset;

}
.Menu_DropDownButton {
padding-left: 18px;
/* padding-right: 23px; */
}
.Menu_TopMenu{cursor:unset!important}

.video .TableRecords td{vertical-align:top; padding-left: 0;}

.circle img {
    border: 2px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.milemarker-image img {
    background-size: contain;
    display: inline-block;
    width: 150px;
    height: 150px;
}
div.os-internal-Popup .os-internal-ui-dialog.os-internal-ui-draggable .os-internal-ui-dialog-titlebar.os-internal-header-space,
div.os-internal-Popup.os-internal-ui-dialog.os-internal-ui-draggable .os-internal-ui-dialog-titlebar.os-internal-header-space {
    height:0px !important;
    background-color: transparent;
    cursor: default;
}

/* Style for hover logo */
.logo-wrapper:hover svg #gp-logo-large {
c: green;
fill: #DAFB2E;
cursor: pointer;
}
h2.mb0 {
    margin-bottom: 0px;
}
div.Feedback_Message_Wrapper {
    position: fixed;
    top: -200px;
    text-align: center;
    width: 100%;
    font-size: 16px;
    margin-bottom: 25px;
    margin-top: 60px;
    _position: absolute; / IE6 /
    _top: expression( (document.documentElement.scrollTop - 2) + 'px' ); / IE6 /
    z-index: 10000;
}
div.Feedback_Message_Error,
div.Feedback_Message_Warning,
div.Feedback_Message_Success,
div.Feedback_Message_Info {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    border-radius: var(--border-radius-soft);
    border: var(--border-size-none);
    box-shadow: var(--shadow-none);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-size: var(--font-size-h6);
    margin-left: var(--space-none);
    padding: var(--space-base);
    position: relative;
    max-width: 500%;
    min-width: 100%;
}

div.Feedback_Message_Success {
background-color:#8AA400;
}
/*----style for pin input------------*/
 .pin-wrapper {
display: flex;
flex-direction: row;
align-items: center;
}
    
.pin-container input[type='password'],.pin-wrapper input[type='password'] {
    width: 56px;
    height: 56px;
    font-size: 30px;
    margin: 0 4px;
    border-radius:0px;
    text-align: center;
}

.ForgotPassword h1{margin: 0;
    font-size: 45px;}
   
.border-top{ border-top: 2px solid white;}
 .border-bottom{  border-bottom: 2px solid white;}
 .requiredfiled{
         color: #e03131;}
         
.ResetPassword .submit-wrapper {
     margin-top: 32px;
}

.input-validation-error {
    border-color: #e03131!important;
}

.background-white {
    background: #fff;
}



/*------Style for Dashboard -----------*/

.Dashboard .dashboard-heading {
    text-align: center;
    padding-top: 5em;
}

.Dashboard .dashboard-heading h2 {
    font-family: 'Nunito-ExtraLight';
    text-align: center;
    margin-bottom: 40px;
    font-weight: 200;
    color: #4e637d;
    font-size: 50px;
}

.Dashboard .container {
    margin: auto 1em;
    max-width: 90em;
    position: relative;
}

.Dashboard .container:after {
    content: " ";
    display: block;
    clear: both;
}

.Dashboard .progress-overview-desktop {
    background-color: rgba(255, 255, 255, 0.75);
    border-radius: 90px;
    padding: 45px 70px;
    color: #4E637D;
    text-align: center;
}

.tablet .Dashboard .progress-overview-desktop {
    padding: 45px 10px;
}


.Dashboard .desktop-completion-bar .progress-bar-base {
    position: relative;
    color: white;
    background-color: #4E637D;
    border-radius: 999em;
    height: 40px;
}

.desktop-completion-bar .progress {
    background-color: rgba(78, 99, 125, 0.5);
}

.Dashboard .progress-descriptions-wrapper {
    flex-direction: row;
    align-items: center;
    margin-top: 15px;
}

.Dashboard .progress-descriptions-wrapper .description {
    flex-grow: 1;
    border-left: 2px solid #4E637D;
    height: 100%;
    padding: 10px 0;
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
}

.Dashboard .months.description {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    border-left: none;
}

.circle {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.month-count-circle {
    width: 88px;
    height: 88px;
    border: 3px solid #4E637D;
    margin-right: 12px;
    font-size: 40px;
}

.text-with-subtext {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.payOffDateInfoCntr {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-left: 2px solid #4E637D;
    width: 100%;
    padding: 20px;
    font-size: 28px;
    justify-content: center;
}

.text-with-subtext .large-text {
    font-size: 28px;
}

.text-with-subtext .small-text {
    font-size: 16px;
}

.progress-overview-desktop .disclaimer {
    padding-top: 16px;
}

.my-progress-bar .progress {
    background-color: rgba(78, 99, 125, 0.5);
}

.my-progress-bar .progress .border-radius-rounded {
    height: 34px;
    background-color: #4E637D;
 /*   min-width: 120px; */
}

.my-progress-bar {
    position: relative;
}

.my-progress-bar .progress-content {
    position: absolute;
    width: 100%;
    color: white;
}

.my-progress-bar .progress-container.flex-direction-row .progress-title {
    position: relative;
    left: 25px;
}

.my-progress-bar .progress-container .progress-value {
    position: relative;
    right: 25px;
}

.my-progress-bar .progress-container.flex-direction-row .progress-title {
    display: unset;
}

.my-progress-bar .progress-container.flex-direction-row .progress {
    margin-right: 0px;
}

.pb_34 {
    padding-bottom: 34px;
}
    /*------Style for Dashboard section circle -----------*/
.motivational-message {
    margin-top: -25px;
    background-color: rgba(78, 99, 125, 0.7);
    width: 108%;
    font-style: italic;
    font-size: 28px;
    letter-spacing: 0px;
    color: white;
    text-align: center;
    padding: 30px;
    margin-left: -40px;
}
.imagecontainer {
       float: left;
    margin-right: 0;
    height: 100%;
    position: relative;
    text-align: center;
    border-radius: 999px;
    cursor: pointer;
    color: white;
    overflow: hidden;
    margin: 20px;
    margin-top: 0;
    margin-bottom: 0;
}

.imagetopheader {
    position: absolute;
    left: 0;
    top: 20%;
    width: 100%;
    display: block;
    background: #4E637D;
    color: white;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 15px;
    letter-spacing: 1px;
    font-weight: 700;
    padding: 5px;text-align: center
}
 /*.circlecontainer {
    text-align: center;
    padding-left: 90px;
    overflow: hidden;
    margin-top: 80px;
    padding-bottom: 4em;
}*/
.circlecontainer {
    margin: auto;
    text-align: center;
    
    overflow: hidden;
    margin-top: 80px;
    
    width: 80%;
    
    position: relative;
}
.imagecontainer img {
    width: 317px;
}
.imgcontent:hover {
    box-shadow: inset 1px 398px rgba(255, 255, 255, 0.61);
    
}
    
.statuscontainer {
    display: inline-block;
    color: white;
    position: absolute;
    font-size: 18px;
    left: 0%;
    top: 33%;
    width: 100%;
    min-height: 19px;
    text-align: center;
}

.selector-count {
    position: absolute;
    left: 0;
    top: 34%;
    width: 100%;
    margin: 0;
    text-align: center;
    font-weight: 200;
    letter-spacing: 0px;
    font-size: 120px;
}
.change-expression
{
   top: 40%;
   font-size: 96px;
}

.image-warning .imagetopheader {
    background: #ff9900;
}

.image-warning .statuscontainer {
    color: #ff9900;
}
.image-warning:hover {
    box-shadow: inset 1px 398px #ff99006e;
}
.imgselected:hover {
    box-shadow: none;
}
.imgselected .imagetopheader
{
    top: 18%;
}
.imgselected .statuscontainer
{
  top: 29%;   
}
.imgselected .selector-count
{
  top: 30%;   
}
.imgcontent:hover .statuscontainer {
    color: #4e637d;
}
.attention {
    color:#ff9900
}

/*-- Dashboard Tablet -----*/
.tablet .circlecontainer {
    width: 100%;
}




/*------Style for Dashboard section end -----------*/

/*---------------Style for Creditor Section -------------------*/

.myCreditorsDiv {
    background-color: #f1f1f1; 
    color:v;
}

.myCreditorsDiv .heading2 {
    color:#8AA400;
    padding: 25px;
}

.myCreditorsDiv .IfEmptyRecordPadding { 
    padding-left: 32px;
    padding-Top: 15px;
    padding-bottom: 30px;
}

.myCreditorsDiv .proposal-status-badge {
    background-color: rgba(78, 99, 125, 0.65);
    color: white;
    border: 2px solid;
    border-radius: 999em;
    padding: 25px;
    text-align: center;
}

.myCreditorsDiv .proposal-status-badge span.big {
    font-size: 28px;
}

.myCreditorsDiv .accordion-item .accordion-item-header {
    padding: 15px;
}

.myCreditorsDiv .account-activity-title {
    font-size: 25px;
    padding-left: 15px;
    font-weight: bold;
    flex-grow: 1;
}

.myCreditorsDiv .account-activity-time-frame-buttons {
    position: relative;
    border: none;
    padding: 0;
    flex-grow: 5;
}

.myCreditorsDiv .creditor-payment-overview {
    padding: 15px;
    background: #8AA400;
    color: white;
    font-size: 18px;
}

.myCreditorsDiv .accordion-item .accordion-item-content.is--expanded {
    padding: 0px;
}


.myCreditorsDiv .notification-message {
    width: 100%;
    float: left;
    margin-left: 0;
    margin-right: 0;
    float: none;
    padding: 2em;
    text-align: center;
    font-weight: bold;
}

.myCreditorsDiv .creditor-payment-overview .large-text {
    font-size: 28px;
}

.myCreditorsDiv .time-frame-button {
    cursor: pointer;
    padding: 0px 16px;
    border-right: 1px solid #4E637D;
}

.myCreditorsDiv .time-frame-button.date-range-input {
    padding-right: 0;
    border-right: none;
}

.myCreditorsDiv .accordion-item .accordion-item-icon {
    position: relative;
    top: 22px;
    right: -6px;
    margin-left: 10px;
}

.accordion-item .accordion-item-icon .fa {
    font-size: 50px;
   /* width: auto; */
}

.myCreditorsDiv .IconCntr{
    background-color: #9fbe00;
    text-align: center;
    padding: 10px;
    border-radius: 20px;
}

.myCreditorsDiv .dmpPendingCntr{
    background-color: #A1B823;
    text-align: center;
    padding: 40px;
}


.myCreditorsDiv .pendingMsg {
    color: white;
    font-size: 24px;
    text-align: center;
    margin-top: 10px;
}

.myCreditorsDiv .pendingMsg .smallText {
    font-size: 15px;
}

.myCreditorsDiv .creditorLabel {
    padding: 25px 0px 0px 1px !important;
}

.dateRangeCntr .date-range-header {
    text-align: center;
    font-weight: 200;
    font-size: 28px;
    padding: 25px;
}

.dateRangeCntr .btnCntr {
    position: absolute;
    bottom: 20px;
    text-align: center;
    width: 100%;
}
#wtDashboard .padding-s{padding:0px}
 
#wtDashboard .layout-top .content .ThemeGrid_Container {
    padding-right: 0;
    padding-left: 0;
}
.Dashboard .tabs .tabs-content {
    padding-bottom: 0;
}
.myCreditorsDiv .pendingMsg {
    color: #8aa400;
   
}
.myCreditorsDiv .dmpPendingCntr {
    background-color: #f1f1f1;
     
}
 
.Dashboard .tabs-header-item {
    border-radius: 10px 10px 0 0;
    background: #f1f1f1;
    box-shadow: inset 0px 12px 15px #dad9d9;
    font-size: 22px;
}
.Dashboard .tabs-header-item:hover {
    border-bottom: 0px solid #8aa400;
    font-weight: bold;
    font-size: 22px;
}

.phone .Dashboard .tabs-header-item:hover {
   font-size: 13px;
}

.Dashboard .tabs-header-item.active {
    background-color: #fff;
    color: #8aa400 !important;
    box-shadow: none;
    border-top: 1px solid #ccc;
    border-bottom: 0;
}
#wtDashboard .tabSection {
     
    margin: 5px;
    background: #f1f1f1;
}
.Dashboard .tabs-header-item {
    border: 1px solid #ccc;
    border-bottom: 0;
}
/* .Dashboard .tabs-content-item.active { */
    /* border: 1px solid #ccc; */
     /* background: #fff; */
/* } */
   
.Dashboard .tabs .tabs-header {
    background-color: #fff;
}

.CntCommSection .tabs{margin: 5px}
.blue-button:hover{filter: brightness(.9);}
.Dashboard .tabs-header-item {  margin-bottom: -1px;}
.myCreditorsDiv {
    background-color: #fff;}
    .myCreditorsDiv .dmpPendingCntr {
    background-color: #fff;
}
.milemarker {
    background-color: #fff;
}
.circle img { border: 2px solid #ccc;}
/*--------style of My Creditor Section ends-----------------*/
  
.desktop .video video{width: 220px;height:140px}
.padTop-bottom {
   padding-top: 10px;
    padding-bottom: 10px;
    margin: 0 56px;
}
.marLR{margin-left: 56px;margin-right: 56px}
.gray-with-blue-button:hover{filter: brightness(.9);}
.padTB {
   padding-top: 10px;
    padding-bottom: 10px;
   
}
.btnpad{
padding: 10px 24px 10px 20px;}

.adminPopUp{
height:150px;
width: 120px;
}

/*Style for floating menu start */

.fixed-action-btn {
    position: fixed;
    right: 23px;
    bottom: 23px;
    padding-top: 15px;
    margin-bottom: 0;
    z-index: 998;
    padding: 0 0 0 15px;
}

.footer-info ul li a {
    color: #fff;
    padding-top: 4px;
    margin-left: 5px;
}

.footer-info ul li a .material-icons {
    font-size: 16px!important;
}

.btn-floating.btn-large {
    padding-left: 0;
}
/*---- floatint menu end -----*/

/*----style for Activity Tracker start------------*/

.ActivityTrackerDiv { 
color:#4E637D;
background-color: #fff;
}

.ActivityTrackerDiv .filter div select{
    border: 0;
    border-bottom: 1px solid #8aa400;
    border-radius: 0;
    height: 30px;}
    .ActivityTrackerDiv .filter div select[disabled] {
    border-bottom: 1px solid #a9a6a6;
    color: #a9a6a6;
}

.ActivityTrackerDiv .heading2 {color:#8AA400;
padding-top: 30px; padding-bottom: 30px; padding-left: 30px;
}
 .ActivityTrackerDiv .message {
    font-weight: 200;
    letter-spacing: 1px;
}

.ActivityTrackerDiv .activityTitle {
    font-size: 24px;
    font-weight: 300;
    display: block;
}
.ActivityTrackerDiv .details {
    display: block;
    padding-top: 10px
}

.ActivityTrackerDiv .circle {
    border: 2px solid #4E637D;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
}

.ActivityTrackerDiv .filter  div select {
    -moz-appearance: none;
    -webkit-appearance: none;
    
    color: #4E637D;
        background: url(/Theme_UI/img/dropdown_triangle.png?2268&694) no-repeat;
    background-position: right 0 bottom 16px;
    padding-right: 15px;
    padding-left: 14px;
    cursor: pointer;
    
}
.ActivityTrackerDiv .filter div select[disabled="disabled"]{
  background: url(/Theme_UI/img/dropdown_triangledb.png?2268&694) no-repeat;
  background-position: right 0 bottom 16px;
}
.ActivityTrackerDiv .filter div select option {
    color: #4E637D;
    background: white;
}

.ActivityTrackerDiv .border-bottom { 
border-bottom:1px solid #4E637D;}

.ActivityTrackerDiv .activity { padding: 32px 0px;}

.ActivityTrackerDiv .activityPadding 
{ padding-left: 32px;}

.ActivityTrackerDiv yearDiv {
    width: 14%;
}

.phone .ActivityTrackerDiv .monthDiv {
    width: 45%;
    margin-right: 10px;
}

.tablet .monthDiv {
    width: 25%;
}

.tablet .yearDiv {
    width: 14%;
    margin-right: 15px;
}

.ActivityTrackerDiv .disabled {
    opacity: 0.6;
}

.ActivityTrackerDiv .IfEmptyRecordPadding 
{ padding-left: 32px;
padding-Top: 15px;
padding-bottom: 30px;}

.ActivityTrackerDiv .ThemeGrid_MarginGutter {
    margin-left: 6%;
}


.ActivityTrackerDiv .ThemeGrid_Margin1 {
    margin-left: 18.5%;
}
/*----style for Activity Tracker ends------------*/

/*--- Style for CommunicationSection(dashboard) starts ------*/

/*--------------Accordian-------*/

.CntCommSection .icon-wrapper {
display: flex;
margin-right: 40px;
    padding-top: 12px;

}

.CntCommSection .icon-wrapper img {
    width: 100px;
    height: 60px;
    vertical-align: middle;
}

.CntCommSection .short-description {
color: #4E637D;
text-transform: capitalize;
font-size: 20px;
width: 45%; 
display: flex;
padding-top: 6px;

}

.CntCommSection .blue-button {
background-color: #4E637D;
border: 2px solid #4E637D;
color: white;border-radius: 999px;
min-width: 160px;
padding: 10px 50px;
font-size: 22px;
font-weight: 400;
cursor: pointer;
}

.CntCommSection .blue-button:disabled {
    background-color: darkgray; 
    border: darkgray;
}

.CntCommSection .gray-with-blue-button {
    background-color: #F0EFEF;
    border: 2px solid #4E637D;
    color: #4E637D;
    min-width: 160px;
    padding: 10px 50px;
    font-size: 22px;
    font-weight: 400;
    border-radius: 90px;
    cursor: pointer;
    margin-top: 5px;
    margin-left: 0px;
}

.CntCommSection .action-area { 
    padding-top: 2px;
    width: 40%;
}
/*.CntCommSection .task.information-task{display: flex;}*/

.CntCommSection .accordion-item {
margin: 0px 0px 12px 12px;

border: 2px solid #4E637D;
border-radius: 90px;
}

/* comment .CntCommSection .accordion-item.is--open {
border: 2px solid #4E637D;
}

.CntCommSection .accordion-item-icon {
top: 24px;
position: relative;
color: #4e637d!important;
} */

/*.CntCommSection .task-detail {
margin-top: 0px;
border-top: solid 2px #4E637D;
padding-top: 36px;
} comment end */

.CntCommSection .task-detail-view-faq {
max-width: 33%;
flex-grow: 1;
margin-bottom: 16px;float: left
}

.CntCommSection .task-detail-section-header {
margin-bottom: 8px;
}

.CntCommSection .gray-with-blue-button {
background-color: #F0EFEF;
border: 2px solid #4E637D;
color: #4E637D;
text-decoration: none;
}

.CntCommSection .medium-button {
padding: 10px 50px;
font-size: 22px;
font-weight: 400;
}

/*.CntCommSection .task-detail-contact-us {
flex-grow: 1;
margin-bottom: 16px;
} */

.CntCommSection .rounded-green-outline {
display: inline-flex;
flex-direction: row;
align-items: center;
border-radius: 999em;
border: 2px solid #8AA400;
padding: 20px 30px;
color: #8AA400;
}

.CntCommSection .need-help {
margin-right: 22px;
}

.CntCommSection h3 {
font-size: 20px;
}


.CntCommSection .green-button {
background-color: var(--color-primary);
border: 2px solid var(--color-primary);
color: white;
}

.CntCommSection .subheading {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    border-left: none;
    margin-bottom: 10px;
}

.CntCommSection .tabs-header-item {
    width: 50%;
}

.CntCommSection .attachment-link {
    text-decoration: underline;
}


/* New style */
.CntCommSection .task-list .more-details-wrapper {
  margin-top: 10px;
  }
  .CntCommSection .task-list .more-details-wrapper a {
    color: #4E637D; }
    
.CntCommSection .task-list .task-more-details {
    height: 32px;
    width: 21px;
    margin: 10px 0 10px 6px;
    background-size: 100%;
    right: 0;
    top: 28%;
}

.CntCommSection .task-list .task {
    padding: 34px 30px;
}

.CntCommSection .task-list .task {
    padding: 15px;
    border: 2px solid #4E637D;
    border-radius: 90px;
}
.CntCommSection .task-list .task {
    color: #4E637D;
    margin: 0px 0px 12px 12px;
    background: rgba(255, 255, 255, 0.75);
}

.CntCommSection .task-list .task .task-summary {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.CntCommSection .expandable.expanded {
    max-height: 600px;
    opacity: 1;
}

.CntCommSection .task-detail {
    margin-top: 34px;
    border-top: solid 2px #4E637D;
    padding-top: 36px;
}
.CntCommSection .task-detail {
    flex-direction: row;
    flex-wrap: wrap;
}


.task-list .task .task-summary {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.CntCommSection .icon-wrapper {
       padding-bottom: 16px;
    }
    
.CntCommSection .tabs-header-item {
    width: 50%;
}

    
    



.CntCommSection .taskInput{
    border-radius: 999px;
    border: 2px solid #4E637D;
    color: #4E637D;
    font-size: 22px;
    padding: 10px 50px;
    height: 49px;
    width: 314px;
    margin-right: 15px;
}

.tablet .CntCommSection .taskInput {
    margin-bottom: 5px;
}


/*--- Style for CommunicationSectoin(dashboard) ends --------*/


/*----style for milemarker start------------*/

.milemarker .heading2{

padding-top: 30px;
padding-left: 30px;
color: #8AA400;
}

.milemarker .ImageTure
{
src:url("/MileMarkers_UI/img/Milemarker2.jpg?2268&694");
}

.milemarker .ImageFalse
{
src:url("/MileMarkers_UI/img/Milemarker3.jpg?2268&694");
}

.milemarker .MainDivPadding{
    padding-top: 30px;
    padding-bottom:50px;
    padding-left:50px; 
    padding-right:50px;}
    
    .milemarker .BottomDiv
 {padding-bottom: 30px;}
 
 .milemarker .TitelColorTrue
 {colour: #666666;}
 
 .milemarker .TitelColorFalse
 {colour: #666666;
 opacity: .3; 
 }
 
 .milemarker .MyMileMarkerWidth {width:300px;}
 
 .MileMarkerPopUp .icon-diploma .fa {
    /*font-size: 130px;*/
    font-size: 75px;
    padding: 40px 20px 20px 20px;
    color: #FFFFFF;
}
.MileMarkerPopUp .awarded {
    margin-bottom: 15px;
    color: #FFFFFF;
}
 .MileMarkerPopUp .mmname {
    background-color: rgba(19, 40, 11, 0.5);
    padding: 20px;
    font-size: 40px;
    color: #FFFFFF;
}
.MileMarkerPopUp .mmdescription {
    padding: 20px;
    color: #FFFFFF;
}

.MileMarkerPopUp .CloseDiv {
    padding-bottom: 10px;
    position: absolute;
    width: 100%;
    bottom: 12px;
}
 
 /*----style for milemarker end------------*/




/*----style for Payments and Deposits setion starts------------*/


/*----style for Payments and Deposits setion ends------------*/


 /*----style for Notification Icon start------------*/
 .BalloonTriggerDiv {
    padding: 20px;
    border: 1px solid black;
    border-radius: 10px;
}


@-webkit-keyframes balloon {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -5px, 0);
    }
    50% {
        opacity: .8;
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
    }
}

@-ms-keyframes balloon {
    0% {
        opacity: 0;
        -ms-transform: translate3d(0, -5px, 0);
    }
    50% {
        opacity: .8;
    }
    100% {
        opacity: 1;
        -ms-transform: translate3d(0, 0, 0);
    }
}

@keyframes balloon {
    0% {
        filter: alpha(opacity=0);
        opacity: 0;
        transform: translade3d(0, -5px, 0);
    }
    50% {
        filter: alpha(opacity=80);
        opacity: .8;
    }
    100% {
        filter: alpha(opacity=100);
        opacity: 1;
        transform: translade3d(0, 0, 0);
    }
}

.Balloon {
    background-color: #fff;
    border: 1px solid #ccc;
    font-size: 14px;
    line-height: 20px;
    text-transform: capitalize;
}

/*
.phone.landscape .Balloon { 
    top: 65px !important;
    left: 900px !important;
}
*/

.Balloon > a {
     text-transform: capitalize;
}

.Balloon_content {
    padding: 8px 10px;  
    height: 200px;
    overflow-y: scroll;
}



.Balloon__heading.Heading3 {
    display: table-cell;
    text-align: left;
    vertical-align: middle;
}


.js_open.Balloon {
    -webkit-animation: balloon .2s ease-in;
            animation: balloon .2s ease-in;
    display: block;
    filter: alpha(opacity=100);
    opacity: 1;
    z-index: 15;
}

.Balloon-wrapper {
    position: absolute;
    right: 0px;
    padding: 20px 0px;
    height: 70px;
    cursor: pointer;
    text-align: right;
    float: right;top: 0;
    
}

.Balloon-wrapper .fa-bell-o{
    color: #FFF;
}
.Balloon-wrapper .fa-bell-o:hover {
    color: #DAFB2E;
}

.Balloon-wrapper .Balloon_footer {
    border-top: 1px solid #ccc;
    padding: 0px !important;
}

.Balloon-wrapper .TaskListBorderBottom
{
border-bottom: 1px solid #000 !important;
}

.Balloon-wrapper .TextColor{ 
color: #4E637D;
}

 /*----style for Notification Icon end------------*/

/*Popup title backgrond color */

div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-titlebar, div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar {
    background: #89a400;
    text-align:center}
    
 div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-title {
    left: 0;
}   

/*----style for desktop ends------------*/


/*----style for tablet starts------------*/
 

/*----style for tablet ends------------*/

 
/*----style for Phone starts------------*/
.phone .clickHere {
    padding: 0px;
    margin-top: 0px !important;
}
.phone.portrait .layout-login-simple .layout-login-form {
    margin: 15px 20px;
    padding: 15px!important;
    
}
.phone.landscape .layout-login-simple .layout-login-form {
    margin: 15px 35px;
    padding: 15px!important;
    
}
.phone .layout-login-simple .layout-login-form-content {
    width: 90%;
}
.phone .footer-login {
    position: relative;
}
.phone .header-right {
    display: block;
}
.tablet .account-wrapper, .phone .account-wrapper {
   display: none
}

.tablet .menu-icon-line,.phone.portrait .menu-icon-line {
    background: #fff;
}

 
.phone.landscape .question-mark-button {
    width: 50%;
    margin: auto;
    float: none;
}
.phone.landscape .question-mark-button-wrapper{
text-align:center

}
.phone.landscape .question-mark{display: flex;}

.phone .LoginParentCntr .pin-wrapper {
    display: block;
    text-align: left;
}
.phone .LoginParentCntr .pin-label {
    text-align: left;
}
.phone .ForgotPassword h1 {
    font-size: 35px;
}
.phone .Document .small-button {
    width: 150px;
}
  .phone .video .TableRecords tbody tr td {
    display: block;
}
.phone .video .TableRecords tbody tr td div {
    display: block;
    width: 100%;
    
}
.tablet .header .Main_Menu .Menu_TopMenu.Menu_TopMenuActive, .phone .header .Main_Menu .Menu_TopMenu.Menu_TopMenuActive{background: transparent}
.tablet .header .Main_Menu .Menu_TopMenu.Menu_TopMenuActive:after,.phone .header .Main_Menu .Menu_TopMenu.Menu_TopMenuActive:after{display:none}
.tablet .layout-top .Menu_TopMenus, .phone .layout-top .Menu_TopMenus, .tablet .layout-side .navigation, .phone .layout-side .navigation {
    background: #465970;}
  .phone .clientIdDisp ,.phone .uname,.phone .greeting, .tablet .clientIdDisp ,.tablet .uname,.tablet .greeting{display: block}
.phone .video .small-button{    width: 135px; margin: 10px 0 0;}
.phone .video video{width: 100%}
.phone .userInfo,.tablet .userInfo{color:#fff} 
.phone .userInfo, .tablet .userInfo {
    color: #fff;
    text-align: center;
    padding: 10px;
    background: #566a84;
}
.phone .header .Main_Menu .Menu_TopMenu ,.tablet .header .Main_Menu .Menu_TopMenu{
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 10px;
    
}
.phone .header .Main_Menu .Menu_TopMenu{
    display: inline-block;
}

.tablet .header .Menu_TopMenu > div > a,.phone .header .Menu_TopMenu > div > a{font-size:16px;text-transform: uppercase;}
.phone .questanswer { height: auto;}
.phone .Date_cb {
    width: 26%;
    margin-top: 0;
    margin-left: 5px !important;
    margin-right: 5px !important;
}

.phone .phonetypewidth {
    width: 100%;margin-top: 5px;margin-bottom: 5px;
}
.phone .month_cb {
    margin-top: 5px;
    margin-bottom: 5px;
    width: 30% !important;
}
.phone .year_cb{
       width: 35%;
    margin-top: 0;
    margin-bottom: 0;
}
.phone .uploadCnt .plsIcon {
    padding: 3px;
    display: inline-block;
}
.phone .uploadCnt .fontSize {
    font-size: 18px;
}
  .phone .motivational-message , .tablet .motivational-message {
    margin-left: 0;
    font-size: 16px; margin-top: -5px;width: 100%;  padding:1em 18px;
    
}
    
  .phone .circlecontainer , .tablet .circlecontainer{width: 98%;}
 .phone .imagecontainer , .tablet  .imagecontainer {
    border-style: solid;
    border-color: white;
    width: 33.33%;
    float: left;
    margin-right: 0;
    border-radius: 20px 20px 0px 0px;
    border-width: 2px 2px 0px;
    margin: 0px;
    }
    
 .phone .MarLR{    margin-left: 2px;
    margin-right: 2px;}
    
 .phone .marL{margin-left: 2px;}
 .phone .imagetopheader , .tablet .imagetopheader{top: 10%;
    text-transform: none;
    background: transparent;
    font-family: 'Nunito-SemiBold';
    font-size: 14px;padding: 2px;
}
 .phone .selector-count , .tablet .selector-count{font-family: 'Nunito-SemiBold';
    font-size: 24px;
    border: 2px solid white;
    width: 35%;
    left: 28%;
    border-radius: 999px;
    top: 56%;
    height: 30%;
    line-height:1.6;
    color: #fff;}
 .phone .statuscontainer , .tablet .statuscontainer {font-size: 12px;
    left: 0%;
    }
    
 /*.phone .image-warning , .tablet .image-warning  {
    background: #ff9900;
    border: 2px solid #ff9900;
    color: #fff;
}
.phone .imgselected , .tablet .imgselected  {
    background: #4E637D;
    border: 2px solid #4E637D;
    color: #fff;
}*/
.phone .imgcontent {
    min-height: 160px;
}

 .tablet .imgcontent {
    min-height: 152px;
}
  .phone .imgselected .selector-count, .phone .image-warning .selector-count , .tablet .imgselected .selector-count, .tablet .image-warning .selector-count{color:#4E637D;background: #fff}
  .phone .tabs-header-item{width: 43%}
  .phone .progress-overview-desktop {
    padding: 20px 5px;
    font-size: 12px;
}
 .phone .tabs-header-item {
    width: 50%;
    margin-left: 2px;
    margin-right: 2px;
    font-size: 12px;
    margin-bottom: 0px;
}
.phone .dashboard-heading {
    padding-top: 1em;
    padding-bottom: 1em;
}
.phone .dashboard-heading h2 {
    margin-bottom: 15px;
    font-size: 30px;
}
.phone .payOffDateInfoCntr,.phone .progress-descriptions-wrapper .description {
    border-left: 0;
}
.phone .milemarker .ListRecords .ThemeGrid_Width4 {width:300px }
/*----style for Phone ends------------*/

/*-----------Custom CSS for tab and phone only elements on Login Screen ---------*/

.GpLogo-Redirect img {
    width: 80%;
}

.GpLogo-Redirect {
    text-align: center;
    background: #4e637d;
    height: auto;
}

.GpText-Redirect {
    text-align: right;
    padding: 2%;
}

.GpText-Redirect {
    text-align: right;
    padding: 2%;
    padding-left: 0;
    color: #87aa31;
    font-size: 22px;
}

.phone .DownloadButton-Redirect {
    width: 100px !important;
}

.phone .DownloadButton-Redirect input {
    height: 5vh;
    font-size: 12px;
}

.SmallDeviceDisp {
    padding: 1%;
    height: 15vh;
    background-color: #ebebeb;
    box-shadow: 1px 1px 40px 1px;
}

.tablet.landscape .SmallDeviceDisp {
    height: 20vh;
}

.tablet.landscape .SmallDeviceDisp .columns-item:first-child {
    text-align: center;
}

.tablet.landscape .GpLogo-Redirect {
    text-align: center;
    background: #4e637d;
    height: auto;
    width: 70%;
    margin: 0;
}

.tablet.landscape .GpLogo-Redirect img {
    width: 140px;
}

.tablet.portrait .SmallDeviceDisp .columns-item:first-child {
    text-align: center;
}

.tablet.portrait .GpLogo-Redirect img {
    width: 125px;
}

.GpDownload-Redirect {
    padding: 1.5%;
    font-weight: 600;
    font-size: 24px;
    color: #4e637d;
}

.phone .GpDownload-Redirect {
    font-size: 14px;
}

.DownloadButton-Redirect input {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* Phone View of Communication */


.phone .CntCommSection .short-description {
color: #4E637D;
text-transform: capitalize;
font-size: 15pt;
width:100%; 
display: block;
padding-top: 6px;
text-align: center;
}

.phone .CntCommSection .action-area { 
    padding-top: 2px;
    width: 100%;
    display:block;
    text-align: center;
}

.phone .task-summary{
display: block;
text-align: center;
}

.phone .CntCommSection .task-list .task .task-summary {
    display: block;
    flex-direction: row;
    text-align: center;
}

.phone .CntCommSection .icon-wrapper {
display: block;
padding-top:12px;
text-align: center;
margin-right:0;
}

.phone .CntCommSection .accordion-item {
margin: 0px 0px 12px 12px;
border-radius: 20px !important;
border: 2px solid #4E637D;
}

.phone header.register-header {
    text-align: center;
}
.phone .langDropDown {
    margin: 0 auto;
}
.phone .content-top-title {
    margin-bottom: 10px;
}
.phone .imgcontent>img , .tablet .imgcontent>img {
    display: none;
}
.phone .MarLR  .image-warning .selector-count {
    background: #df911d;
}
.phone .MarLR .image-warning .selector-count img {
    width: 20px!important;
    margin-top: 9px;
}
.phone .header-top {
    padding: 0 10px;
}
.tablet .menu-icon, .phone .menu-icon {
    margin-right: 5px;
}

.tablet .menu-icon {
    margin-left: 10px;
}

.phone .header-left .application-name {
    padding-top: 16px;
}
.phone .Balloon-wrapper {
    right: 10px;
}
.phone div.os-internal-Popup.os-internal-ui-dialog, .phone div.os-internal-Popup .os-internal-ui-dialog {
    width: 90% !important;
    left: 5% !important;
    height: auto !important;
    top: 10% !important;
}
.phone .rounded-blue-background {
    width: auto;
    margin: 0 20px;
}
.phone .content-gp .right-gp {
    margin-top: 20px;
}
.phone .myCreditorsDiv .IconCntr {
    width: 60%;
    margin: 0 auto;
}

.phone .heading2.creditorLabel {
    padding: 0 !important;
    text-align: center;
}
.phone .mobileCenter{
    text-align: center;
}
.phone .header .Main_Menu .Menu_TopMenu:hover a::after {
    border: 0;
}
.phone .uname {
    margin: 5px 0;
}
.phone .newMsgTxt {
    margin: 0 !important;
}
.InboxSearchMsg>div, .InboxSearchMsg>div>input {
    margin: 0 !important;
}

.tablet.landscape .InboxSearchMsg>div>input {
    font-size: 16px;
    padding: 10px 0px;
}

.tablet.portrait .InboxSearchMsg>div>input {
    font-size: 10px !important;
    padding: 1px 1px;
    padding-left: 0px;
}

.phone .fc-toolbar.fc-header-toolbar {
    margin-top: 10px;
}
.phone .fc-toolbar h2 {
    margin-bottom: 10px;
}
.phone .AddDocAlignment {
    margin: 10px 0 0 !important;
}
.phone .top-update-button {
    margin: 10px 0 0 !important;
}
.phone .TableRecords td:before , .tablet.portrait .TableRecords td:before{
    content: attr(data-header);
    display: block;
    font-weight: bold;
    margin-right: 10px;
    max-width: 110px;
    min-width: 110px;
    word-break: break-word;
}
/* .phone .ThemeGrid_Width2{ */
/* width:18% !important; */
/* } */

.borderbluebottom{
border-bottom: 2px solid #4E637D;
}
/*-------------- FOR BACKGROUND-IMAGE IN PRE LOGIN SCREEN ------------------------------*/
.withBg {
    /*background-image: url(/Account_UI/img/gploginBG.jpg?2261);/*/
    background-repeat: no-repeat;
    background-size: cover;
}

/*---- Center align button on phone --------*/
.phone .btnAlignPhone {
    display: block;
    margin: 0 auto;
    margin-top: 5px;
}/*----------------------*/


.marginRight25 {
    margin-right: 25%;
}

.phone .marginRight25 {
    margin-right: 0px;
}

.phone .phoneWidthFull {
    width: 100%;
}

.phone .footer.footerLogin {
    position: static;
}

.backGBlue {
    background-color: #4e637d !important;
}

.phone .mblML0 , .tablet .tblML0{
    margin-left:0 !important;
}
.phone .tblMR0 , .tablet .tblMR0{
    margin-right:0 !important;
}
.phone .mblM0 , .tablet .tblM0{
    margin:0 !important;
}


/*Footer */
.layout-top .content-bottom .footer .ThemeGrid_Container {
    padding-bottom: 0;
    padding-top: 0;
}
.menu-icon-line {
    background-color: #ffffff;
}

.tablet .MainPopup .uploadCnt .Button + .Button , .phone .MainPopup .uploadCnt .Button + .Button {
margin-left: 0 !important;
}
/*my account radio button*/
.tablet .tablePhoneNumber .autoDialRadio{
width: 50%;
}

.phone .tablePhoneNumber .autoDialRadio{
    width: 58%;
}


.tablet .tablePhoneNumber .autoDialRadio {
    margin-left: 10px;
}

/*my account radio button*/
/*video space between buttons*/
.phone .video .small-button {
    margin: 10px 5px 0 0;
}
/*video space between buttons*/
/* to solve bell icon overlap issue*/

.desktop-small .Menu_DropDownButton {
    padding-right: 0;
    padding-left: 0;
}
.desktop-small .header .Main_Menu .Menu_TopMenu.Menu_TopMenuActive, .desktop-small .header .Main_Menu .Menu_TopMenu {
    padding: 23px 15px;
}

.desktop-small .marginRight25 {
    margin-right: 325px;
}
.desktop-small .langDropDown {
    width: auto;
}
.desktop-small .header-right .theme-container {
    margin-right: 295px;
}
.desktop-small .account-wrapper {
    font-size: 16px;
}
.displayMobTabPot{
display:none;
}
.desktop-hd .Balloon-wrapper {
    margin-right: 365px;
}
.phone .displayMobTabPot , .tablet.portrait .displayMobTabPot{
    display:block;
}
/* to solve bell icon overlap issue*/


/*-----Hamburger Menu -----------*/
.tablet .header .Menu_TopMenu > div, .phone .header .Menu_TopMenu > div {
    width: 66%;
}


.ImageInsideContent .selector-count {
    top: 135px;
}

.fixed-action-btn ul {
    width: 150px !important;
    left: -90px !important;
}

/*---- Last Added ----*/

.tablet .ImageInsideContent .selector-count, .phone.landscape .ImageInsideContent .selector-count{
    top: 42%;
}

.tablet .statuscontainer {  
    top: 26%;
}
.phone.landscape .statuscontainer {
     top: 30%;
}

.phone.landscape .selector-count, .tablet .selector-count{  
    left: 32%;
}

.statuscontainer .attention {
    color: white;
}

.phone.portrait .statuscontainer {    
    top: 32%;
}

.tooltipster-base Balloon tooltipster-fade tooltipster-fade-show, .tablet .tooltipster-base Balloon tooltipster-fade tooltipster-fade-show, .phone .tooltipster-base Balloon tooltipster-fade tooltipster-fade-show
{
    transition-duration: 350ms;
    animation-duration: 350ms;
    top: 65px !important;
    left: 1235px !important;
}

::-webkit-scrollbar{
    width: 10px;
    height: 10px !important;
    padding-top: 40px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
  border-radius: 20px;
    height: 20px !important;
    width: 8px;

}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
::-webkit-scrollbar-track-piece {
    height: 30px;
    width: 30px;
}

.desktop-hd .fixedChatIcon {
    position: fixed;
    left: 54%;
    margin-left: 47em;
    bottom: 0px;
}
.desktop-hd .fixedChatIcon .fixed-action-btn.vertical {
  position: relative;
}

.desktop-small .ImageInsideContent .selector-count {
    top: 92px;
}


.phone.portrait .ImageInsideContent .selector-count {
    top: 90px;
}

.desktop-small .ImageInsideContent .selector-count {
    top: 110px;
    font-size:100px;
}

.question-mark-button-wrapper  .button {
   min-width: 100px !important;
}

.question-mark-button-wrapper .small-button {
    padding-left: 0px !important; 
    padding-right:15px !important; 
    width:auto !important;
}

.blue-with-white-button.rounded-button.question-mark-button.small-button.button.OSInline.ThemeGrid_MarginGutter {
    width: 100px !important;
}
/*css for ballon popup*/
.tablet.landscape .Balloon_content , .phone  .Balloon_content {
    padding: 4px 8px;
}
.tablet.landscape .Balloon_content .TaskListBorderBottom .OSFillParent , .phone  .Balloon_content .TaskListBorderBottom .OSFillParent {
    width: 100%;
}
.tablet.landscape .Balloon_content .TaskListBorderBottom td ,.phone  .Balloon_content .TaskListBorderBottom td {
    height: auto !important;
}
.phone .Balloon_content .TaskListBorderBottom td {
    height: auto !important;
    font-size: 13px;
}
.phone .Balloon_content .TaskListBorderBottom td img {
    width: 15px !important;
    height: 15px  !important;
}

.phone .faqParent {
    text-align:center;
}
/*css for ballon popup*/


/* CSS for banner*/
.tablet.portrait .SmallDeviceDisp {
    height: auto;
}
.tablet.portrait .logo-preview {
    padding-bottom: 12px;
}
/* .phone.landscape .question-mark-button { */
    /* margin: 4px; */
/* } */
.phone.portrait .question-mark-button-wrapper .small-button {
    padding-left: 25px !important;
}
.Menu_DropDownArrow{
width:20px;
}
.question-mark-button-wrapper .faqInnerBtn{
    border: none;
    width: 75% !important;
    width: calc(100% - 48px) !important;
    margin-left: 42px !important;
    color: white;
    margin-top: 3px;
    padding-left: 5px !important;
    padding-right: 15px !important;
}


/*-------- ONEPLUS TABLET PORTRAIT --------- */
.tablet.portrait .statuscontainer {
    top: 31% !important;
}
.tablet.portrait .faqButton {
    max-width: 155px !important;
}

.tablet.portrait .ProgramSummary .tabs-header-item {

    text-align: center;
}

.tablet.portrait .myCreditorsDiv .account-activity-time-frame-buttons {
   
    width: 310px;
}

.tablet.portrait .fa-2x {
    font-size: 1em;
}
.tablet.portrait newMsgTxt span
{
    font-size: 12px
}
.tablet.portrait .DownloadButton-Redirect input
{
    width:100%;
}
.tablet .marginRight25 {
    margin-right: 40px;
}    
.tablet .theme-container {
    margin-right: 100px !important;
}
.orange{
    background:orange !important;
}
.phone .Balloon_content{
    height:100px;
}
.phone div.os-internal-Popup.os-internal-ui-dialog, .phone div.os-internal-Popup .os-internal-ui-dialog {
    bottom: 0;
    height: 80% !important;
}
.layout-top .content-bottom .footer .ThemeGrid_Container {
    width: 90% !important;
}

@media only screen and (max-width: 320px) {
.Balloon-wrapper.marginRight25{
margin-top:4px !important;
}
.langDropDown .dropdown-header.select {
    width: 68% !important;
}
.circlecontainer .imagetopheader{
top: 7% !important;
font-size: 9px !important;
}
.circlecontainer .selector-count{
    width: 68% !important;
    left: 16% !important;
}
.Balloon-wrapper {
    right: 16px !important;
}
.badge-icon .badge{
font-size:9px !important;
}
}
@media only screen and (min-width: 320px) and (max-width: 350px){
.Balloon-wrapper.marginRight25{
margin-top:4px !important;
}
.langDropDown .dropdown-header.select {
    width: 68% !important;
    margin: 4px 44px 4px auto !important;
}
.Balloon-wrapper {
    right: 16px !important;
}
.badge-icon .badge{
font-size:9px !important;
}

}

}

.phone .circlecontainer .selector-count,
.tablet.portrait .circlecontainer .selector-count
{
    width: 62% !important;
    left: 19% !important;
}
.phone .circlecontainer .selector-count img,
.tablet .circlecontainer .selector-count img
{
    height: 35px !important;
    width: 35px !important;
    margin-top: 4px !important;
}
.phone.portrait .circlecontainer .imagetopheader{
    top: 7% !important;
font-size: 11px !important;
}

.tablet .circlecontainer .imagetopheader{
font-size: 13px !important;
}
.tablet.landscape .selector-count {
    left: 25% !important;
    width: 47% !important;
}
.phone .pre-Login #Theme_UI_wt22_block_wtcontent_wtBackgroundImage
{height:100% !important;
}

.phone .layout-login {
    align-items: center;
}

@media only screen and (max-width: 420px) {
.layout-login-form-content .pin-container input[type='password']{
   width: 47px !important;
   height: 47px !important;
}
.LoginParentCntr .pin-container .OSInline{
margin-left:0px !important;
margin-right:0px !important;
}
}
@media only screen and (min-width: 351px) and (max-width: 420px){
.Balloon-wrapper {
    right: 16px !important;
}
.langDropDown .dropdown-header.select {
    width: 87% !important;
}
.badge-icon .badge{
font-size:9px !important;
}
}
.NoWrapCss{
    white-space: nowrap;
}