body,
html {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

h3 {
    color: #54595f;
    margin-bottom: 18px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ccc;
    font-weight: 300;
}

h4,
h5 {
    color: #54595f;
    font-weight: 400;
    margin-bottom: 0;
    vertical-align: middle;
}

a, .aClass {
    color: #248700;
    text-decoration: none !important;
    cursor: pointer !important;
}

.fullPage-bg{
  min-height: 100vh;
  background-image: url("../images/leaves-retina-web.png");
  background-position: center 300px;
  margin-bottom: 0px;
  background-repeat: no-repeat;
  background-size: 1700px;
}

#accordion-link:focus,
#accordion-link:hover {
    color: #4b286d !important;
}

.text-xs {
    font-size: .75rem;
}

.text-sm {
    font-size: 1rem;
}


.font-weight-bold {
    font-weight: 700!important;
}

/* Select 2 input box not appearing fix  :: START */
.select2-container-multi .ui-select-search {
    min-width: 500px;
}

.select2-container-multi .select2-choices .select2-container{
	background-image: none;
	border: 1px solid #ccc;
}

.select2-container .select2-choice{
    background-image: none;
    border: 1px solid #ccc;
    height: 34px;

}

.select2-container-multi .select2-choices .select2-search-field  input{
	color:#000;
	/* line-height: 1.25; */
    padding: .25rem .5rem;
    font-size: .875rem;
    border-radius: .2rem;
    width: 100%;
}

.select2-container, .select2-drop, .select2-search, .select2-search input{
    color:#000;
    font-size: .875rem;
    width: 100%;
    box-shadow: none;
}

.select2-dropdown-open .select2-choice{
    background-color: #fff;
    box-shadow: none;
}

.select2-container .select2-choice > .select2-chosen{
    margin-top: 3px;
}


.select2-container .select2-choices .select2-search-choice, 
.select2-container-multi .select2-choices .select2-search-choice{
	font-size: 0.85em;
    padding: 0.3em 0.3em 0.3em 1.3em;
    box-shadow: none;
    background-image: none;
    background: #fff;
}


.select2-drop{
	font-size: 0.85em;
}

.select2-container .select2-choice .select2-arrow {
    display: inline-block;
    width: 18px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    background: none;
}


/* Select 2 input box not appearing fix  :: END */

