*{
  /*font-family: 'Arvo', serif;*/
  font-family: 'Ubuntu', sans-serif;
  box-sizing: border-box;
  font-size: 14px;
}
:root {
    --colorSecondary: #6dc8bf;
    --colorPrimary: #22403d;
    --bgSecondary:#6dc8bf;
    --bgPrimary: #22403d;
    --bgImage:url(../images/bg-login-register.jpg);
    --bggrayImage:url(../images/gray-bg.jpg);
    --bggrayColor:#f0f1f1;
}
.bg-image-black {
    background:url(../images/bg-login-register.jpg);
}
.bg-image-gray {
    background:url(../images/gray-bg.jpg);
}
a, ul li a {
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
.btn.focus,.btn:focus,.btn:hover,input:focus,button:focus,a:focus,a:hover {
    text-decoration: none;
    outline: none;
    color: inherit;
    text-decoration:none !important;
    transition: all 0.3s ease 0s;
}
.form-control:focus {
    box-shadow: none;
}
li,ul,ol,a,h4 {
    margin: 0px 0px;
    padding: 0px 0px;
}
body {
    overflow-x: hidden;
}
.mb-0{
    margin-bottom: 0px !important;
}
.padd-15 {
    padding: 0 15px !important;
}
.wrap-login-reg-box {
    /*background: var(--bgImage);*/
    background-size: cover;
    width: 100%;
    min-height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 15px 0;
}
.login-reg-box {
    display: -ms-flex;
    display: -webkit-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: stretch;
    flex-direction: row;
    max-width: 800px;
    /*margin: 0 auto;*/
}
.login-reg-box .column {
    width: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;                /* nested flex container */
    flex-direction: column;        /* vertical alignment of flex items */
    justify-content: center;       /* center flex items vertically */
    align-items: center;
    padding: 40px 65px 100px;
    position: relative;
    border-radius: 5px;
}
.column.box-description.bg-login-gray {
    justify-content: end;
    padding-top: 20%;
}
.login-reg-box .column:after {
    background: var(--bgSecondary);
    position: absolute;
    content: "";
    width: 75%;
    height: 1px;
    bottom: 46px;
}
.login-reg-box .box-description h2 {
    display: block;
    font-size: 55px;
    /*var(--colorSecondary)*/
    color: var(--colorSecondary);
    font-family: "Arvo";
    font-weight: 400;
}
.login-reg-box .box-description h2 span {
    display: block;
    font-weight: 300;
    font-size: 16px;
    line-height: 50px;
}
.login-reg-box .box-description h2 span:last-child {
    text-align: right;
}
/*.login-reg-box .column.box-auth .logo-auth img {
    width: 95px;
}
.login-reg-box .column.box-auth .logo-auth {
    margin-bottom: 50px;
    }*/
    form.login-reg-form .form-control {
        background: transparent;
        border: none;
        box-shadow: none;
        border-bottom: 1px solid #d6fffb;
        border-radius: 0;
        color: #ddd;
    }
    .input-group input::placeholder {
        color: #d6fffb;
        font-size: 14px;
        font-weight: 300;
    }
    form.login-reg-form .input-group-addon {
        background: transparent;
        border: none;
        border-bottom: 1px solid #d6fffb;
        border-radius: 0;
        color: #d6fffb;
        padding-right: 0;
        padding: 6px 5px 6px 5px;
    }
    span.info {
        display: block;
        width: 16px;
        height: 16px;
        background: var(--bgSecondary);
        border-radius: 50%;
        text-align: center;
        line-height: 17px;
        cursor: pointer;
        position: absolute;
        right: 0;
        top: 10px;
    }
    input.form-control.btn.btn-submit {
        border-radius: 5px;
        /*background-image: linear-gradient(262deg, #8bd1cb 0%, #6dc8bf 100%);*/
        background: #8bd1cb;
        transition: all 0.3s ease 0s;
        border-bottom: none;
        font-size: 16px;
        color: #ffffff;
        font-weight: 500;
        height: auto;
        text-transform: uppercase;
        padding: 10px 0;
        margin: 10px;
    }
    input.form-control.btn.btn-submit:hover {
        background-image: none;
        /*background-color: #000;*/
        background-color: #4d928a;
    }
    .form-group.box-links {
        text-align: center;
        margin-bottom: 30px;
    }
    .form-group.box-links a {
        font-size: 14px;
        color: #a2a2a2;
        font-weight: 300;
    }
    .form-group.box-links a:hover {
        /*color: #d6fffb;*/
        color: rgba(162, 162, 162,0.6);
    }
    #form-forgot-password input.form-control.btn.btn-submit, #form-forgot-password .form-group:last-child {
        margin-bottom: 0px;
    }
    form.login-reg-form .input-group.disabled-input .form-control, form.login-reg-form .input-group.disabled-input .input-group-addon {
        border-bottom: none !important;
    }



    /*============== focus input with animation ================*/
    .login-reg-form {
        /* min-width: 225px; */
        min-width: 304px;
    }