.header-row {
    border-bottom: 1px solid rgb(214,214,214);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.filter_dropdowns {
    line-height: 1.25;
    padding: .5rem 1rem;
    border-radius: .25rem;
    padding-left: 20px;
    background-color: white;
    border: 1px solid #c5c5c5;
    color: #4b286d;
    cursor: pointer;
    font-size: 15px;
}

.ui-grid-action-section {
    padding: 1rem 0;
}

.model-header {
    z-index: 10002 !important;
}

.detailpage {
    position: absolute;
    left: 90px;
    top: 80px;
    display: inline-block;
}

.page-link,
.breadcrumb-link,
.active-link {
    color: #248700 !important;
}


.page-item.active a{
    background-color: #248700 !important;
    border-color: #248700 !important;
    color: #fff !important;
} 

.page-item.disabled a{
    color: grey !important;
    cursor: not-allowed !important;
}

.info-icon {
    color: #636c72;
    font-size: 15px;
    margin-left: 10px;
    position: relative;
    top: 2px;
}

.format-long-txt {
    white-space: -moz-pre-wrap !important;
    /* Mozilla, since 1999 */
    white-space: -pre-wrap;
    /* Opera 4-6 */
    white-space: -o-pre-wrap;
    /* Opera 7 */
    white-space: pre-wrap;
    /* css-3 */
    word-wrap: break-word;
    /* Internet Explorer 5.5+ */
    white-space: -webkit-pre-wrap;
    /* Newer versions of Chrome/Safari*/
    word-break: break-all;
    white-space: pre-line;
}

.para-line-txt {
    white-space: -moz-pre-line !important;
    /* Mozilla, since 1999 */
    white-space: -pre-line;
    /* Opera 4-6 */
    white-space: -o-pre-line;
    /* Opera 7 */
    white-space: pre-line;
    /* css-3 */
    word-wrap: break-word;
    /* margin-top: -1rem; */
}

.btn-toolbar {
    display: inline-block;
}

.btn-toolbar-custom {
    display: block !important;
}

/* Table styles*/

.table td, .table th {
    max-width: 300px;
    min-width: 60px;
    font-size: small !important;
    padding: .4rem !important;
    vertical-align: middle !important;
    overflow:hidden;
    white-space:nowrap;
    text-overflow: ellipsis;
}

.table-bordered-custom,
.table-bordered-custom3 {
    border: 1px solid #ddd;
    vertical-align: middle !important;
}

.table-bordered-custom2 td,
.table-bordered-custom2 th {
    border: 1px solid #ddd;
    vertical-align: middle !important;   
}

.table-bordered-custom3 td {
    padding: 0 0 0 20px !important;
    vertical-align: middle !important;
}

.table-acc-pagesize-drop-down{
    width:60px; 
    height:27px !important; 
    font-size: 0.75em; 
    padding:2px;
}

.table-acc-pagesize-export-btn{
    height:27px; 
    font-size: 0.75em; 
    padding:2px 10px;
}

.table-bordered-custom .hidden_row { 
    display: none; 
} 

.table-bordered-custom .hasTooltip span {
    display: none;
    color: #000;
    text-decoration: none;
    padding: 3px;
}

.table-bordered-custom .hasTooltip:hover span {
    display: block;
    position: absolute;
    background-color: #FFF;
    border: 1px solid #CCC;
    margin: 2px 10px;
}

.details-panel {
    border: 1px solid #cccccc;
    padding: 0;
    margin: 0;
}



/* FORM*/

.form-container {
    margin: 10px;
    border: 1px solid #e3e3e3;
    padding: 2rem 2rem 10px 2rem;
    margin-bottom: 30px;
}

.form-control-feedback {
    font-size: 13px;
    font-weight: normal;
}

.form-control{
    font-size: 0.85rem;
 }

/* END FORM*/

/* SIDE NAV STYLES */

.sidenav-column {
    padding: 0;
    overflow-y: auto;
    background-color: #F5F6F8;
}

/* .sidenav-name {
	font-family: 'Open Sans', sans-serif; 
	font-weight: 500; 
	color: #2A2C2E;
	font-size: 16px;
} */

.sidenav-active {
    background-color: #ffffff !important;
    /* font-family: 'Open Sans', sans-serif;  */
    font-weight: 600 !important;
    color: #4b286d !important;
    ;
    border-right: 1px solid #ffffff !important;
    border-left: 3px solid #4b286d !important;
}

.sidenav-active-woLBorder {
    background-color: #ffffff !important;
    /* font-family: 'Open Sans', sans-serif;  */
    font-weight: 600 !important;
    border-right: 1px solid #ffffff !important;
}

.sidenav-tab {
    padding: 10px;
    border-bottom: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
    border-top: 1px solid #cccccc;
    background-color: #F5F6F8;
    overflow-x: hidden;
    display: flex !important;
}

.sidenav-tags {
    height: 18px;
    font-size: 11px;
    display: block;
    margin-top: 3px;
    margin-bottom: 5px;
}

.sidenav-tags-purple {
    border: 1px solid #9564c6;
    border-radius: 5px;
    padding: 0 3px 2px 3px;
    color: #9564c6;
    display: inline-block;
}

.sidenav-tags-grey {
    border: 1px solid #54595F;
    border-radius: 5px;
    padding: 0 3px 2px 3px;
    display: inline-block;
    color: #54595F;
}

.sidenav-icon-bg {
    width: 40px;
    color: white;
    text-align: ceter;
}

.green-bg {
    background-color: #248700;
}

.purple-bg {
    background-color: #4b286d;
}

.red-bg {
    background-color: #d5212E;
}

.orange-bg {
    background-color: #ffa500;
}

.grey-bg {
    background-color: #808080;
}

.dark-grey-bg {
    background-color: #54595F;
}

.green-bg {
    background-color: #2B8000;
}

.light-grey-bg{
    background-color: #8080805c;
}

.border-right-2 {
    border-right: 2px dashed #fff;
}

.border-right-1 {
    border-right: 1px solid #fff;
}

.border-bottom-1 {
    border-bottom: 1px solid #ddd;
}

.border-1 {
    border: 1px solid #ddd;
}

.warning {
    color: #ffa500;
}

.sidenav-line-separator {
    border-left: 1px solid #cccccc;
    width: 80% !important;
}

.sidenav-border-left {
    border-top: none;
    overflow: hidden;
    display: block !important;
}

.green-left-border {
    border-left: 20px solid #248700;
}

.purple-left-border {
    border-left: 20px solid #4b286d;
}

.orange-left-border {
    border-left: 20px solid #ffa500;
}

.grey-left-border {
    border-left: 20px solid #808080;
}

.green-txt{
    color: #248700;
}

.red-txt{
    color: red;
}

.orange-txt{
    color: orange;
}

.grey-txt{
    color: #808080;
}

.light-grey-txt{
    color: #8080805c;
}

.light-blue-txt{
    color: #5bc0de;
}




.sidenav-icon-img {
    height: 35px;
    position: relative;
    top: 5px;
}

.pwn-icon {
  height: auto;
  max-width: 100%;
}

a.sidenav-suboptions[aria-expanded="false"]::after {
    content: " \f0da";
    font-family: FontAwesome;
    display: inline;
    text-align: right;
    text-decoration: none !important;
}

a.sidenav-suboptions[aria-expanded="true"]::after {
    content: " \f0d7";
    font-family: FontAwesome;
    display: inline;
    text-align: right;
    text-decoration: none;
}

.sidenav-icon-no {
    position: relative;
    top: 15px;
    left: 15px;
}

.sidenav-status {
    color: #54595F;
    font-size: 12px;
    display: block;
    /* width: auto; */
}

.sidenav-headings {
    /* font-family: 'Open Sans', sans-serif; */
    font-weight: 700;
    line-height: 18px;
    color: rgb(1, 0, 0);
    font-size: 21px;
    margin-top: 15px;
}

.sidenav-detail {
    font-family: "Open Sans", sans-serif;
    font-size: 15px;
    padding-bottom: 10px;
    margin: 0.25rem 0.25rem 0.25rem 1rem;
    /* margin-left: 20px; */
    /* margin-bottom: 10px; */
}

.sub-title {
    margin: 20px 0 0 0;
}

.sub-section-header {
    margin-top: 30px;
}

.emptyRecords {
    border: 1px dashed #cccccc;
    text-align: center;
    padding: 1rem;
    margin-bottom: 20px;
}

.dashed-box {
    border: 1px dashed #cccccc;
    padding: 1rem;
    margin-bottom: 10px;
}

.bolder {
    font-weight: 500;
    color: #54595f;
    font-size: 15px;
}

.mandatory {
    color: red;
    font-size: 16px;
    padding-left: 5px;
    font-weight: 600;
}

.form-end-divider {
    border-top: 1px solid #66cc00;
    padding-top: 20px;
}

/* Button styles */

.form-btn-group {
    float: right;
    margin-left: 10px;
}

/* Search Start */

.search-btn {
    border-color: #c5c5c5;
    border-left: none;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    background-color: #fff !important;
    color: #4b286d;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    cursor: pointer !important;
}

.search-btn:hover {
    background-color: #4b286d !important;/* Purple */
    color: white;
}

.choiceBtns{
	padding: 1.75rem 1rem !important;
	font-weight: 600;	
}

.advanced-search-form-label {
    font-size: 0.85em;
    font-weight: 500;
    margin-top: 5px;
}

.advanced-search-btn {
    color: #248700;
}

.advanced-search-btn:hover {
    color: #248700;
    border: none;
}

.advanced-search-btn:active {
    color: #248700;
    border: none;
}

.advanced-search-panel {
    background-color: #f9f9f9;
    border: 1px solid #e3e3e3;
}

/* Search End */

/* Buttons Start */

.cta-btn {
    border: 1px solid #248700;
    /* Telus Green */
    background-color: #248700 !important;
    margin-left: 10px;
    font-size: 15px;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    cursor: pointer !important;
}

.cta-btn:hover {
    background-color: #35c100 !important;
    /* lighter green */
    color: white;
    border: 1px solid #35c100 !important;
}

.cta-del-btn {
    border: 1px solid #c71f1f; /* Red */
    background-color: #c71f1f !important;
    margin-left: 10px;
    font-size: 15px;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    cursor: pointer !important;
}

.cta-del-btn:hover {
    background-color: #f60909 !important; /* lighter red */
    color: white;
    border: 1px solid #f60909 !important;
}

.cta-btn-outline {
    border: 1px solid #c5c5c5;
    background-color: #fff !important;
    margin-left: 10px;
    font-size: 15px;
    color: #4b286d;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    cursor: pointer !important;
}

.cta-btn-outline:hover {
    background-color: #4b286d !important;
    /* Purple */
    color: white;
    border: 1px solid #4b286d !important;
}

.cta-btn-outline.active {
    background-color: #4b286d !important;
    /* Purple */
    color: white;
    border: 1px solid #4b286d !important;
}

.btn-secondary:disabled,
.btn-primary:disabled {
    cursor: not-allowed !important;
}

.cta-btn-sec {
    border: 1px solid #4b286d;
    /* Purple */
    background-color: #4b286d !important;
    color: #fff !important;
    font-size: 13px;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    cursor: pointer !important;
}

.cta-btn-sec:hover {
    background-color: #6a399b !important;
    /* Dark purple */
    color: white;
    border: 1px solid #6a399b !important;
}

.cta-btn-outline-sm {
    cursor: pointer !important;
}

.cta-btn-outline-sm:hover {
    background-color:  #c5c5c5 !important;
}

/* Buttons End */

/* Placeholders */

.placeholders {
    padding-bottom: 3rem;
}

.placeholder img {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.sub-menu {
    padding-left: 15px;
    margin-left: 0px;
}

.link {
    clear: both;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    color: #000;
    text-align: left;
}

.sols-subtabs {
    border-bottom: 1px solid #cccccc;
    padding: 10px 0;
    margin-bottom: 20px;
}

/* Tabs Pills */

.nav-pills a.nav-link .nav-tabs.nav-link {
    color: #248700 !important;
}

.nav-link.disabled {
    color: grey !important;
    cursor: not-allowed !important;
}

.dropdown-item.disabled {
    color: grey !important;
    cursor: not-allowed !important;
}

.nav-pills .nav-link.active {
    background-color: #cccccc !important;
    color: #4b286d !important;
}

/*End Tabs Pills */

/*  ng-Quill Start */
.telusiot-editor > div:first-child,  .ql-container{
	min-height:300px;
}
/*  ng-Quill End */

.showHideLink {
    display: block;
    font-weight: bold;
    color: #000;
    margin: 15px 0px;
    cursor: pointer;
}

.showHideLink:link,
.showHideLink:hover {
    text-decoration: none;
}

.svgimage {
    margin-right: 8px;
}

#jasper1,
#eseye1,
#eseye2,
#jasper3,
#jasper4,
#jasper5,
#chart_tbm {
    height: 100%;
}

.search_all {
    position: relative;
    top: 10px;
    left: -50px;
    height: 33px;
    border-radius: 5px;
    box-shadow: none;
    padding-left: 50px;
    border: none;
}

.search {
    position: absolute;
    top: 15px;
    left: -40px;
}

.dataTables_wrapper {
    padding: 0 0 1rem 0;
}

.icons {
    margin-right: 20px;
    height: 28px;
    width: 28px;
}

.border-bottom {
    border-bottom: 1px solid #303030;
    height: 61px;
    padding-top: 0;
}

.border-bottom:hover,
.border-bottom:active,
.border-bottom:visited {
    background-color: #000;
}

.heading4 {
    margin-bottom: 25px !important;
}

.options {
    text-align: right;
    cursor: pointer !important;
    /*width: 100%;*/
}

#dropdown_options {
    margin-bottom: 25px;
    padding: 5px;
    /*width: 100%;*/
}

.columns {
    margin-bottom: 25px;
    padding: 5px;
}

.push-text-right {
    text-align: right !important;
    padding-right: 50px;
}

.column_filter {
    margin: 10px 0px;
}

.sub-heading {
    background-color: #d6d6d6;
    height: 50px;
    padding: 13px 20px;
    font-size: 18px;
}

.box-area {
    border-bottom: 1px solid #b2b2b2;
    height: 140px;
    /*height: 200px;*/
    text-align: left;
}

.box-area-update {
    /* border-bottom: 1px solid #b2b2b2; */
    height: auto;
    text-align: left;
    padding-bottom: 20px;
}

.margin-top-20 {
    margin-top: 20px;
}

.red-star {
    font-style: italic;
    /* background-image: url(http://orig00.deviantart.net/d840/f/2010/324/2/4/pixel__red_star_by_apparate-d337m7b.gif);
    background-repeat: no-repeat;
    background-position: 73% 50%;*/
    text-align: right;
    display: inline;
    position: absolute;
    right: 0;
    bottom: 0;
}

.red-start-error {
    width: 10px;
    height: 10px;
    margin-right: 10px !important;
}

.box-numbers {
    font-size: 36px;
    display: inline-block;
}

.indicator-icon {
    margin-bottom: 10px;
    display: inline-block;
}