/*ngx-recaptcha2 div, ngx-recaptcha2 div iframe  {
    width: 225px !important;
    }*/
    .wrap-input100 {
        width: 100%;
        position: relative;
        border-bottom: 1px solid var(--colorSecondary);
        margin-bottom: 20px;
    }
    .validate-input {
        position: relative;
    }
    .input100 {
        color: var(--colorSecondary);
        line-height: 1.2;
        display: block;
        width: 100%;
        height: 35px;
        background: transparent;
        padding: 0 5px 0 35px;
        border: none;
        font-size: 14px;
        font-weight: 300;
    }
    .focus-input100 {
        /*position: absolute;*/
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        /*pointer-events: none;*/
    }
    .focus-input100::before {
        content: "";
        display: block;
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 0;
        height: 1px;
        -webkit-transition: all 0.4s;
        -o-transition: all 0.4s;
        -moz-transition: all 0.4s;
        transition: all 0.4s;
        background: #f7f7f7;
    }
    .focus-input100::after {
    /*font-family: Material-Design-Iconic-Font;
    font-size: 22px;
    color: #fff;
    content: attr(data-placeholder);*/
    display: block;
    width: 100%;
    position: absolute;
    top: 12px;
    left: 5px;
    padding-left: 5px;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
    /*background: url(../images/user.svg);
    height: 12px;
    width: 12px;*/
}
.input100::placeholder {
    color: var(--colorSecondary);
}
.input100:focus {
    padding-left: 5px;
}
#form-forgot-password .input100:focus {
   padding-left: 0px !important;
}
.input100:focus::placeholder {
    color: transparent;
}
.input100:focus + .focus-input100::before {
    width: 100%;
}
.input100:focus + .focus-input100::after {
    top: -8px;
    font-size: 18px;
}
span.focus-input100 .input-group-icon {
    position: absolute;
    left: 8px;
    top: 6px;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}
.input100:focus + .focus-input100 .input-group-icon {
    top: -17px;
}


.header {
    padding: 5px 15px;
}
/*.header .logo-area img {
    width: 50px;
}
*/

.header .logo-area {
    max-width: 200px;
    width: 100%;
    height: 70px;
    text-align: left;
    margin: 0;
}
.header .logo-area img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left;
}
.header-top .navbar-nav {
    margin-top: 5px;
}
.header .navbar {
    margin-bottom: 0;
}
.navbar-nav>li>a:hover, .navbar-nav>li>a:focus, .navbar-nav>li.dropdown.open a {
    background: transparent;
    /*opacity: 0.6;*/
}
.dropdown-menu {
    top:108%;
    padding: 0;
    border-radius: 0;
}
.dropdown-menu>li>a {
   font-size: 15px;
   color: #464646;
   font-weight: 400;
   opacity: 1 !important;
   border-bottom: 1px solid var(--colorPrimary);
   padding: 5px 20px;
}
li.profile-info ul.dropdown-menu>li:first-child {
    margin-bottom: 15px;
}
.dropdown-menu>li:last-child>a {
    border-bottom: none;
}
.dropdown-menu>li>a:hover {background: transparent !important;}
.content {
    min-height: 100vh;
    position: relative;
}
li.profile-info ul.dropdown-menu>li>a {
    border-bottom: none !important;
}
li.profile-info ul.dropdown-menu>li>a span {
    font-size: 18px;
    display: block;
}
li.dropdown.profile-info.open ul.dropdown-menu {
    min-width: 380px;
    padding: 15px 0;
}
li.profile-info ul.dropdown-menu>li>a i {
    margin-right: 5px;
    width: 13px;
    position: relative;
    left: 0;
    top: 1px;
}
li.profile-info ul.dropdown-menu>li {
    position: relative;
}
li.profile-info ul.dropdown-menu>li>a i.text-icon {
    font-size: 20px;
    font-style: normal;
}
li.profile-info ul.dropdown-menu>li {
    padding: 5px 20px;
    font-size: 15px;
    color: #464646;
    font-weight: 400;
    opacity: 1 !important;
    padding: 5px 20px 0;
}
li.profile-info ul.dropdown-menu>li a {
    padding: 0;
    cursor: auto;
}