.box-time {
    font-size: 14px;
    display: inline-block;
}

.box-area-large {
    height: 100px;
    padding-top: 15px;
    text-align: left;
}

.border-right {
    border-right: 1px solid #b2b2b2;
}

.more-widget {
    position: relative;
    top: 160px;
}

.tools-widget {
    top: 100px;
}

.sup-text {
    left: 14em;
    height: 15px;
    width: 70px;
    background-color: #ff0000;
    display: block;
    padding-top: 8px;
    top: -3em;
    text-align: center;
    border-radius: 5px;
    color: #fff;
}

.lable-customers {
    display: inline-block;
    background-color: #fff;
    padding: 4px 11px;
    font-family: Arial;
    font-size: 16px;
}

input[type="radio"]:checked+label {
    background-color: #b7b7b7;
}

input[type=search] {
    font-weight: normal;
    font-size: 15px;
    color: #cccccc;
}

.lable-customers {
    margin-left: -4px;
    width: 60px;
    text-align: center;
    border: 1px solid #b7b7b7;
}

.radio_buttons {
    position: relative;
    top: -65px;
    left: 400px;
    width: 150px;
}

.select_options {
    padding: 20px;
}

.create-new option:first-child {
    background-color: #cdb6e4;
    color: #4b286d;
}