footer {
    /* position:absolute;*/
    left:0px;
    bottom:0px;
    width:100%;
    background:#fff;
    padding: 5px 0;
}
ul.footer-links li {
    display: inline-block;
}
ul.footer-right-links li {
    display: inline-block;
    position: relative;
    margin: 0 3px;
}
ul.footer-right-links li a, ul.footer-right-links li  {
    font-size: 12px;
    color: var(--colorPrimary);
    font-weight: 300;
    text-decoration: underline !important;
}
ul.footer-right-links li a img {
    width: 36px;
}
ul.footer-right-links li:after {
    content: "";
    background: var(--bgPrimary);
    height: 50%;
    right: -5px;
    position: absolute;
    width: 1px;
    top: 7px;
}
ul.footer-right-links li:nth-child(4):after, ul.footer-right-links li:nth-child(3):after,ul.footer-right-links li:last-child:after {
    display: none;
}
footer .row {
    display: flex;
    align-items: center;
}
ul.footer-links li {
    margin: 0 5px;
}
ul.footer-links li a, ul.footer-links li {
    font-size: 12px;
    line-height: 20px;
    color: var(--colorPrimary);
    font-weight: 300;
}
ul.footer-links li a:hover, ul.footer-right-links li a:hover {
    color: var(--colorSecondary);
}
ul.footer-links li a img, ul.footer-links li img  {
    margin-right: 4px;
    position: relative;
    top: -1px;
}
ul.footer-links li:first-child a img, ul.footer-links li:nth-child(2) a img {
    top: 0;
}
.footer-right-links {
    text-align: right;
}
ul.footer-links li:first-child {
    margin-left: 0;
}





.section-title {
    font-size: 22px;
    font-weight: 700;
    margin: 50px 0;
}
form.form-inline input.form-control, form.form-inline select.form-control {
    background: transparent;
    border: transparent;
    color: var(--colorPrimary);
    border-bottom: 1px solid var(--colorPrimary);
    box-shadow: none;
    border-radius: 0;
    padding-left: 25px;
    max-width: 190px;
}
form.form-inline input.form-control.date-input {
    max-width: 115px;
    text-align: right;
}
form.form-inline input::placeholder {
    color: var(--colorPrimary);
}
form.form-inline .form-group {
    position: relative;
    margin: 0 10px;
}
form.form-inline .form-group:first-child {
    margin-left: 0;
}
form.form-inline .form-group .icon-img {
    position: absolute;
    left: 0;
    top: 27%;
}
form.form-inline select.form-control {
    min-width: 120px;
    padding-right: 25px;
}
.select-wrap {
    position: relative;
}
.select-wrap select, select.floating-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.select-wrap select::-ms-expand, select.floating-select::-ms-expand {
 display: none;
}
/*.select-wrap:after {
    content: '';
    color: #333;
    right: 11px;
    top: 15px;
    position: absolute;
    pointer-events: none;
    background: url(../images/down-arrow.svg);
    height: 6px;
    width: 10px;
    }*/
    input:-webkit-autofill,
    input:-webkit-autofill:hover, 
    input:-webkit-autofill:focus,
    textarea:-webkit-autofill,
    textarea:-webkit-autofill:hover,
    textarea:-webkit-autofill:focus,
    select:-webkit-autofill,
    select:-webkit-autofill:hover,
    select:-webkit-autofill:focus {
        background: transparent;
        padding: 0 5px 0 35px;
        color: #fff !important;
        -webkit-box-shadow: inset 0 0 0px 9999px var(--colorPrimary);
        -webkit-text-fill-color: #fff !important;
    }

    .logout-user {
        position: absolute;
        bottom: 10px;
        right: 0;
        z-index: 9;
        height: 41px;
        display: flex;
        align-items: center;
        padding: 0 10px;
        background: #fff;
    }
    .logout-user img {
        width: 25px;
    }
    .dropdown-menu>li>a img {
        width: 15px;
        position: relative;
        top: -2px;
        margin-right: 10px;
    }