.customer_options {
    width: 250px;
    height: 40px;
    border-radius: 3px;
    padding-left: 20px;
    background-color: white;
    border: 1px solid #c5c5c5;
    color: #4b286d;
    cursor: pointer;
}

.customers_result {
    display: inline-block;
    padding-left: 20px;
}

.progressBar-pos {
    clear: both;
    position: relative;
    background-color: #ccc;
}

.table_filter {
    display: block;
    text-align: right;
    /*margin-bottom: 30px;*/
}

.hidden {
    display: none;
}

.user-options {
    background-color: #5fbd00;
    height: 75px;
    width: 150px;
    position: absolute;
    top: 58px;
    text-align: center;
    right: 0px;
    cursor: pointer !important;
}

.user-links {
    height: 30px;
    padding-top: 10px;
}

.profile,
.settings,
.logout {
    color: #fff !important;
}

.dashboard-back {
    font-size: 18px !important;
    color: black !important;
}

.datavalue1 {
    margin-right: 35px;
    display: inline-block;
}

.datavalue {
    display: inline-block;
    margin-right: 15px;
    margin-top: 10px;
}

.current {
    background-color: #000;
}

.assignupdateForm {
    text-align: left;
}

.assignupdateButton {
    margin-top: 20px;
}

.user-profile {
    margin-right: 30px;
    padding-right: 40px !important;
    color: #fff !important;
}

/*.user-profile {
    background-image: url("https://d2a072wq521u33.cloudfront.net/kineticimages/images/dropdown-arrow.png");
    background-repeat: no-repeat;
    background-position: 70%;
}*/

.usericon {
    margin-right: 10px !important;
}

.dorpdown-more {
    display: none;
    padding-left: 50px;
    padding-top: 15px;
}

.add-user {
    font-size: 30px;
    /*position: relative;
    top: -55px;
    left: 590px;*/
    text-decoration: none !important;
    margin-right: 30px;
    margin-top: -58px;
}

.authbar {
    text-align: left;
    font-size: 18px;
    color: red;
    /*background-color: #a94442;*/
}

.userspage {
    position: relative;
    top: -20px;
}

.userformlabel {
    text-align: left;
}

.has-error {
    color: red;
    text-align: left;
}

.showmorePointer {
    /*display: none;*/
    /* position: relative;
    left: 170px;
    top: -40px;*/
}

.dropdownopen {
    background-image: url("../images/show_all.png");
    background-repeat: no-repeat;
    background-position: 90%;
    background-size: 12px;
}

.tools-showless {
    background-image: url("../images/show_none.png");
    background-repeat: no-repeat;
    background-position: 90%;
    background-size: 12px;
    /*z-index: 9999;*/
}

.usersuccessmsg {
    position: relative;
    top: -140px;
    /*left: 50%;*/
}

.downloadablefile {
    padding-top: 15px;
    text-align: left;
}