/*ngx-recaptcha2 div iframe  .rc-anchor-checkbox-label {
    width: 90px !important;
    font-size: 12px !important;
}
ngx-recaptcha2 div iframe  .rc-anchor-content {
    height: 74px;
    width: 142px !important;
}
ngx-recaptcha2 div iframe .rc-anchor-logo-portrait {
    margin-left: 12px !important;
}
.rc-anchor-logo-portrait {
    margin: 10px 0 0 -51px !important;
    width: 43px !important;
    }*/
    li.profile-info ul.dropdown-menu>li img {
        width: 14px;
        position: relative;
        top: -2px;
        margin-right: 9px;
    }
    /* ngx-recaptcha2 div { */
        /* width: 225px; */
        /* transform: scale(0.93); */
        /* position: relative; */
        /* left: -9.4px; */
        /* } */


        .login-reg-form .btn-submit {
            margin: 0px !important;
            margin-top: 10px !important;
        }
        .logout-user img:hover {
            opacity: 1;
        }

        .logout-user img {
            opacity: 0.6;
        }
        .dropdown-menu>li> img.imageR {
            width: 12px !important;
        }


        .page_loader {
            position: fixed;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 999999;
            background-color: #ffffff;
        }
        #load {
            background-image: url("../images/loader.gif");
            background-position: center center;
            background-repeat: no-repeat;
            bottom: 0;
            height: auto;
            left: 0;
            margin: auto;
            position: absolute;
            right: 0;
            top: 0;
            width: 100%;
        }
        .navbar-nav>li.navigation-menu ul.dropdown-menu li a {
            padding: 10px 20px;
        }
        .navbar-nav>li.navigation-menu ul.dropdown-menu li a:hover {
            background:  var(--colorPrimary)!important;
            color: #fff;
        }
        .navbar-nav>li.navigation-menu ul.dropdown-menu {
            top: 108%;
        }
        .down-aerrow svg {
            content: '';
            color: #333;
            right: 11px;
            top: 15px;
            position: absolute;
            pointer-events: none;
            height: 6px;
            width: 10px;
        }
        li.text-profile span {
            display: block;
        }
        li.text-profile span:first-child {
            font-size: 18px;
            line-height: 22px;
            color: #45807a;
            font-weight: 500;
        }
        li.text-profile span:last-child {
            font-size: 16px;
            line-height: 24px;
            color: var(--colorPrimary);
            font-weight: 500;
        }
        li.profile-info ul.dropdown-menu>li img.image-r {
            width: 11px !important;
        }
        .bodybackground input:-webkit-autofill,
        .bodybackground input:-webkit-autofill:hover, 
        .bodybackground input:-webkit-autofill:focus,
        .bodybackground textarea:-webkit-autofill,
        .bodybackground textarea:-webkit-autofill:hover,
        .bodybackground textarea:-webkit-autofill:focus,
        .bodybackground select:-webkit-autofill,
        .bodybackground select:-webkit-autofill:hover,
        .bodybackground select:-webkit-autofill:focus {
            background: transparent;
            padding: 0 5px 0 35px;
            color: #000 !important;
            -webkit-box-shadow: inset 0 0 0px 9999px #FFF;
            -webkit-text-fill-color: var(--colorPrimary) !important;
        }
        li.dropdown.navigation-menu a {
            position: relative;
            top: 3px;
        }
        .bodybackground .header .logo-area img {
            width: 195px;
        }


        /*============== contact-FAQ ================*/
        form.search-faq .form-group, form.form-inline input.form-control {
            width: 100%;
            max-width: 100%;
        }
        .header-section h3 {
            font-size: 14px;
            color: var(--colorSecondary);
            font-family: "Ubuntu";
            font-weight: 700;
            margin: 0;
            line-height: 35px;
        }
        .header-section {
            background: var(--colorPrimary);
            padding: 5px 20px;
        }
        .panel-group .panel+.panel {
            margin-top: 0;
        }
        .panel-default>.panel-heading {
            border-radius: 0 0;
            padding: 13px 15px;
            border-bottom: 1px solid var(--colorPrimary);
            border: none;
            background-color: #fff;
        }
        .panel-group .panel {
            border-radius: 0;
            border: none;
            border-bottom: 1px solid var(--colorPrimary);
        }
        h4.panel-title a {
            font-size: 14px;
            line-height: 20px;
            color: var(--colorPrimary);
            font-weight: 400;
        }
        .panel-default>.panel-heading+.panel-collapse>.panel-body {
            border-top: 1px solid var(--colorPrimary);
        }
        .panel-collapse.collapse.in {
            background-color: #f0f2f2;
        }

        .panel-body p {
            color: var(--colorPrimary);
        }
        .panel-group .panel:last-child {
            border-bottom: none;
        }
        .wrap-faq {
            margin-top: 20px;
        }
        .contact-sidebar .header-section {
            margin-top: 53px;
        }
        .contact-sidebar .header-section h3 {
            font-weight: 400;
            color: #fff;
            cursor: pointer;
        }
        .contact-sidebar .header-section h3 svg {
            width: 25px;
            position: relative;
            top: 5px;
            margin-right: 3px;
        }
        .contact-sidebar ul.contact-listing {
            margin-top: 40px;
        }
        .contact-sidebar ul.contact-listing li {
            position: relative;
            list-style: none;
            margin-bottom: 35px;
            padding-left: 50px;
            display: inline-flex;
        }
        .contact-sidebar ul.contact-listing li svg {
            position: absolute;
            left: 0;
            top: 0px;
        }
        .contact-sidebar ul.contact-listing li a {
            color: var(--colorPrimary);
            text-decoration: underline;
        }
        .contact-sidebar ul.contact-listing li svg path, .contact-sidebar ul.contact-listing li svg circle {
         stroke: var(--colorPrimary); 
         /*stroke: #fff;*/
     }
     .btn-modal {
        margin-top: 5px;
    }
    .modal {
        background: rgba(70, 70, 70,0.6);
    }
    .modal-body {
        padding: 25px;
    }
    .modal.in .modal-dialog {
        width: 571px;
    }
    .vertical-alignment-center {
        display: flex;
        align-items: center;
        vertical-align: middle;
        height: 100%;
        margin: 45px 0;
        max-height: 100%;
    }
    .modal-content {
        box-shadow: none;
        border-radius: 00;
        border: none;
    }
    .modal-header {
        background: var(--colorPrimary);
        padding: 5px 20px;
        position: relative;
    }
    .modal-title {
        font-size: 14px;
        color: var(--colorSecondary);
        font-family: "Ubuntu";
        font-weight: 700;
        margin: 0;
        line-height: 35px;
    }
    .modal-header .close {
        position: absolute;
        margin-top: 0;
        right: 15px;
        top: 8px;
        text-shadow: none;
        color: var(--colorSecondary);
        opacity: 1;
    }
    .modal-header .close span {
        font-size: 26px;
    }
    .label-detail span {
        color: #464646;
        font-size: 14px;
    }
    .label-detail span b {
        font-size: 14px;
        color: var(--colorSecondary);
        display: inline-block;
    }
    .padding-right-0 {
        padding-right: 0px;
    }
    .padding-left-0 {
        padding-left: 0px;
    }
    hr {
        margin: 0px 0 20px;
        border-top: 1px solid var(--colorPrimary);
    }
    /* Custom Radio Button Start*/
    .form-check-inline {
        display: -ms-inline-flexbox;
        display: inline-flex;
        -ms-flex-align: center;
        align-items: center;
        padding-left: 0;
        margin-right: .75rem;
    }
    .radiotextsty {
        color: #464646;
        font-size: 14px;
    }
    label.customradio {
        font-weight: normal;
    }
    .customradio {
      display: block;
      position: relative;
      padding-left: 25px;
      margin-bottom: 0px;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
  }

  /* Hide the browser's default radio button */
  .customradio input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
  }

  /* Create a custom radio button */
  .checkmark {
      position: absolute;
      top: 2px;
      left: 0;
      height: 15px;
      width: 15px;
      background-color: white;
      border-radius: 50%;
      border: 2px solid var(--colorSecondary);
  }

  /* On mouse-over, add a grey background color */
  .customradio:hover input ~ .checkmark {
      background-color: transparent;
  }

  /* When the radio button is checked, add a blue background */
  .customradio input:checked ~ .checkmark {
    background-color: white;
    border: 2px solid var(--colorSecondary);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.customradio input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.customradio .checkmark:after {
  top: 2px;
  left: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--colorSecondary);
}

/* Custom Radio Button End*/
.btn-wrapper-modal {
    margin: 0 auto;
    text-align: center;
}
.btn-wrapper-modal button {width: 186px;}
button.bg-primary:hover {
    opacity: 0.8;
}
.login-reg-box .column.box-auth .logo-auth {
    max-width: 200px;
    width: 100%;
    height: 100px;
    text-align: center;
    margin: 0 0 55px;
}
.logo-auth img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/****  floating-Lable style start ****/
.floating-label { 
 position: relative;
 margin-bottom: 20px;
 min-height: 58px;
 border: 1px solid var(--colorSecondary);
 border-radius: 3px;
 padding: 0px 10px;
}
.floating-input , .floating-select {
  font-size: 14px;
  /*  padding: 4px 4px;*/
  display: block;
  width: 100%;
  height: 30px;
  background-color: transparent;
  border: none;
  position: relative;
  top: 20px;
  outline: none;
  color: #22403d;
}

/*.floating-input:focus , .floating-select:focus {
   outline:none;
   border-bottom:2px solid #5264AE; 
   }*/

   .floating-label label {
      color: var(--colorSecondary);
      font-size: 14px;
      font-weight: normal;
      position: absolute;
      pointer-events: none;
      left: 10px;
      top: 25px;
      transition: 0.2s ease all;
      -moz-transition: 0.2s ease all;
      -webkit-transition: 0.2s ease all;
      margin-bottom: 0;
  }

  .floating-input:focus ~ label, .floating-input:not(:placeholder-shown) ~ label {
      top: 6px;
      font-size: 14px;
      color: var(--colorSecondary);
      line-height: 16px;
  }

  .floating-select ~ label , .floating-select:not([value=""]):valid ~ label,
  .floating-textarea ~ label {
      top:6px;
      font-size:14px;
      color:var(--colorSecondary);
      line-height: 16px;
  }

  /* active state */
  .floating-input:focus ~ .bar:before, .floating-input:focus ~ .bar:after, .floating-select:focus ~ .bar:before, .floating-select:focus ~ .bar:after {
      width:50%;
  }

  *, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.floating-textarea-wrap {

 height: 175px;
}
.floating-textarea {
   min-height: 82%;
   max-height: 260px; 
   /*overflow:hidden;
   overflow-x: hidden; */
   outline: none;
   top: 25px;
   resize: none;
}