.server-log {
    /*overflow: auto;*/
    margin-bottom: 150px;
}

.fileDownload {
    color: white;
}

.fileDownload:hover,
.fileDownload:link {
    color: white !important;
}

.info-text {
    display: inline-block;
    padding-top: 10px;
    color: red;
    font-style: italic;
}

.info-text-server {
    display: none;
    padding-top: 10px;
    color: red;
    font-style: italic;
}

.logText {
    overflow: auto;
}

.tool-form {
    margin-bottom: 150px;
}

.heading_names {
    width: 25%;
    border-radius: 3px;
    border: 1px solid #b7b7b7;
}

.chooseColmn {
    font-weight: bold;
}

.tooltip-inner {
    max-width: 350px;
}

.toottipkey {
    background-image: url("../images/tooltip.png");
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: 100%;
    width: 40%;
}

.modal-open .modal {
    margin-top: 50px !important;
}

.modalClose {
    padding-right: 0px !important;
}

#cover {
    display: none;
    background: url("../images/loading.gif") no-repeat;
    background-position: 50% 20%;
    position: absolute;
    height: 2000px;
    width: 100%;
    z-index: 99;
    background-color: #000;
    opacity: .6;
    background-size: 40px;
    top: 0;
}
.display-flex{
    display: flex !important;
}
.jasperSimTotal{
    width: 25%;
    border: 1px solid #000;
    text-align: right;
    padding-right: 5px;
    padding-top: 10px;
}

.jasperTotal {
    width: 30%;
    border: 1px solid #000;
    padding-left: 51px;
    padding-top: 10px;
}
.jasperMonthlyTotal{
    width: 20%;
    border: 1px solid #000;
    text-align: right;
    padding-right: 5px;
    padding-top: 10px;
}
@media ( min-width: 320px) and (max-width: 575px) {
    .options {
        text-align: left;
    }
    .cta-btn {
        margin-top: 20px;
        margin-left: 0;
    }
    .logo-bg {}
    .card-deck .card:not(:last-child) {
        margin-right: 0 !important;
        margin-bottom: 15px;
    }
    .card-deck .card:not(:first-child) {
        margin-left: 0 !important;
    }
}

@media ( min-width: 576px) and (max-width: 767px) {
    .options {
        text-align: left;
    }
    .logo-bg {
        height: auto;
    }
    .card-deck .card:not(:last-child) {
        margin-right: 0 !important;
        margin-bottom: 15px;
    }
    .card-deck .card:not(:first-child) {
        margin-left: 0 !important;
    }
}

@media ( min-width: 768px) and (max-width: 991px) {
    .cta-btn {
        position: relative;
        right: 7rem;
    }
    .logo-bg {
        height: auto;
    }
    /* .sidenav-line-separator{ */
    /* border-left: 1px solid #cccccc; */
    /* width: auto;
	} */
}

@media ( min-width: 992px) {
    .cta-btn {
        /*  margin-top: 20px;
    	margin-left: 0; */
        /* position: relative;
    right: 7rem; */
    }
    .logo-bg {
        max-height: 275px;
    }
    /* .sidenav-line-separator{ */
    /* border-left: 1px solid #cccccc; */
    /* width: auto;
	}
 */
}

@media ( min-width: 1680px) {
    .inner-bg {
        margin-top: 10%;
    }
    .customer-flags {
        width: 20%;
    }
}

.jqx-fill-state-normal {
    background: #fff;
    padding: 0;
    right: 0 !important;
    left: auto;
}

/* basic styling for entering and leaving */

/* left and right added to ensure full width */

.form-views.ng-enter,
.form-views.ng-leave {
    position: absolute;
    left: 30px;
    right: 30px;
    transition: 0.5s all ease;
    -moz-transition: 0.5s all ease;
    -webkit-transition: 0.5s all ease;
}

/* enter animation */

.form-views.ng-enter {
    -webkit-animation: slideInRight 0.5s both ease;
    -moz-animation: slideInRight 0.5s both ease;
    animation: slideInRight 0.5s both ease;
}

/* leave animation */

.form-views.ng-leave {
    -webkit-animation: slideOutLeft 0.5s both ease;
    -moz-animation: slideOutLeft 0.5s both ease;
    animation: slideOutLeft 0.5s both ease;
}

/* ANIMATIONS

/* slide out to the left */

@keyframes slideOutLeft {
    to {
        transform: translateX(-200%);
    }
}

@-moz-keyframes slideOutLeft {
    to {
        -moz-transform: translateX(-200%);
    }
}

@-webkit-keyframes slideOutLeft {
    to {
        -webkit-transform: translateX(-200%);
    }
}

/* slide in from the right */

@keyframes slideInRight {
    from {
        transform: translateX(200%);
    }
    to {
        transform: translateX(0);
    }
}

@-moz-keyframes slideInRight {
    from {
        -moz-transform: translateX(200%);
    }
    to {
        -moz-transform: translateX(0);
    }
}

@-webkit-keyframes slideInRight {
    from {
        -webkit-transform: translateX(200%);
    }
    to {
        -webkit-transform: translateX(0);
    }
}

.fadeIn-setup,
.fadeOut-setup {
    -webkit-transition: 1s linear opacity;
    -moz-transition: 1s linear opacity;
    -o-transition: 1s linear opacity;
    transition: 1s linear opacity;
}

.fadeIn-setup {
    opacity: 0;
}

.fadeOut-setup {
    opacity: 1;
}

.fadeIn-setup.fadeIn-start {
    opacity: 1;
}

.fadeOut-setup.fadeOut-start {
    opacity: 0;
    padding-right: 0px !important;
}

.custom-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-gap: 20px;
    background-color: #e3e3e3;
    border: 1px solid #e3e3e3;
    padding: 2rem;
    margin-bottom: 30px;
  }
  
  .grid-box {
    background-color: #4b286d;
    color:#fff;
    border-radius: 5px;
    padding: 10px;
    font-size: 1rem;
    font-weight: 300;
    width: 50%;
    height: 100px;
    margin: auto;
    display: flex;
  }

  .grid-box-contents{
      align-self: center;
      margin: auto;
      text-align: center;
  }

  .grid-box:hover{
    background-color: #248700;
    color: #fff;
    cursor: pointer;
  }

  .jqx-grid-cell-pinned {
    background-color: #fff;
}
.iframe-size {
    width: 100%;
    height: calc(100vh - 250px) !important;
}

h3 svg {
    font-size: 16px !important;
    margin-bottom: 10px !important;
}

.width-auto {
    width: auto !important;
}

.ng-submitted .form-control.ng-invalid {
        border: 1px solid red !important;
}

.no-space-list {
  padding-left: 0;
  margin-left: 0;
  list-style-position: inside; /* Ensures the list numbers are inside the list */
}

.no-space-list li {
  margin: 0;
  padding: 0;
}

.getting-started-table {
  width: 100%;
  border-collapse: collapse; 
  margin-bottom: 16px;
}

.getting-started-table th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
  white-space: normal;
}

.getting-started-table  th {
  font-weight: bold;
}

.non-connectivity-table td, .non-connectivity-table th {
  font-size: 11px !important;
}

.action-grey-td {
  background-color: #F0F0EE;
  text-align: center;
}

/* Container for Squares */
.opp-squares-container {
    display: flex;
    align-items: center; /* Vertically align squares */
    justify-content: flex-start; /* Align squares to the left */
    gap: 20px; /* Small space between squares */
}

/* Individual Squares */
.opp-square {
    width: 250px;
    height: 100px;
    border: 1px solid #ccc;
    text-align: left;
    font-size: 13px;
    padding: 10px;
    white-space: normal;
    display: inline-block;
}

.fw-bold {
  font-weight: bold;
}

.opp-workflow-wrapper {
  padding: 10px 20px;
}

.opp-slider-square {
    width: 200px;
    text-align: center;
    position: relative; /* For pagination positioning */
    margin: 0 auto;
    box-sizing: border-box;
    background-color: #fff;
}

.opp-pagination-indicator {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 12px;
    font-weight: bold;
    color: #4b286d;
    padding: 2px 5px;
    border-radius: 3px;
}

.opp-slider-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.opp-slider-arrow {
    font-size: 16px;
    font-weight: bold;
    color: #4b286d;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.opp-slider-arrow:hover {
    color: inherit;
}


.badge-renewal {
    background-color: #2196f3;
    color: white;
  }

.badge-amendment {
    background-color: #ff9800;
    color: white;
  }

.badge-related {
    background-color: #4caf50;
    color: white;
  }

.badge-supersedes {
    background-color: #e91e63;
    color: white;
  }

.badge-addendum {
    background-color: #9c27b0;
    color: white;
  }