.floating-label.form-group.select-floating-wrap .down-aerrow svg path {
    fill: var(--colorSecondary);
}
.floating-label.form-group.select-floating-wrap .down-aerrow svg {
    top: 10px;
}
/****  floating-Lable style end ****/




p.label-detail span:nth-child(2) {
    margin-left: 3px;
}
p.label-detail span, p.label-detail span b {
    margin-right: 5px;
}
.mrg-top-bottom {
    margin: 20px 0 10px;
}
#allocateCallConfirmModal button.btn-modal.btn {
    min-width: 186px;
}
form.comment {
    margin-top: 30px;
}
.previously-allocated-wrap {
    display: flex;
    max-width: 200px;
    position: relative;
}
.previously-allocated label {
    display: block;
    font-size: 14px;
    color: var(--colorSecondary);
    font-weight: normal;
    margin-bottom: 0;
}
.previously-allocated {
    margin-left: 10px;
    /*position: relative;*/
}
.add-icon {
    position: absolute;
    top: 0;
    right: 0px;
}


/*======== grid - CSS ===========*/     
.wrap-grid {        
    margin-top: 30px;       
}       
.ag-root.ag-unselectable.ag-layout-normal {     
    border: none;       
}       
.btn-grid-wrapper {     
    margin: 30px 0 65px;        
}       
.btn-grid-wrapper button {      
    padding: 6px 60px;      
    text-transform: uppercase;      
}       
.ag-theme-balham .ag-header {       
    height: 50px !important;        
    min-height: 50px !important;        
}       
.ag-header-row {        
    height: 50px !important;        
}       
.ag-theme-balham .ag-header-cell, .ag-theme-balham .ag-header-group-cell {      
    line-height: 50px !important;       
}       
.ag-theme-balham .ag-cell {     
    color: #464646;     
}       
.ag-theme-balham .ag-row, .ag-theme-balham .ag-row-odd {        
    background: #fff !important;        
}       
/*.ag-theme-balham .ag-ltr .ag-cell[col-id=Direction], .ag-header-cell[col-id=Direction] {      
    width:100px !important;     
}       
.ag-theme-balham .ag-ltr .ag-cell[col-id=RecordType], .ag-header-cell[col-id=RecordType] {      
     left: 300px !important;        
}       
.ag-theme-balham .ag-ltr .ag-cell[col-id=Extension], .ag-header-cell[col-id=Extension] {        
    left: 400px !important;     
    width:80px !important;      
}       
.ag-theme-balham .ag-ltr .ag-cell[col-id=PhoneNumber], .ag-header-cell[col-id=PhoneNumber] {        
    left: 480px !important;     
    width: 140px !important;        
}       
.ag-theme-balham .ag-ltr .ag-cell[col-id=Duration], .ag-header-cell[col-id=Duration] {      
    width: 130px !important;        
    left: 620px !important;     
}
*/     
child-cell span img {       
    margin: 0 10px;     
}       
child-cell span:first-child img {       
    margin-left: 0px        
}       
.navbar-nav>li.dropdown.profile-info .dropdown-menu {       
    top: 111%;      
}
.ag-header-cell {       
    background: var(--colorPrimary);        
    color  : var(--colorSecondary);     
}       
.ag-theme-balham .ag-root {     
    border: none;       
}       
.ag-theme-balham .ag-header-cell::after, .ag-theme-balham .ag-header-group-cell::after {        
    display: none;      
}
ng-datepicker.form-control.date-input {
    background: transparent;
    position: relative;
    padding: 0px 0 0px 12px;
    max-width: 120px;
}
ng-datepicker.form-control.date-input {
    border: none;
    box-shadow: none;
    border-bottom: 1px solid var(--colorPrimary);
    border-radius: 0;
}
.ngx-datepicker-input.form-control {
    border: none !important;
}
.ngx-datepicker-calendar-container {
    z-index: 9;
    border-radius: 0px !important;
}
span.day-unit.is-today {
    background: var(--colorPrimary) !important;
}
.bodybackground form.login-reg-form .input-group.disabled-input .form-control::placeholder {
    color: var(--colorPrimary);
}
.btn-go {
    margin-left: 10px;
}
.navbar-nav>li.navigation-menu ul.dropdown-menu li a:hover {
    background: transparent !important;
    font-weight: bold;
    color: #4f4f4f;
}
li.dropdown.navigation-menu .dropdown-menu {
    min-width: 220px;
}
li.dropdown.navigation-menu a {
    transition: all 0.5s ease 0s;
}
.counter {
    margin-top: 15px;
}
.counter p {
    color: #464646;
}
.ag-theme-balham .ag-ltr .ag-cell svg {
    width: 34px;
    margin-right: 10px;
    position: relative;
    top: 3px;
    cursor: pointer !important;
     transition: all 0.3s ease 0s;
}
div#accountselectionModal .modal-body form {
    min-height: 300px;
        margin-top: 0;
}
.autocomplete-container .input-container input {
    background: transparent !important;
    border: transparent !important;
    color: var(--colorPrimary) !important;
    border-bottom: 1px solid var(--colorPrimary) !important;
    box-shadow: none !important;
    border-radius: 0;
    padding-left: 25px !important;
}
.autocomplete-container {
    box-shadow: none !important;
    position:relative;
}
.autocomplete-container:before {
    content: "";
    background: url(../images/search.svg);
    position: absolute;
    left: 0px;
    height: 13px;
    width: 13px;
    background-repeat: no-repeat;
    top: 14px;
}
#accountselectionModal .modal-body form input.form-control {
    background: transparent !important;
    border: transparent !important;
    color: var(--colorPrimary) !important;
    border-bottom: 1px solid var(--colorPrimary) !important;
    box-shadow: none !important;
    border-radius: 0;
    padding-left: 25px !important;
}
#accountselectionModal .modal-body form .icon-img {
    position: absolute;
    top: 7px;
}
.form-group.autofill-data {
    max-height: 300px;
    overflow: hidden;
    overflow-y: scroll;
}
.form-group.autofill-data div p {
    border-bottom: 1px solid #ACADAD !important;
    margin-bottom: 0;
    padding: 10px 0;
    color: #868787;
}
.wrap-grid-box {
    background: var(--colorPrimary);
    display: inline-block;
    width: 100%;
    color: var(--colorSecondary);
    padding: 15px 15px;
}
.wrap-grid-box svg {
    width: 34px;
    margin-left: 10px;
    position: relative;
    top: 3px;
    cursor: pointer !important;
     transition: all 0.3s ease 0s;
}
.wrap-grid-box span:last-child {
    text-align: right;
    float: right;
}
.rate-input-wrap input {
    padding-left: 12px;
}
.rate-input-wrap label:before {
    content: "R";
    position: absolute;
    top: 21px;
    height: 10px;
    width: 10px;
    font-family: 'Ubuntu', sans-serif;
    font-size: 14px;
}
.rate-input-wrap input[type=number]::-webkit-inner-spin-button, 
.rate-input-wrap input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
.ag-theme-balham .ag-ltr .ag-cell svg.puls-icon {
    position: absolute;
    right: -15px;
}
.ag-cell[col-id=params] {
    padding-right: 25px !important;
}
.ag-theme-balham .ag-ltr .ag-has-focus .ag-cell-focus, .ag-theme-balham .ag-rtl .ag-has-focus .ag-cell-focus {
    border-color: transparent !important;
}
.ag-theme-balham .ag-icon-checkbox-checked {filter: grayscale(100%);}
.ag-theme-balham .ag-root {
    border: none !important;
}

.ag-theme-balham .ag-ltr .ag-cell svg:hover rect {
    /*fill: #000;*/
        opacity: 0.8;
}
.ag-theme-balham .ag-ltr .ag-cell svg:hover circle {
    /*fill: #000;*/
        opacity: 0.8;
}
.img-doc img, .add-icon img {
    cursor: pointer;
}

.img-doc img:hover, .add-icon img:hover{
    opacity: 0.8;
}
.wrap-grid-box svg:hover rect{
    opacity: 0.8;
}
ul.footer-right-links li.copyright{
    text-decoration:none !important;
}

.ag-theme-balham .ag-row-selected {
    border-color: #d9dcde !important;
}

/*the container must be positioned relative:*/
.custom-select {
  position: relative;
  font-family: Arial;
}

.custom-select select {
  opacity: 0; /*hide original SELECT element:*/
}

.select-selected {
  background-color: transparent;
}


/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
  color: var(--colorPrimary);
  padding: 8px 16px;
  border-bottom: 1px solid var(--colorPrimary);
  /*border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;*/
  cursor: pointer;
  user-select: none;
  min-width: 120px;
      padding-left: 25px;
}

/*style items (options):*/
.select-items {
  position: absolute;
  background-color: #fff;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  -webkit-box-shadow: 0 1px 4px 0 rgba(0,0,0,.08);
    box-shadow: 0 1px 4px 0 rgba(0,0,0,.08);
    border: 1px solid #dfe3e9;
    min-width: 120px;
}

/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected, .select-items .same-as-selected  {
      background-color: #a4a9b1;
    color: #fff;
}
.ngx-datepicker-position-bottom-right {
    top: 34px !important;
    left: -13px !important;
}
.select-items div {
    color: #7b7b7b;
    border-bottom-color: #a4a9b1;
    padding: 6px 10px;
    min-width: 115px;
}
.select-items div:last-child {
    border-bottom: none;
}
.ng-dropdown-wrapper input {
    background: transparent;
    color: var(--colorPrimary);
    border-bottom: 1px solid var(--colorPrimary);
    box-shadow: none;
    border-radius: 0;
    width: auto !important;
    max-width: 120px;
    height: 34px;
    padding: 6px 12px;
    padding-left: 25px;
    outline: none;
}
ul.ng-dropdown-menu {
    background-color: #fff;
    z-index: 99;
    -webkit-box-shadow: 0 1px 4px 0 rgba(0,0,0,.08);
    box-shadow: 0 1px 4px 0 rgba(0,0,0,.08);
    border: 1px solid #dfe3e9;
    min-width: 120px;
}
ul.ng-dropdown-menu li {
   padding: 6px 10px;
    border-bottom: 1px solid #ddd;
    cursor: default;
}
ul.ng-dropdown-menu li:hover {
    background-color: #dadada;
    color: #fff;
}
ul.ng-dropdown-menu li:last-child {
    border-bottom: none;
}
.ng-dropdown-wrapper {
    border-bottom: 1px solid var(--colorPrimary);
    outline: none;
}
.ng-dropdown-wrapper .icon {
    display: none;
}
ul.ng-dropdown-menu li span {
    color: #545454;
}
.wrap-terms-conditions p, .wrap-terms-conditions p a, .wrap-terms-conditions p b {
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 20px;
}
.wrap-terms-conditions ol {
    padding-left: 29px;
}
.wrap-terms-conditions ol li {
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 10px;
}


.allocatedTask .ng-dropdown-wrapper input {
    padding: 0;
    border:0;
}

.allocatedTask .ng-dropdown-wrapper {
    border: 0;
    width:100%;
}
.allocatedTask ul.ng-dropdown-menu {
    left: -11px !important;
    width: calc(100% + 22px);
}
.allocatedTask .floating-label label {
    top: 6px;
    font-size: 14px;
    color: var(--colorSecondary);
    line-height: 16px;
}

.allocatedTask ng-select, .allocatedTask ng-datepicker {
    font-size: 14px;
    display: block;
    width: 100%;
    height: 30px;
    background-color: transparent;
    border: none;
    position: relative;
    top: 20px;
    outline: none;
    color: #22403d;
}
.allocatedTask .ngx-datepicker-input.form-control {
    background-color: transparent !important;
    padding: 0 !important;
    box-shadow: none;
}
.allocatedTask ng-datepicker.form-control.date-input {
    padding: 0;
    border: 0 !important;
}
.allocatedTask input[type=checkbox], .allocatedTask input[type=radio] {
    margin: 0px 8px 0px 0px;
}
.allocatedTask .label-detail span {
    color: #7b7b7b;
    font-weight: 500;
}
.allocatedTask .label-detail label{
    margin-right: 10px;
}
.allocatedTask  .icon-main {
    position: absolute;
    right: 10px;
    z-index: 9;
    width: 15px;
}
.allocatedTask .icon-main {
    fill: var(--colorSecondary);
}
.allocatedTask .rate-input-wrap label:before {
    content:none;
}

.allocatedTask ng-datepicker .icon-main, .allocatedTask .rate-input-wrap .icon-main {
    width: 20px;
    bottom: 7px;
}