@font-face {
   font-family: 'Roboto', sans-serif;;
   src: url(Roboto-Regular.ttf);
} 
.clearfix{ clear:both; display:block; }
body{font-family: 'Roboto', sans-serif !important; min-height: 90vh; font-weight: 500;}
.page-bg{background-color: #fff;}/*E3E3E3*/

/*@media(min-width:768px){
    .page-bg{background-color: #000;}
}*/

.page-bg a{cursor: pointer;}
/*.bg-white{min-height: 100vh;}*/
#debug-icon{display: none !important;}
a{color: var(--primary-color);}
a:hover{color: var(--primary-color);text-decoration: none;}
footer{position: sticky;top:100%;min-height:auto;}
/*.bg-white{min-height: 100vh;}*/

.BG-Grey{background-color: #D8D8D8; border-color: #979797 !important;}

.alert img{width: 38px!important;height: 40px;}
.alert svg{width: 38px!important;height: 40px;fill: #B1822D;background-color: B1822D;color: #B1822D;}
.alert-warning{background: linear-gradient(0deg, rgba(255, 158, 0, 0.03), rgba(255, 158, 0, 0.03)), #FFFFFF;border: 1px solid #FF9D00;border-radius: 3px;font-weight: 600;color: #000;font-size: 16px;}
.alert-warning:before {
    content: '';
    background: #FF9D00;
    width: 9px;
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0px;
    }
.alert-danger{background: linear-gradient(0deg, rgba(228, 7, 7, 0.03), rgba(228, 7, 7, 0.03)), #FFFFFF; border: 1px solid #E40707;border-radius: 3px;font-weight: 600;color: #000;font-size: 16px;}
.alert-danger:before {
    content: '';
    background: #E40707;
    width: 9px;
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0px;
    }

.alert-success{background: linear-gradient(0deg, rgba(0, 186, 49, 0.03), rgba(0, 186, 49, 0.03)), #FFFFFF;
border: 1px solid #00BA31;border-radius: 3px;font-weight: 600;color: #000;font-size: 16px;}
.alert-success:before {
    content: '';
    background: #00BA31;
    width: 9px;
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0px;
    }

.footer-wrapper{padding: 1rem 2rem;border-top: 2px solid #312d45;}
.que-icon{font-weight: 400;width: 12px;height: 12px;line-height: 12px;color: var(--primary-color);fill: var(--primary-color);}
.change-icon{font-weight: 400;width: 12px;height: 12px;line-height: 12px;color: var(--primary-color);fill: var(--primary-color);}
.right-icon{font-weight: 400;width: 12px;height: 12px;line-height: 12px;color: #3BB702;fill: #3BB702;}
.bordergrad{background-image: linear-gradient(150deg,#b18738 10.1%,white 10.7%,#36354b 11%);height: 10px; margin: auto;}
.file-icon{font-weight: 400;width: 12px;height: 16px;line-height: 16px;color: var(--primary-color);fill: var(--primary-color);}
.left-icon{font-weight: 400;width: 14px;height: 16px;line-height: 16px;color: #153468;fill: #153468;}
.mobile-bg{background-color: #F0F2FF;line-height: 61px;margin-bottom: 20px;}
.fix-header{position: sticky;top: 0;width: 100%;height: 45px;z-index: 1;background-color: #fff;}
.centeritem{align-items: center;}
.h-100vh{height: 100vh;}
.w-10{width: 10%;}
.w-30{width: 30%;}
.w-40{width: 40%;}
.w-60{width: 60%;}
.w-20{width: 20%;}
.w-5{width: 5%;}
.linkcursor{cursor: pointer;}
.fw-700{font-weight: 700;}
.fw-400{font-weight: 400;}
.conform-txt{font-size: 14px;margin-bottom: 5px;}
h2.h-color{font-size: 28px;}
.heading-wrapper p{font-size: 16px;}
.terms-p{font-size: 13px;}
.home-metere{width: 466px;height: 114px;}
.fuel-txt{font-weight: 500;font-size: 12px;line-height: 14px;text-align: center;color: #000;margin-bottom: 0px;/*margin-top: 7px;*/}
.loginbtn{display: block;margin: 1rem 2rem;/*background: #B1822D;border: #B1822D;*/background: #B1822D;border: #B1822D;color: white;font-weight: 500;width: 286.63px;height: 50px;border-radius: 7px;}
/*.loginbtn:hover{background: #233968;border: #233968;}*/
.loginbtn:hover, .loginbtn:focus, .loginbtn:active{color: white;box-shadow: none;}
.h-color{color: #153468;}
.p-07{padding: 0.7rem;}
.m-06 {margin: 0.6rem auto !important;}
.w-10{width: 10rem;}
.btnmar{margin: 0.6rem auto;}
.header-logo{width: 35%;}
.icon-bell-head{padding-left: 20px;padding-right: 20px;padding-top: 12px;}
.icon-user-head{padding-right: 20px;}
.icon-set a{color: #000;}
.icon-set a svg{fill: #000;}
.fa-bell-o:before{position: relative;}
.msg-width{width: 50%;}
.boat-txt{font-weight:400;font-size: 16px;color: #fff;margin-right: 13px;}

@media(min-width:992px){
    .boat-txt{color: #000;}
}

.badge-red {
    position: absolute;
    top: 5px;
    font-size: 12px;
    line-height: 14px;
    font-weight: 400;
    color: #fff;
    border-radius: 50% !important;
    right: 0;
    /* line-height: 16px; */
    /* padding-left: 3px; */
    /* text-align: center; */
    /* left: auto; */
    /* background-color: #C01515!important; */
    width: 20px;
    height: 20px;
}

/*.badge-red{    position: absolute;
    top: 10px;
    font-size: 14px;
    padding-top: 6px;
    font-weight: 400;
    color: #fff;
    border-radius: 50% !important;
    left: 22%;    
    width: 25px;
    height: 25px;
}*/
/*.form-control{width: 336px;height: 45px;}*/
/*.input-group-append.icon-eye {margin-left: -15px;}*/
form label{color: #6A6A6A;}
.form-control{color: #979797;height: 45px;}
input.form-control{color: #6a6a6a;}
select.form-control{color: #6a6a6a; position: relative; appearance: none;}
.head-user{width: 21px;height: 26px;}
.head-logout{width: 33px;height: 26px;}
.modal-head{font-size: 28px;color: var(--primary-color);}
/*select#inputState{color: #979797;}
select#inputState:selected{color: #333333;}*/
.boat-list-mob{display: none;float: right;padding-top: 5px;}
.hideonlg_ span{display: block;}
.text-userinput{color: var(--primary-color);}
.header-menu .collapse ul li:hover{background-color: #FAFAFA;}
.forgot-pass-txt{font-weight: 300;margin-top: 20px;font-size: 16px;line-height: 19px;text-align: center;color: #000000;}
.navbar .navbar-nav li a:hover{color: var(--primary-color);}
/*.navbar .navbar-nav li:hover svg path{fill: #233968;color: #233968;background-color: #233968;}*/
.navbar .navbar-nav li:hover .ac-head-icons .icon-head, .navbar .navbar-nav li:hover{fill: var(--primary-color);color: var(--primary-color);background: #fff;border: 1px solid #000;font-weight: 400;}
/*.navbar .navbar-nav li.active .ac-head-icons .icon-head, .navbar .navbar-nav li.active a {
    fill: #AB8238;
    color: #AB8238;
    background: #FAFAFA;
    padding-top: 15px;
}*/
.nav-item.active{fill: #fff;color: var(--primary-color);background: #fff;border: 1px solid #000;font-weight: 700;}
.navbar .navbar-nav li:hover .ac-head-icons .icon-head, .navbar .navbar-nav li:hover a{color: var(--primary-color);font-weight: 700;}
.dropdown:hover .dropbtn:after{
      content: "";
    position: absolute;
    border-color: rgba(194, 225, 245, 0);
    border: solid transparent;
    border-bottom-color: #F1F6FF;
    border-width: 11px;
    margin-left: -10px;
    top: 20px;
    right: 20px;
    z-index: 1;
}
.themebtn_colored {
    display: block;
    margin:1rem auto 0;
    background: var(--primary-color);
    border: 1px solid #3E79DA;
    color: #fff;
    font-weight: 500;
    width: 216px;
    height: 50px;
    border-radius:25px;
    font-size: 18px;
}
.btn.text-maroon {
    display: block;
    /*margin:1rem auto 0;*/
    background: #FFFFFF;
    border: 1px solid #E40707;
    color: white;
    font-weight: 500;
    width: 216px;
    height: 50px;
    border-radius:25px;
    font-size: 18px;
}
.themebtn_colored-big {
    /*display: block;*/
    /*margin: 1rem auto;*/
    background: #B1822D;
    border: #B1822D;
    color: white;
    font-weight: 500;
    width: 288px;
    height: 50px;
    border-radius: 7px;
    font-size: 18px;
}
.themebtn_colored-big:hover{background: #233968;border: #233968;}
.themebtn_colored-big:hover, .themebtn_colored-big:focus, .themebtn_colored-big:active{color:white; box-shadow: none;}
.themebtn_gray-big {
    /*display: block;
    margin: 1rem auto;*/
    background: #BDBDBD;
    border: #b0822c;
    color: #535353;
    font-weight: 600;
    width: 288px;
    height: 50px;
    border-radius: 7px;
    font-size: 18px;
}

.savediscardBtn .themebtn_colored,
.savediscardBtn .themebtn_gray{ margin:10px auto 0; display:inline-block; }
.savediscardBtn {
    text-align: center;
}

@media(min-width:992px){
    .savediscardBtn .themebtn_colored,
    .savediscardBtn .themebtn_gray{ margin:0px auto 0;}
}

.onlyeye .input-group-text {
            background-color: white !important;
            /*border-bottom: 1px solid #ced4da!important;
            border-top: 1px solid #ced4da!important;
            border-right: 1px solid #ced4da!important;
            border-left: 0!important;*/
}
.ac-head-icons{width: 22px;height: 20px;padding-right: 5px;margin: -3px 0 0 0;}
.icon-head{fill: #fff;color: #fff;background-color: #fff;}
.icon-pre-head-white{fill: #fff;color: #fff;background-color: #fff;}
.icon-pre-head{fill: #233968;color: #233968;background-color: #233968;}
.input-group:focus, .form-group: focus{border-color: #80bdff;}
.onlyeye .noborder{border-right: 0;border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important;}
.onlyeye .noborder:focus {
    border-right: 0;
}
.mob-footer{display: none;padding: 30px 0 0 0;}
.themebtn_gray-big:hover, .themebtn_gray-big:focus, .themebtn_gray-big:active{color: #535353;box-shadow: none;}
.text-blue{color: #153468;}
.text-gray{color: #6D7278;}
.text-desc{color: #6A6A6A;}
.txt-gray{color: #333;font-weight: 500;}/* color: #6A6A6A; */
.text-green{color: #3BB702;}
.bg-blue{background-color: #AB8238;}
.bg-yellow{background-color: #AB8238;}  
.bg-black{background-color: #000000;}    
.nav-height{height: 50px;}
.nav-item{margin-top: auto;margin-bottom: auto;padding: 6px 5px;height: 50px;font-weight: 400; border: 1px solid #000;}
.nav-item:hover{fill: #AB8238;color: #AB8238;background: #FAFAFA;}
.nav-item.active a{fill: var(--primary-color);color: var(--primary-color);font-weight: 700;}
.nav-item.active a .icon-head{fill: var(--primary-color)!important;color: var(--primary-color);font-weight: 700;}
/*.nav-item .nav-link{color: #F8F8F8;font-size: 16px;font-weight: 700;line-height: 21px;}*/
.nav-item .nav-link {
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    line-height: 21px;font-family: 'Roboto';}

@media(min-width:992px){
    .nav-item .nav-link {
        font-size: 16px;
        line-height: 19px;
    }
}
@media(min-width:1200px){
    .nav-item .nav-link {
        font-size: 18px;
        line-height: 21px;
    }
}
.bg-gray{background-color: #eee;}
.font-10{font-size: 10px !important;}
.font-12{font-size: 12px !important;}
.font-14{font-size: 14px;}
.font-15{font-size: 15px !important;}
.font-16{font-size: 16px !important;}
.font-18{font-size: 18px;}
.font-26{font-size: 26px;}
.head-tag{font-size: 18px;}
.fs-sm-13{font-size: 16px;}
/*.themebtn_colored:hover{background: #233968;border: 1px solid #233968;}*/
.onlyeye .material-symbols-outlined{line-height: 30px;}
/*.icon-eye{height: 44.2px;margin-left: -15x;}*/
.themebtn_colored:hover, .themebtn_colored:focus, .themebtn_colored:active{color:white; box-shadow: none;}
.header-menu ul, .footer-text ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;}
/*.header-menu ul li, */
.footer-text ul li {float: left;}
.header-menu ul li a{font-weight: 400;font-size: 20px;line-height: 51px;color: #AB8238;}
/*.footer-text ul li a{display: block;color: #6A6A6A;text-align: center;padding: 11px;text-decoration: none;font-size: 12px;}*/
.footer-text ul li{display: block;color: #6A6A6A;text-align: center;padding: 11px;text-decoration: none;font-size: 12px;}
/*.header-menu{height: 50px;}*/
/*.header-menu .nav-link{color: #F8F8F8;}*/
/*.header-menu .nav-link: hover{color: #fff;}*/
.footer-text{font-size: 12px;color: #000;padding: 15px 15px;}
.custom-border{border-top: 1px solid #1C3564;}
.text-yellow{/*color: #AB8238;*//*color: #B1822D !important;*/ color: var(--primary-color) !important}
.text-blue{color: var(--primary-color) !important;}

.form-group a.text-yellow:hover{color: #B1822D;text-decoration: none;}
.themebtn_gray {
    display: block;
    margin:1rem auto 0;
    background-color: #fff;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    font-weight: 500;
    width: 216px;
    height: 50px;
    border-radius:25px !important;
    font-size: 18px;
    line-height: normal;
}
.themebtn_gray:hover, .themebtn_gray:focus, .themebtn_gray:active{color: var(--primary-color);box-shadow: none;}
.txttheme{color: #b0822c;}
.txttheme a{color: var(--primary-color);}
.txttheme a:hover, .txttheme a:active, .txttheme a:focus{color: var(--primary-color); text-decoration: none;}
.loginimg{/*width: 100%;*/height: 4rem;/*max-height: 3rem;*/}
.loghead{margin: 4rem auto 0;}
/*.social-btn li{margin: 1rem 2rem;}*/
.social-btn-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
}
.social-btn span img {
  width: 25px;
  height: 25px;
  max-height: 25px;
  position: relative;
  bottom: 1px;
  margin: 0 5px 0 0;
}
.svgimg {
  width: 25px;
  height: 25px;
  max-height: 25px;
  position: relative;
  bottom: 1px;
  margin: 0 17px 0 0;
}
.btn-typo{font-size: 18px;
  font-weight: 500;padding: 6px 10px;
  width: 287px;height: 50px;border-radius: 7px;}
/*.btn-fb {
  color: #FFFFFF;
  background-color: #1b74f4;
  border-color: #1b74f4;
}*/
.btn-fb {
    display: block;
    margin: 1rem auto 0;
    background: #0165E1;
    border: 1px solid #0165E1;
    color: #fff;
    font-weight: 500;
    width: 250px;
    height: 50px;
    border-radius: 25px;
    font-size: 18px;
}
    
.btn-fb:hover, .btn-fb:focus, .btn-fb:active {
  color: #FFFFFF;
  /*background-color: #1b74f4;
  border: 1px solid #073a85;box-shadow: none;*/
}
.btn-google{background: transparent;border: 1px solid #757575;color:#757575;}
.btn-google:hover, .btn-google:focus, .btn-google:focus{background: transparent;border: 1px solid #757575;box-shadow: none;color:#757575;}
.btn-apple{
  color: #FFFFFF;
  background-color: #000;
  border-color: #000;
}
.btn-apple:hover, .btn-apple:focus, .btn-apple:active{
  color: #FFFFFF;
  background-color: #000;
  border-color: #000;box-shadow: none;
}
.foricon .form-control{border-right: none;}
/*form i {
  margin-left: -30px;
  cursor: pointer;
}*/
.logincontent .form-check-input {
    position: absolute;
    margin-top: 0.3rem;
    margin-left: -1.25rem;
    transform: scale(1.3);
}
.logincontent .form-control {height: calc(1.9em + 0.75rem + 2px);}
.fpasswordcontent .form-control {height: calc(1.9em + 0.75rem + 2px);}
.registercontent .form-control {height: calc(1.9em + 0.75rem + 2px);}
.logincontent input::placeholder {
  color: gray;
  opacity: 0.5; /* Firefox */
}
.modal-height{
  /*height: 450px;*/
  height: auto;
}
input[type=checkbox] {
     accent-color: #4DB34D; 
     /*color: white; 
     filter: hue-rotate(285deg);*/
}
@-webkit-keyframes autofill {
    0%,100% {
        color: #666;
        background: transparent;
    }
}
.foricon span:after{ content:"\f06e"; }
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 40px white inset !important;
}
.eyeicon{position: absolute;
    margin: -2rem 89%;
    font-size: 20px;}
button.btn.btn-outline-secondary {
    /*background: white;*/
    border: 1px solid #ced4da;
    border-left: none;
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus{
    color: #3a2529;
    /*background: #e8f0fe;*/
    background: transparent; 
    border: 1px solid #ced4da;
    border-left: none;
}
.btn-outline-secondary:active{
    color: #3a2529;
    background: white;
    border: 1px solid #ced4da;
    border-left: none;
}
.btn-outline-secondary:not(:disabled):not(.disabled).active:focus, .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .show>.btn-outline-secondary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgb(108 117 125 / 0%);
    border: 1px solid #ced4da;
    border-left: none;}

.btn-outline-secondary:not(:disabled):not(.disabled).active, .btn-outline-secondary:not(:disabled):not(.disabled):active, .show>.btn-outline-secondary.dropdown-toggle {
    color: #000;
    background-color: transparent;
    border-color: transparent;
}
.logincontent .form-control:focus {box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 0%) !important;}
@media screen and (max-width: 350px)
{ .f-sm-15{font-size: 15px;}
  .dsmgrid{display: grid!important;}
  .bordergrad {background-image: linear-gradient(104deg,#b18738 22.9%,white 24.2%,#36354b 0%);}  
  .registercontent .btnsmspace_r{padding: 0 3rem;}
}
@media screen and (min-width: 400px){
 .forfix_w{width: 20rem; margin: auto;}
 }
@media screen and (max-width: 440px){
 .mobf {font-size: 11px;}
 .bordergrad {background-image: linear-gradient(104deg,#b18738 17.9%,white 19.2%,#36354b 0%);}
 .mb-xs-3{margin-bottom: 3rem;}
}
@media screen and (min-width: 441px){
 .mb-xs-3{margin-bottom: 2rem;}
}
@media screen and (max-width: 540px){
  /*form i {margin-left: -60px;}*/
}
@media screen and (max-width: 580px)
{
  .bottomlabel {font-size: 12px !important;}
  .login-tab{padding-left: 1rem !important; padding-right:  1rem !important;}
  .ml-auto{margin-right: -20px !important}
  .footer-text{padding: 5px 5px;}
  /*.header-logo{width: 100% !important;}*/
  .mb-set{margin-bottom: -12px;}
  .drp-content-mob{left: 0;}
  .icon-bell-head{padding-left: 3px;padding-right: 3px;}
  .icon-user-head{padding-right: 0px;}
  .boat-txt{margin-right: 10px;}
  .mobile-bg{background-color: #F0F2FF;line-height: 61px;margin-bottom: 20px;}
  .p-mob-0{padding-left: 0px;padding-right: 0px;}
  .font-mob-10{font-size: 10px !important;}
  .mobile{margin-bottom: -2px !important;}
  .centeritem .col{padding-right: 5px !important;padding-left: 5px !important;}
  .hidesm{display: none;}
  .warning-msg{display: block !important;font-size: 14px;font-weight: 200;line-height: 16px;letter-spacing: 0px;text-align: left;color: rgba(0, 0, 0, 0.7);}
  td .expense-repair{margin-right: 5px;margin-left: 5px;}
  .table-responsive table tr td:last-child{padding-right: 0px !important;}
  /* date 3-11-22 starts */
  .datepicker-dropdown{width: 60%;}
  .table-condensed{width: 100%;}
  /* date 3-11-22 ends */
  .mitere-mobile{display: flex !important;}
}
@media screen and (max-width: 767px){
.loginbtn { display: block; margin: auto; /*width: 17rem;width: 16.7rem;*/}
/*.input-group-append.icon-eye{margin-left: -8px;}*/
.loghead { margin: 4rem auto 3rem;}
.footer-wrapper {padding: 1rem 1rem;}
.f-sm-14{font-size: 14px;}
.themebtn_colored-big,.themebtn_gray-big{width: 216px;display: block;margin-right: auto !important;margin-left: auto;margin-top: 25px;}
.boat-list-mob{display: block;background-color: #fff;float: right;padding-top: 5px;COLOR: #153468;}
.boat-list-mob:focus{border: none;}
.boat-list-desktop{display: none;}
}

/*.header-logo{position: relative;top: 2px !important;width: 80%;}*/
.header-logo {
  position: relative;
  /*top: 0px !important;*/
  width: 140px;
  height: auto;
}
@media(min-width:576px){
    /*.header-logo{width: 40%;top: 2px !important;}*/
    .header-logo{width: 146px;top: 1px !important;}
}
@media(min-width:992px){
    /*.header-logo{width: 40%;top: 2px !important;}*/
    .header-logo{width: 176px;top: 0px !important;}
}

@media screen and (max-width: 992px){
 .px-sm-3{padding-left:1rem !important; padding-right: 1rem !important;}
 .mob-footer{display: block !important;}
  .footer-main{display: none;}
 /*.badge-red{top: 15px;left: 72%;}*/
 .msg-width{width: 100%;}
 .drp-content-mob a{color: #B1822D;}
 .bg-home1, .bg-home2, .bg-home3, .bg-home4{width: 64px !important;height: auto !important;
    overflow: hidden; text-overflow: ellipsis;}
 /*.header-logo{width: 70%;}*/
 /*.badge-red{right: -1%!important;}*/
 .main-img, .main-img1{background-image: none !important;}
     

 .mobile-view{padding-left: 0px !important;padding-right: 0px !important;}
 /* ---- sub footer css starts ---- */
.bg-footer{background-color: #FAFAFA;}
.foot-change a{color: #5C5C5C !important;text-decoration: none;font-weight: 500;font-size: 16px;line-height: 19px;text-align: center;}
.foot-change a:hover{color: #B1822D !important;font-weight: 700;}
.footer-img{position: absolute;top: -60px;right: auto;left: 15%;/*width: 80%*/;width: 118px;height: 118px;background-color: #fafafa !important;border: 1px solid #fafafa !important;border-radius: 50%;padding: 10px;}
.pos-div{position: relative;}
.footer-menu .col{/*padding: 10px 0;*/display: flex;align-items: center;justify-content: center;}
.foot-border{border-right: 2px solid #000;border-radius: 5px;height: 40px;margin-top: auto;margin-bottom: auto;}
.footer-menu .p-top{padding-top: 22px;}
.font-change a{font-size: 16px;color: #5C5C5C;font-weight: 500;}
.font-change:hover a svg path{fill: #B1822D;color: #B1822D;background-color: #B1822D;}
.ac-foot-icons{width: 41px;height: 25px;}
.icon-footer{fill: #fff;color: #fff;background-color: #fff;}
/* ---- sub footer css ends ---- */
.dropdown-content{background-color: #FAFAFA !important;}
.dropdown-content a, .dropup-content a{color: #B1822D !important;}
.icon-pre-head{fill: #B1822D;color: #B1822D;background-color: #B1822D;}
.dropdown:hover .dropbtn:after{border-bottom-color: #FAFAFA;right: 0px;}
.btn-drop-blue{background-color: #B1822D !important;}
/*.dropbtn {background-color: #3498DB;color: white;padding: 16px;font-size: 16px;border: none;}*/
.dropup {position: relative;display: inline-block;}
.dropup-content {
    display: none;
    border-radius: 10px;
    position: absolute;
    background-color: #FAFAFA !important;
    min-width: 210px;
        bottom: 145px;
    z-index: 1;
    right: auto;
    left: -35px;
    padding: 0 10px;
border: 1px solid #C9C9C9;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.292778);
}
.container, .container-lg, .container-md, .container-sm, .container-xl, .container, .container-md, .container-sm{max-width: 100%}
.navbar{display: none;}
.dropup-content a {padding: 12px 0px;width: 250px;text-decoration: none;display: block;font-size: 20px !important;border-bottom: 2px solid #EEEEEE;}
/*.dropup-content a:hover {background-color: #ccc}*/
.dropup:hover .dropup-content {display: block;}
.loghead{margin: 1.5rem auto;}
.dropup:hover .dropbtn:before {
    content: "";
    position: absolute;
    border-color: rgba(194, 225, 245, 0);
    border: solid transparent;
    border-bottom-color: #F1F6FF;
    border-width: 11px;
    margin-left: -10px;
    top: 20px;
    right: 20px;
    z-index: 1;
    /*transform: rotate(180deg);*/
}
.home-metere {width: 347px;height: 85px;}
.desktop{display: none;}
.mobile{display: block !important;margin-bottom: -20px;width: 30px;height: 30px;}
.i-yellow{width: 21px;height: 26px;color: #AB8238;fill: #AB8238;}
.icon-set{margin-right: -25px;}
.drp-content-mob{left: 0;border-radius: 6px;/*top: -5px !important;*/}
.head-logout{display: none;}
.ord-set{order: 0 !important;}
/*.footer-wrapper{display: none;}*/
.dis-no-mobile{display: none;}
.fpasswordcontent .row .col-md-6.text-field-set{width: 110% !important;max-width: 110% !important;}
.fpasswordcontent .row .col-md-3.field-none{display: none !important;}
.tab-pd-0{padding-right: 0px;padding-left: 0px;}
} 
@media (min-width: 768px){
    .dropdown-content a, .dropup-content a {
      color: var(--primary-color) !important;
    }
    .dropdown-content svg path{
        fill: #B1822D !important;
        color: #B1822D !important;
        background-color: transparent;
    }
    .btn-drop-blue {
      background-color: #B1822D !important;
    }
    .btn-drop-blue .icon-pre-head-white {
      fill: #fff!important;
      color: #fff!important;
      background-color: transparent;
    }
}

@media screen and (min-width: 768px) and (max-width: 990px){
  .btn-typo {width: 20rem;}  
  /*.bg-home1, .bg-home2, .bg-home3, .bg-home4{width: 75px !important;height: 84px !important;}*/
  .loginbtn {display: block;margin: auto;width: 30rem;}
  .bordergrad {background-image: linear-gradient(104deg,#b18738 13.9%,white 15.2%,#36354b 0%);} 
  .home-svg {/*width: 15.1px !important;height: 15px !important;*/margin: 6px auto !important;}
  .home-card-header{margin-bottom: 5px;}
  .px-mob-0{padding-left: 5px;padding-right: 5px;}
  .home-fan{margin: 6px auto !important;}
}
@media screen and (max-width: 1000px){
  .mb-sm-1{margin-top: 1rem;}
}
@media screen and (min-width: 768px) and (max-width: 990px) {
.logincontent .loginbtn {width: 20rem !important;}
.logincontent .logformpad{padding: 0 7rem;}
}
/*@media screen and (min-width: 991px) and (max-width: 992px){
.leftborder { border-left: none; height: 14rem;}
}
*/@media screen and (min-width: 991px) {
.leftborder{border-left: 2px solid #80808038;height: 25rem;}
}
@media screen and (min-width: 1024px) {
/*.leftborder{border-left: 2px solid #80808038;height: 25rem;}*/
.mb-lg-5{margin-bottom: 5rem;}
.hidesm{display: unset;}
}
@media screen and (min-width: 991px) and (max-width: 1200px){
  .loginbtn {margin: 1rem 0rem;}
  .btnwrapper {padding: 0 1rem;}
}
@media screen and (min-width: 1201px){
  .logincontent .loginbtn {margin: 1rem 0rem;} 
}
@media screen and (max-width: 1201px){
  /*.input-group-append.icon-eye{margin-left: 66px;}*/
  .logincontent .pad-lg-5{padding: 0 1rem !important;}
  .login-set{margin-left: -15px;}
}
@media screen and (min-width: 992px){
  .logincontent .pad-lg-5{padding: 0 5rem;}
  .registercontent .pad-lg-10{padding: 0 10rem;}
  .verify .pad-lg-10{padding: 0 10rem;}
}
@media screen and (min-width: 1440px){
  #mainwrapper .container{width: 1440px !important;}
}
/*password css*/
.passhead{margin: 4rem 4rem 4rem 0;}
.lh-10{line-height: 10px;}
.lh-20{line-height: 20px;}
.formpad{padding: 1rem 3rem;}
.passbtn{margin: 1rem 0rem;padding: 0.6rem;}
.fpasswordcontent input::placeholder {
  color: gray;
  opacity: 0.5; /* Firefox */
}
@media screen and (max-width: 667px){
    .step3-head{font-size: 25px !important;}
}
@media screen and (max-width: 740px){
    .step3-head{font-size: 20px !important;}
}

.Accordian-container .row .px-mob-0{padding-left: 0;padding-right: 0;}
.Accordian-container.px-mob-0{padding-left: 0;padding-right: 0;}

@media(min-width:768px){
   .Accordian-container .row .px-mob-0{padding-left:15px;padding-right:15px;}
}

@media(min-width:992px){
    .Accordian-container .row .px-mob-0{padding-left:15px;padding-right:15px;}
    .Accordian-container.px-mob-0{padding-left:5px;padding-right:5px;}
}

@media screen and (max-width: 580px){
  .passbtn {margin: 0.5rem 0rem;}
  .btnsmspace {padding: 0 2rem !important;}
  .f-sm-14{font-size: 13px;}
  /*.badge-red {top: 20px;left: 70%;}*/
  /*.hidesm{display: none;}*/
/*  .mobf span{display: block;}*/
  .footer-menu .col{/*padding-top: 0px;*/padding-left: 2px;padding-right: 2px;margin-top: auto;margin-bottom: 0;padding-bottom: 10px;}
  .footer-img{top: -30px;left: 15%;padding: 5px;width: 60px;height: 60px;}
  .font-change{font-size: 12px;margin-bottom: 0px;}
  .footer-menu .p-top{margin-bottom: 0px;padding-top: 40px;}
  .des-table{display: none;}
  .px-mob-0{padding-left: 5px;padding-right: 5px;}

  

  .pr-mob{padding-left: 5px;padding-right: 5px;}
  .home-svg, .home-fan{display: none;}
  /*.bg-home1, .bg-home2, .bg-home3, .bg-home4{width:73px!important;height:50px !important;margin-bottom:10px !important}*/

  @media(min-width:375px){
      .bg-home1, .bg-home2, .bg-home3, .bg-home4{width:76px!important;height:50px !important;}
  }
  @media(min-width:576px){
      .bg-home1, .bg-home2, .bg-home3, .bg-home4{width:82px!important;height:50px !important;}
  }


  @media(min-width:581px){
    .bg-home1, .bg-home2, .bg-home3, .bg-home4{margin-bottom: 0 !important}
  }


  .home-card-header{margin-bottom: 2px;margin-top: 10px;/*font-weight: 700 !important;*/}
  .home-coard-desc{font-weight: 500 !important;}
  .loghead{margin-bottom: 0px;}
  .pt-mob-10{padding-top: 5px;}
  .dropup-content {bottom: 95px;left: -66px;}
  /*.mobile{margin-bottom: -3px;width: 30px;height: 30px;}*/
  .login-set{margin-left: 0px;}
  .track-level div:first-child{padding-left: 15px !important;}
  .track-level div:last-child{padding-right: 0px !important;}
  .track-level .step3-desc{font-size: 16px !important;}
  .track-level-active div:first-child{padding-left: 13px !important;}
  .track-level-active div:last-child{padding-right: 0px !important;}
  .track-level-active .step3-desc{font-size: 16px !important;}
  .badge-red {right: 10%!important;top: 9px;}
  .cart-set{right: 10px !important;}
  .AddBoat_btn.customLocationBtn .cart-set{right: 0 !important;}
  /*.item-4{width: 24% !important;height: 45px;}*/
  .showonxs{display: block !important;}
  .showonlg{display: none;} 
}
@media screen and (max-width: 360px){
/*    button.accordion span{width: 150px !important;}*/
}
}
@media screen and (max-width: 766px){
.showonlg{display: none;} 
}
@media screen and (min-width: 767px){
.showonxs{display: none;}
.centerfrommd{text-align: center;}
}
@media screen and (max-width: 767px){  
  .fs-sm-13{font-size: 16px;}
  .fs-sm-12{font-size: 12px;}
  .lh-10 {line-height: 15px;}
  .pd-sm-1 {padding: 0 1rem 0 1rem !important;}
  .pd-0{padding: 0px !important;}
  .formpad {padding: 0;}
  .btnsmspace {padding: 0 3rem;}
  .fpasswordcontent .loginbtn { width: 12rem;} 
  .fs-sm-28{font-size: 25px;}
  .fs-sm-23{font-size: 23px;}
}
@media screen and (max-width: 990px){
  .passhead {margin: 4rem auto 3rem auto;}
  .btnreverse{flex-direction: column-reverse;}
  /*.navbar.header-menu{display: none !important;}*/
  /*.header-border{border-bottom:  2px solid #EEEEEE;}*/
  .sub-header{border-bottom:  1px solid #EEEEEE;padding-bottom: 10px;}
  /*.logincontent .logformpad {padding: 0 7rem !important;}*/
  .set-right{float: none !important;}
.set-left{float: none !important;}
}
@media screen and (min-width: 768px) and (max-width: 990px){
 .fpasswordcontent .loginbtn { width: 12rem;}
 .btnsmspace{padding: 0 7rem;}
 .passbtn { margin: 0.7rem 0rem;}
}

/*register css*/
.registercontent .eyeicon{
  position: absolute;
  margin: -2rem 96%;
  font-size: 20px;
}
.custominput {
    position: absolute;
    margin-top: 0.3rem !important;
    margin-left: -1.25rem !important;
    transform: scale(1.1) !important;
}
.bottomlabel {
    font-size: 13px;
    float: right;
    margin-top: 4px;
}
@media screen and (max-width:550px){
.registercontent .eyeicon{margin: -2rem 107% !important;}
}
@media screen and (min-width:1024px){
.regbtngrp{padding: 1rem 5rem;} 
/*.badge-red{left: 79%;}*/
}
/*.badge-red{left: 79%;}*/
/*.badge-red{right: 11.5%;}*/

}
@media screen and (min-width: 768px) and (max-width:990px){
  .bottomlabel {font-size: 11px;}
  .msg-desc{/*padding-top: 1rem !important;*/padding-bottom: 20px;}
 /* .badge-red{left: 72%;}*/
}
@media screen and (max-width:800px){
 /* .badge-red{left: 63%;}*/
  /*.input-group-append.icon-eye{margin-left: -80px;}*/
}
@media screen and (max-width:820px){
.track-level div:first-child{padding-left: 3px;}
.track-level div:last-child{padding-right: 0px;}
.track-level .step3-desc{font-size: 14px;}
.track-level-active div:first-child{padding-left: 3px;}
.track-level-active div:last-child{padding-right: 0px;}
.track-level-active .step3-desc{font-size: 14px;}
.mobile{display: block !important;margin-bottom: -12px;width: 21px;height: 26px;}
.navbar{display: none;}
.head-user{fill: #B1822D;}
.home-meter{width: 100%;}
.circle-container{position: absolute !important;left: 30% !important;}
ul.home-readings li{height: auto !important;}
/*object{height: auto !important;}*/
.container, .container-md, .container-sm{max-width: 100%;}
.e-date{width: 24%;}
td p{width: 110px;}
.badge-red{right: 15%;}
.accordian-card{padding-bottom: 2px;}
/*.cart-set{right: 15px !important;}*/
}
@media screen and (max-width:1199px){
  .hideonsm{display: none;}
  .nav-item {padding: 6px 2px;}
}
@media screen and (min-width:1200px){
  .hideonlg{display: none;}
  .footer {width: 1440px !important; margin: auto;}
  /*.contwidth{width: 1440px;
    margin: auto;
    position: relative;
    bottom: 0 !important;
    top: 0;}*/
}


/*verify number css*/
.veribtn{padding: 0 12rem;}
.verf-formpad{padding: 1rem 10rem;}
.verf-passbtn {margin: 0.7rem 0rem;padding: 0.6rem;}

@media screen and (max-width: 766px){
 .verfformpad {width: 18rem;
    margin: auto;}
}
@media screen and (min-width: 767px){
 .verfformpad {width: 20rem;
    margin: auto;}
}

@media screen and (min-width: 579px) and (max-width: 700px){
 .verf-formpad {padding: 1rem 0rem;}
}

@media screen and (min-width: 580px) and (max-width:800px){
.verf-formpad {padding: 1rem 5rem;}
.veribtn {padding: 0 8rem;}
}

@media screen and (min-width: 700px) and (max-width:799px){
.verf-formpad { padding: 1rem 4rem;}
}

@media screen and (min-width: 801px) and (max-width:999px){
.veribtn {padding: 0 11rem;}
}

@media screen and (min-width: 1000px) and (max-width:1200px){
.verf-formpad { padding: 1rem 5rem !important;}
.veribtn {padding: 0 10rem !important;}
}

@media screen and (max-width: 767px){
.verify .loginbtn {width: 12rem !important;}
.logincontent .logformpad {padding: 0 5rem !important;}
}

/*model css start*/
.modal-header{background-color: #333;color: white;}
/*.modal-close{color: white;font-size: 40px;padding: 6px 24px 0 0 !important;opacity: 0.9;}*/
.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-shadow: 0 1px 0 #fff;
    opacity: 1;
}
.close:hover {color: #fff !important; opacity: 1 !important}
.modal .veribtn {padding: 0 8rem;}
.modal .veribtn {padding: 0 8rem;}
.modal .veribtn {padding: 0 8rem;}
.modal .loginbtn { width: auto;}
.modal .errorbody{
	background: #fccccc;
    border: 2px solid red;
    border-radius: 5px;
    color: red;
    font-weight: 700;
}
.card-body.errorbody.text-center{
    display: flex !important;
    align-items: center !important;
    /*padding-left: 0;*/
}
.modalfooter{border: 0;
    padding: 0 0 10px !important;}
@media screen and (max-width: 350px){
  .modal-title {font-size: 17px;}
  /*.badge-red{top: 20px;left: 67%;}*/
}
@media screen and (max-width:400px){
  .modal_f_12 {font-size: 12px;}
  .modal_f_24{font-size: 24px;}
}
@media screen and (max-width: 580px){
    .table-responsive table{width: 100% !important;}
    .track-set-left{padding-left: 0 !important;}
    .track-set-right{padding-right: 0 !important;}
  .modal .btnsmspace {padding: 0 4rem !important;}
   .modal .loginbtn { width: auto; padding: 8px 48px;}
  /*.modelbtnpad{padding: 0 7rem;}*/
  /*.input-group-append.icon-eye{margin-left: -5px;}*/
  .logincontent .logformpad {padding: 0 0rem !important;}
  .font-change a{font-size: 16px !important;font-weight: 500;width: 200px;}
  .foot-change:hover a svg path{fill: #B1822D;color: #B1822D;background-color: #B1822D;}
  /*.ac-foot-icons{width: 20.78px;Height: 18.07px;}*/
  /*.badge-red{right: 25% !important;}*/
  .main-header div:last-child{padding-left: 0px !important;}
  /*.drp-content-mob{top: -5px !important;}*/
  .main-header div:first-child{/*padding-right: 0px !important;*/}
  .footer-wrapper{padding: 1rem 0.5rem;border-top: none;}
  .ord-one{order: -1;}
  .desk-no{display: block !important;}
  .mob-ord-1{order: 1}
  .mob-ord-2{order: 2}
  .mob-ord-3{order: 3}
  .mob-ord-4{order: 4}
  /*.br-btm-gray{border-bottom: 2px solid #EDEDED !important;}*/
  .basic-payment .col-4, .standard-payment .col-4, .premium-payment .col-4{padding-left: 0px;}
  .basic-payment .col-8, .standard-payment .col-8, .premium-payment .col-8{padding-right: 5px;}
  .standard-payment .plan-cost span{top: 16% !important;right: 70% !important;}
  .premium-payment .plan-cost span{top: 15% !important;right: 83% !important;}
  .plan-cost{font-size: 40px !important;}
  .plan-type{font-weight: 19px !important;}
  .option{left: 31% !important;}
  .home-image object{height: 40px;}
  .fuel-txt{margin-top: -6px;/*font-weight: 700;*/}
  .desk-50{width: 100% !important;}
  input.tank-readings{width: 70px !important;}
  td p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width: 75px !important;margin-bottom: 0px;}
  td.main-trunck p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width: 130px !important;margin-bottom: 0px;}
  /*.gen-set{margin-top: 26px !important;}*/
  ul.home-readings{grid-template-columns: repeat(auto-fit, 80px) !important;}
  .meter-reading{margin-top: 0px !important;}
  .panel ul li a{padding-left: 0px !important;}
  button.accordion span{ 
    width: 230px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
        position: absolute;
    left: 32px;margin: 3px 0;} 
    button.accordion span.no-trunk{width: 93% !important;}
    .cbody ul li a{padding-left: 0px !important;}
    /*.datepicker-dropdown{width: auto !important;}*/
    .service-date-set{width: 21% !important;}
    .home-reading-txt{margin-top: auto !important;}
    /* ---------- photo preview transparent background css starts -------- */
    #trip-photo-preview{background-color: #00000096;}
    /* ---------- photo preview transparent background css ends -------- */
}
@media screen and(min-width: 581px) and (max-width: 1000px){
  .modal .loginbtn { width: auto; padding: 8px 4rem;}
}
@media screen and (min-width: 1001px){
  .modal .loginbtn {padding: 0.5rem 4rem;}
}
/* toogle switch */
.toggle {--width: 89px;--height: 33px;position: relative;display: inline-block;width: var(--width);height: var(--height);box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);border-radius: var(--height);cursor: pointer;}
.toggle input {display: none;}
.toggle .slider {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: var(--height);background-color: #F8F8F8;transition: all 0.4s ease-in-out;border: 2px solid #fff;}
.toggle .slider::before {content: "";position: absolute;top: 1px;left: 1px;width: 32px;height: 31px;border-radius: calc(var(--height) / 2);background-image: url('./img/tremate_logo_circle.png');/*box-shadow: 0px 1px 3px rgb(0 0 0 / 30%);*/transition: all 0.4s ease-in-out;}
.navbar .toggle .slider::before {
  content: "";
  position: absolute;
  top:-1.7px;
  left:-1px;
  width: 33px;
  height: 33px;
  /*border-radius: calc(var(--height) / 2);*/
  background-image: url('./img/tremate_logo_circle.png');
  /*box-shadow: 0px 1px 3px rgb(0 0 0 / 30%);*/
  transition: all 0.4s ease-in-out;
  background-size: 95%;
  background-repeat: no-repeat; background-position: center center;
}
.toggle input:checked+.slider {background-color: #cb9a3d;}
.toggle input:checked+.slider::before {transform: translateX(calc(var(--width) - var(--height)));}
.toggle .labels {position: absolute;top: 8px;left: 0;width: 100%;height: 100%;font-size: 12px;font-family: sans-serif;transition: all 0.4s ease-in-out;}
.toggle .labels::after {content: attr(data-off);position: absolute;right: 10px;opacity: 1;font-weight: 400;font-size: 16px;line-height: 19px;color: #AB8238;background-color: #F8F8F8;}
.navbar .toggle .labels::after {content: attr(data-off);position: absolute;right: 10px;opacity: 1;font-weight: 400;font-size: 16px;line-height: 19px;color: var(--primary-color);background-color:transparent;}
/*.toggle .labels::before {content: attr(data-on);position: absolute;left: 5px;color: #ffffff;opacity: 0;text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.4);transition: all 0.4s ease-in-out;}*/
/*.toggle input:checked~.labels::after {opacity: 0;}*/
.toggle input:checked~.labels::before {opacity: 1;}
/* /toogle switch */

/*----- custom checkbox ---- */
/* The container */
.cust-check {
  position: relative;
  padding-left: 24px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Hide the browser's default checkbox */
.cust-check input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 1px;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: #fff;
  border-radius: 3px;
  border: 1px solid #ced4da;
}
/* On mouse-over, add a grey background color */
.cust-check:hover input ~ .checkmark {
  background-color: #fff;
}
/* When the checkbox is checked, add a blue background */
.cust-check input:checked ~ .checkmark {
  background-color: #4DB34D;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
/* Show the checkmark when checked */
.cust-check input:checked ~ .checkmark:after {
  display: block;
}
/* Style the checkmark/indicator */
.cust-check .checkmark:after {
    width: 8px;
    height: 13px;
    left: 4px;
    top: 0px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(50deg);}
/* ------ /custom checkbox ------ */
/*scrollbar css start*/
      ::-webkit-scrollbar {
        width: 10px;
        border-radius: 40px;
      }

      ::-webkit-scrollbar-thumb{
        background: #888;
        /*background: #233968;*/
        border-radius: 10px;
      }
      /* Track */
      ::-webkit-scrollbar-track {
        background: #f1f1f1; 
        border-radius:10px;
      }       
/*scrollbar css end*/
.dropbtn {
  color: #153468;
  border: none;
  background: transparent;
    text-indent: -1000px; overflow: hidden;
}

.dropdown {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.dropdown.caret {
  position: relative;
  display: inline-block;
  cursor: pointer;
  height: 30px;
  top: 3px;
}
@media(min-width:581px){
    .dropdown.caret {
      position: relative;
      display: inline-block;
      cursor: pointer;
      height: 30px;
      top: 15px;
    }
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 200px;
      right: 0;
    z-index: 10;
    /*top: 56px;*/
    /*top: 45px;*/
  /*background: #F1F6FF;*/
  background:#FAFAFA !important;
border: 1px solid #C9C9C9;
/*box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.292778);*/
}

.dropdown-content.drp-content-mob{left: 0;top: 30px;}
.drp-cnt{top: 40px;border-radius: 7px;}
.dropdown-content a {
  padding: 10px 10px;
  color: #233968;
  font-size: 16px;
  text-decoration: none;
  font-weight: 500;
  display: block;
  width: 100%;
  border-bottom: 2px solid #EEEEEE;
}
.dropdown-content a:last-child{border-bottom: 2px solid transparent;}
.nav-height .dropdown-content a{color: #233968 !important;}
.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;text-align: left;}
.btn-drop-blue{
  background-color: #233968;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  width: 112px;
  height: 40px;
  border-radius: 7px;
  color: #fff;
}
.btn-drop-blue:hover{color: #fff !important;}
/*.dropdown::after{
  content: 'f0de';
  font-size: 18px;
}*/
/*.detail-step ul{margin: 0px;padding: 0px;list-style: none;}
.steps {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.steps li:not(:last-child):after {
        content: '';
    position: absolute;
    top: 8px;
    left: 101px;
    right: 0;
    bottom: 0;
    border-bottom: 1px dashed #e0e0e0;
    height: 5px;
    width: 7%;
}
.steps li span:before {
    content: '';
    position: absolute;
    top: -1px;
    left: -6px;
    right: 0;
    bottom: 0;
    background-color: #fff;
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    height: 24px;
    width: 24px;
    z-index: -1;
}
.steps li:not(:first-child):before {
    content: '';
    position: absolute;
    top: 8px;
    left: 25px;
    right: 0;
    bottom: 0;
    border-bottom: 1px dashed #e0e0e0;
    height: 5px;
    width: 7%;
}
.steps .step-num{
  margin-left: -13px;
  z-index: 1024;
  color: rgba(0, 0, 0, 0.26);
  font-size: 14px;
}
.steps .step-set{    content: '';
    position: absolute;
    left: 90px; }
.steps .step-set1{content: '';
    position: absolute;
    left: 165px;}
.steps li .step-set:before{left: -8px;}*/

/* ------------------------------ */
.easy-steps{    display: block;
    position: relative;
    padding:10px 0px 20px 0;
    width: 100%;}
.steps{    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;}
ul.steps{    margin: 0;
    padding: 0;
    list-style: none;}
.steps li.active span:before, .steps li.partial span:before{
    border: 2px solid #153468;
}

.steps li span:before {
    content: '';
    position: absolute;
    /*top: -6px;
    left: -8px;*/
    right: 0;
    bottom: 0;
    background-color: #fff;
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    height: 30px;
    width: 30px;
    z-index: -1;display: flex;
    align-items: center;
    justify-content: center;
}
.steps li:not(:last-child):after {
    content: '';
    position: absolute;
    top: 8px;
    left:64.5%;
    right: 0;
    bottom: 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.26);
    height: 5px;
    width: 15%;
}
.steps li.active span{color: #B1822D;}
.steps li.active:not(:last-child):after {
    content: '';
    position: absolute;
    top: 3px;
    left: 56.5%;
    right: 0;
    bottom: 0;
    border-bottom: 1px dashed rgb(23 52 102) !important;
    height: 5px;
    width: 15%;
   /* display: block !important;*/
}

.steps li:not(:first-child):before {
    content: '';
    position: absolute;
    top: 8px;
    left: 22%;
    right: 0;
    bottom: 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.26);
    height: 5px;
    width: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.steps li span {
    /*display: block;*/
    font-size: 14px;
    line-height: 14px;
    position: relative;
    height:30px;
    width: 30px;
    z-index: 1;
    color: rgba(0, 0, 0, 0.26); display: flex; align-items: center; justify-content: center;
}
.steps li span.partial-steps{color: #B1822D;}
.edit-steps{    width: 14px;
    height: 14px;
    color: #B1822D;
    fill: #B1822D;
    position: absolute;
    /*left: -3px;
    top: -1px;*/
    display: flex;
    align-items: center;
    justify-content: center;}
/* ------------------------------ */
.track-level{background: #FFFFFF;border: 0.5px solid #979797;width: 247.31px;height: 70px;border-radius: 5px;}
.track-level-active{
  background: rgba(0, 186, 49, 0.03);border: 0.5px solid #00BA31;width: 247.31px;height: 70px;border-radius: 5px;}
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}
.text-red{color: #FF0000;}
.exclamation-blue{fill: #3172DC;color: #3172DC;width: 11px;height: 11px;transform: rotate(180deg);}
.level-icon-green{color: #41AD49;fill: #41AD49;font-weight: 900;width: 36px;height: 36px;}
.level-icon-black{color: #000000;fill: #000000;font-weight: 900;width: 36px !important;height: 36px;}
.step3-head{font-size: 28px;color: rgba(0, 0, 0, 0.7);font-weight: 700;margin-bottom: 0px;}
.desc{font-size: 18px;color: rgba(0, 0, 0, 0.7);font-weight: 700;}

.track-level-active .step3-head,
.track-level-active .step3-desc{color: rgba(0, 0, 0, 1);}

.step-2 .track-level svg{color: #000;
    fill: #000;}

.track-level svg{color: #979797;
    fill: #979797;}
.track-level .step3-head,
.track-level .step3-desc{color:#979797;}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff !important;
    -webkit-transition: .4s;
    transition: .4s;
    /*height: 24px;
    width: 48px;*/
    height: 19px;width: 30px; border: 2px solid #767676;
}

.slider:before {
    position: absolute;
    content: "";
    height: 10px;
    width: 10px;
    right: 13px;
    bottom: 3px;
    background-color: #767676;
    -webkit-transition: .4s;
    transition: .4s;
}
.navbar .slider:before {
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    right: 13px;
    bottom: 2px;
    background-color: transparent;
    -webkit-transition: .4s;
    transition: .4s;
}
input:checked + .slider {
  background-color: #41AD49 !important ;border: 2px solid transparent;
}

input:focus + .slider {
  box-shadow: 0 0 1px #41AD49;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
.accordion {
  background-color:transparent;
  cursor: pointer;
  padding: 18px 0px;
  width: 100%;
  border-top: none;
  border-bottom:none;
  border-left: none;
  border-right: none;
  text-align: left;
  outline: none;
  font-size: 18px;
  transition: 0.4s;
  color: #153468;
}
@media(min-width:576px){
    .accordion {
      /*border-top: 1px solid #EEEEEE;
      border-bottom: 1px solid #EEEEEE;*/
    }
}
.accordian-card.active{
    background-color: #F0F0F0;
    }
.accordian-card .accordion:after,
.accordian-card .accordion.collapsed:after,
.accordian .accordion:after
 {
    content: '\f285'; 
    color: #153468;
    font-weight: bold;
    float: left;
    width: 22px;
    /*border: 1px solid #153468;*/
    border-radius: 3px;
    text-align: center;
    /*min-height: 22px;
    line-height: 20px;*/
    font-family: "bootstrap-icons";
}
.accordian-card.active .accordion.active.collapsed:after{
    content: '\f285'; font-family: "bootstrap-icons";
}
.accordian-card.active .accordion:after,
.accordian-card .accordion:after
 {
    content: '\f282'; 
    color: #153468;
    font-weight: bold;
    float: left;
    width: 22px;
    /*border: 1px solid #153468;*/
    border-radius: 3px;
    text-align: center;
    /*min-height: 22px;
    line-height: 20px;*/
    font-family: "bootstrap-icons";
}
.accordian.active:after{
  content: "\f282";
}

.accordion:after
 {
    content: '\f285'; 
    color: #153468;
    font-weight: bold;
    float: left;
    width: 22px;
    /*border: 1px solid #153468;*/
    border-radius: 3px;
    text-align: center;
    /*min-height: 22px;
    line-height: 20px;*/
    font-family: "bootstrap-icons";
}
/*.accordion.active{background-color: #F0F0F0;}*/
.accordion.active:after{
  content: "\f282";
}
.CommonAccordian .accordion{
    /*background-color: #FCFCFC;*/background-color: #F0F0F0;border-top: 1px solid #979797;
    /*border-bottom: 1px solid #EEEEEE;*/ padding: 18px 15px;
}
.CommonAccordian .accordion.active{
    background-color: #F0F0F0;
}
.CommonAccordian .accordion:after
 {
    content: '\f285'; 
    color: #153468;
    font-weight: bold;
    float: left;
    width: 22px;
    /*border: 1px solid #153468;*/
    border-radius: 3px;
    text-align: center;
    /*min-height: 22px;
    line-height: 20px;*/
    font-family: "bootstrap-icons";

}
.CommonAccordian .accordion.active:after
 {
    content: '\f282'; 
    color: #153468;
    font-weight: bold;
    float: left;
    width: 22px;
    /*border: 1px solid #153468;*/
    border-radius: 3px;
    text-align: center;
    /*min-height: 22px;
    line-height: 20px;*/
    font-family: "bootstrap-icons";
}
.CommonAccordian .panel {
  border-bottom: 1px solid transparent;
}

.panel {
  /*padding: 0 18px;*/
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  /*border-bottom: 1px solid #153468;*/
  margin-bottom: 10px;
}
.accordion span{
    padding-left:4px; 
    font-weight: 400;
    font-size: 18px;
    line-height: 21px;
    color: #000000;
}
/*.panel ul{list-style: none;}
.panel ul li{padding: 15px 20px;background-color: #FCFCFC;border-bottom: 1px solid #EEE;}
.panel ul li a{color: #B1822D;font-size: 18px;padding-left: 30px;}
.panel ul li a:hover{text-decoration: none;color: #B1822D;}*/
.cbody ul{list-style: none;}
/*.cbody ul li{padding: 15px 20px;background-color: #FCFCFC;border-bottom:none;}*/
.cbody ul li {
    padding: 5px 0 10px;
    background-color: #FCFCFC;
    border-bottom: none;
    margin: 0 0px 0 0;
}
.cbody ul li:last-child {
    border-bottom: none;
}
/*@media(min-width:576px){
   .cbody ul li{border-bottom: 1px solid #EEE;} 
}*/

.cbody ul li a{color: #000;font-size: 16px;padding-left: 0; font-weight: 400;}
.cbody ul li a:hover{text-decoration: none;color: var(--primary-color);}
.record-icon{color: #000;fill: #000;line-height: 50px;width: 16px;height: 16px;/*margin-top: 15px;*/margin-right: 12px;}
.dlticon{float: right;}
.dlticon .record-icon{margin-right: 0px !important}
/*.updown-arrow{display: inline-grid;}
.updown-arrow svg{width: 16px;height: 14px;color: #153468;font-size: 14px;line-height: 16px;}*/
/*.alert{width: 270px;min-height: 97px;align-items: center;text-align: left;margin: auto;}*/
.alert {
    width:auto;
    min-height: auto;
    align-items: center;
    text-align: left;
    margin: auto;
    padding: 10px 10px 10px 40px;
}

@media(min-width:576px){
    .alert {
        width:336px;padding:10px 10px 10px 30px;
    }
}
.alert span {
    margin:0;
    display: block; text-align: left;
}
.setup-edit{color: #B1822D;fill: #B1822D;width: 12px;height: 13px;}
/*.accordion span:after{
  font-family: 'fontawesome'; 
  font-weight: 400;
  content: "\f107";
  float: right;
  color: #153468;
}
.accordion span:after{
  font-family: 'fontawesome'; 
  font-weight: 400;
  content: "\f106";
  float: right;
  color: #153468;
}*/
td, th{padding: 12px 0px;}
th{font-size: 14px;color: #6C6C6C;font-weight: 500;}
td{font-size: 16px;line-height: 19px;color: #000000;font-weight:500; }
tr{border-bottom:none}

@media(min-width:576px){
    /*tr{border-bottom: 1px solid #EEEEEE;}*/
    .dataTable td{border-bottom: 1px solid #EEEEEE;}
    .dataTable tr:last-child td{border-bottom: none;}
    table tr:last-child {border-bottom:none}
}


.table-icon{/*height: 16px;width: 10px;*/height: 22px;width: 14px;color:var(--primary-color);fill:var(--primary-color);/*float: right*/cursor: pointer;}
.updown-caret{
      line-height: 16px;
    height: 7px;
    width: 9px;
    display: inline-grid;
    /*padding-left: 10px;*/
}
.updown-caret svg{width: 15px;height: 14px;color: #153468;fill: #153468;}
.repair-icon{color: #164BA0;fill: #164BA0;height: 19px;width: 19px;/*border: 1px solid #3f5191;border-radius: 50%;padding: 2px;margin-right: 5px;*/}
.progress{background-color: #ECEBEB;border-radius: 5px;height: 10px;}
.progress-red{background-color: #C50202;}
.progress-yellow{background-color: #FFC034;}
.progress-green{background-color: #3BB702;}
.icon-red{color: #C50202;fill: #C50202;height: 19px;width: 19px;}
.icon-yellow{color: #FFC034;fill: #FFC034;height: 19px;width: 19px;}
.icon-green{color: #3BB702;fill: #3BB702;height: 19px;width: 19px;}
.error {color: #FF0000;}
.tbl-yellow{color: #B1822D;font-size: 16px;}
.bg-home1{background: #FCFCFC;border: 0.5px solid #979797;border-radius: 7px;width:75px;height: auto;text-align: center;margin-left: auto;margin-right: auto;}

@media(min-width:576px){
    .bg-home1{border-radius:7px;}
}
.bg-home2{background: rgba(228, 7, 7, 0.03);border:0.5px solid #E40707;border-radius: 7px;width: 85px;height: auto;text-align: center;margin-left: auto;margin-right: auto;}
.bg-home3{background:rgba(255, 157, 0, 0.03);border: 0.5px solid #FF9D00;border-radius: 7px;width: 85px;height: auto;text-align: center;margin-left: auto;margin-right: auto;}
.bg-home4{background: rgba(27, 115, 232, 0.2);border: 1px solid var(--primary-color);border-radius: 7px;width: 85px;height: auto;text-align: center;margin-left: auto;margin-right: auto;}

.bg-home1,.bg-home3,.bg-home2,.bg-home4{margin-left: auto;margin-right: auto;}

@media(min-width:576px){
    .bg-home2,.bg-home3,.bg-home4{border-radius:7px;}
}
@media(min-width:581px){
    .bg-home1,.bg-home3, .bg-home2,.bg-home2{/*margin-left: 2px;margin-right: 2px;*/margin-left: auto;margin-right: auto;}
}

.home-card-header{font-weight: 500;font-size: 12px;line-height: 14px;text-align: center;color: #000;height: auto;}

@media(min-width:582px){
    .home-card-header{height: 20px;}
}
@media(min-width:768px){
    .home-card-header{height: auto;}
}
.home-coard-desc{font-weight: 400;font-size: 12px;line-height: 14px;text-align: center;color: var(--primary-color);}
.home-svg{width: 32.1px;height: 28px;margin: 13px auto;}
.home-fan{width: 32.1px;height: 28px;margin: 13px auto;}

.boatAddedContainer .my-auto .home-fan{width: auto;height: 30px;}
.boatAddedContainer .InnerSearch{z-index: 2;}

.trip-label{font-weight: 400;font-size: 18px;line-height: 21px;color: #153468;margin-top: 20px;}
.btn-tip{background: #FFFFFF;border: 1px solid #CCCCCC;border-radius: 5px;font-weight: 400;font-size: 16px;line-height: 19px;
    text-align: center;color: #2E2E2E;/*width: 83px;*/height: 45px;}
.trip-btn-label{font-size: 14px;line-height: 16px;margin-top: 10px;margin-bottom: 10px;color: #6A6A6A;height: auto;}
.trip-link{font-weight: 400;font-size: 14px;line-height: 21px;color: #2E2E2E;padding: 10px 10px;}
.trip-link a{color: #B1822D;font-size: 14px;}
.w-20{width: 20%;}
.w-23{width: 23%;}
.w-80{width: 80%;}
.font-11{font-size: 11px;}
.tank-label{font-weight: 400;font-size: 16px;line-height: 19px;color: #6A6A6A;}
.lable-empty{text-align: left;float: left;font-weight: 500;font-size: 10px;line-height: 12px;text-transform: uppercase;color: #6A6A6A;}
.lable-full{font-weight: 500;font-size: 10px;line-height: 12px;text-transform: uppercase;color: #6A6A6A;text-align: right;float: right;}
.progrees-trip{background: #ECEBEB;border-radius: 5px;height: 4px;width: 100%;margin-bottom: 7px;}
.progress-teal{background: #009988;box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.317308);}
.progress-red:after{background: #009988;box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.317308);width: 20px;height: 20px;}
.trip-photo{background: #FCFCFC;border: 1px solid #CCCCCC;border-radius: 5px;}
.service-caption{font-weight: 300;font-size: 16px;line-height: normal;color: #808080;}
.form-group{padding-left: 15px!important;padding-right: 15px!important;}
.create-item{font-weight: 500;font-size: 16px;line-height: 19px;text-align: center;color: #B1822D;}
.set-right{float: right;}
.set-left{float: left;}
.form-group label{font-weight: 400;font-size: 16px!important;/*line-height: 19px;*/color: #333 !important;}
.trip-desc{font-weight: 300;font-size: 14px;line-height: 16px;color: rgba(0, 0, 0, 0.7);margin-top: -5px;}
.slider-set:before{height: 10px;width: 10px;right: 17px;bottom: 4px;}
.switch input:checked + .slider:before{left: -12px; background: #fff; bottom: 3px;}
.switch1 input:checked + .slider:before{left: -9px;}
.footer-contact{font-weight: 700;font-size: 16px;line-height: 19px;text-align: right;color: #B1822D;}
.pass-correction{font-weight: 600;font-size: 14px;line-height: 16px;text-align: right;color: #4F4F4F;font-style: italic;float: right;margin-top: 5px;margin-bottom: 10px;}
.mobile{display: none;}
.drop-bg-set{color: #233968;
    font-size: 16px;
    text-decoration: none;
    font-weight: 500;
    display: block;
    border: none;
    background: transparent;
}
.ord-set{order: 2;}
.reset-btn{font-weight: 700;font-size: 18px;line-height: 21px;text-align: center;color: #FFFFFF;background-color: #B1822D;
    width: 216px;height: 50px;border-radius: 7px;}
.reset-btn:hover{background-color: #233968;color: #FFFFFF;}
.admin-tbl th{font-weight: 500;font-size: 14px;line-height: 20px;text-transform: capitalize;color: #153468;}
.admin-tbl td{font-style: normal;font-weight: 300;font-size: 16px;line-height: 20px;color: #000000;}
.desk-no{display: none;}
.border-div{background: #FFFFFF;border: 1px solid #CCCCCC;border-radius: 5px;padding: 15px;margin: 15px;}
.border-div p{font-weight: 300;font-size: 14px;line-height: 16px;color: #000000;margin-bottom: 5px;}
.maintanance-head{font-weight: 500;font-size: 16px;line-height: 21px;text-align: center;color: #2E2E2E;}
.add-main-img svg{width: 108px;height: 106px;fill: #000;}
.brd-main-right{border-right: 1px solid #D8D8D8;}
.cal-picker{width: 48px;height: 50px;fill:var(--primary-color);}
.text-black{color: #000 !important;}
.text-maroon{color: #C01515 !important;}
.msg-pop-img svg{width: 256px;height: 256px;}
.icon-yellow-arow{height: 16px;fill: #AB8238;margin-left: 5px;}
.msg-pop-img svg{fill: var(--primary-color);width: 256px;height: 256px;}
.read-txt{font-weight: 300;font-size: 14px;line-height: 21px;color: #979797;font-style: italic;}
.bg-check{background-color: #FCFCFC;border-bottom: 1px solid #EEEEEE;padding: 15px 15px;}
.icon-dlt{width: 14px;height: 16px;fill: #6A6A6A;cursor: pointer;/*position: absolute;top: 5px;right: 10px;*/}
.check-dlt svg{position: absolute;top: 10px;right: 15px;}
.foot-change .active .icon-footer{fill: #B1822D !important;}
.foot-change .active .font-change{color: #B1822D !important;font-weight: 700;}
.bg-lignt-new{background-color: #FCFCFC;}
.accordion span.arrow-no:after, .accordion span.float-right:after{display: none;}
#user-search-tbl.admin-tbl td{line-height: 20px !important;}
.table-responsive.tbl-scrl{/*height: 240px;overflow: -moz-scrollbars-none;*/}
.table-responsive.tbl-scrl::-webkit-scrollbar { width: 0 !important }
.table-responsive.tbl-scrl{ -ms-overflow-style: none; }
.plus-icon{width: 40px;height: 40px;fill: var(--primary-color);}
.bg-lblue{background-color: #E2EFFF;border-radius: 2px;}
.fill-maroon{fill: #C50202 !important;}
.fill-gray{fill: #6A6A6A !important;}
.bg-service-img{background: #D8D8D8;border-radius: 2px;}
.text-lblue{font-weight: 300;font-size: 11px !important;line-height: 13px;text-align: center;color: var(--primary-color) !important;}
.set-bgsize{width: 77px;height: 91px;margin-left: auto;margin-right: auto;border-radius: 5px;}
.set-bgsize .bg-set-img{width: 100%;height: 100%;}
.table .tbody tr td:last-child{text-align: right !important;}
.navbar .navbar-nav .nav-item.active:after{display: none;}
.footer-menu .foot-change .active:after, .easy-steps .steps .active:after{display: none;}
.dropdown-content .active:after, .form-group .active:after{display: none;}
.footer-menu {
  position: fixed;
  left: 0;
  bottom: 0;
  width: auto;
  z-index: 2;
  right: 0;
  display: inline-flex;
  background: #333;
  margin:0;
}

@media(min-width:768px){
    .footer-menu {
      /*margin: 0 20px;*/
        margin:0 auto; width: 95%;
    }
}
/*@media(min-width:930px){
    .footer-menu {
      margin: 0 23px;
    }
}*/
.up-down-arrow i:first-child{margin-top: -3px;margin-bottom: -7px;}
.up-down-arrow{display: inline-grid;float: right;} 
.up-down-arrow i{color: #153468;}
.up-down-arrow svg:first-child{margin-top: 0px;margin-bottom: -2px;}
.up-down-arrow svg{fill: #153468;width: 14px;height: 14px;}
.steps li span.done svg{fill: #41AD49;width: 13px;height: 13px;margin-left: -2px;margin-top: -2px;text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);}
.steps li span.done:before{border: 2px solid #41AD49;box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);}
.rate-face svg{width: 40px;height: 40px;fill: #6A6A6A;background-color: #F4F4F4;border-radius: 20px;padding: 5px;cursor:pointer;}
.rate-face.excellent svg{fill: #00982D;background-color: rgba(0, 152, 45, 0.2);}
.rate-face.poor svg{fill: #C50202;;background-color: rgba(197, 2, 2, 0.1);}
.rate-face.ok svg{fill: var(--primary-color);background-color: rgba(27, 115, 232, 0.1);}
.main-header .icon-set svg{fill: #fff;}
@media(min-width:992px){
    .main-header .icon-set svg{fill: #000;}
}
.warning-msg{display: none;}
.section-float{position: sticky;top: 0;z-index: 1;}
.main-img1{background-image: url('./img/image62.png');background-repeat: no-repeat;}
.main-img{background-image: url('./img/image61.png');background-repeat: no-repeat;background-position: right -15px;margin-top: 10px;}
.tbl-hradr-fix{position: sticky;top: -3px;width: 100%;height: 45px;background-color: #fff;}
.track-set-right{padding-right: 15%;}
.track-set-left{padding-left: 15%;}
.refresh-icon{width: 20px;height: 20px;fill: #fff;}
.chcklist{padding: 12px 0;border-bottom: 1px solid #EEEEEE;}
.table-responsive table{width: 96%;margin-left: auto;}
.table-responsive table tr td:last-child{text-align: right;padding-right: 0px;}
.lbl-tbl-fix{position: sticky;bottom: 0;/*z-index: 1;*/background-color: #fff;width: 100% !important;}
.home-popup{width: 78px !important;height: 47px !important;}
.text-right-side{text-align: right;float: right;}
/* -------- progress slider starts --------- */
main {
    display: flex;
    flex-direction: column;
    /*gap: 2.2em;
    padding: 1em 0;*/
}

/*html::before {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle at center, #fff, #fafafa);
    display: block;
}*/
input[type="range"] {
    font-size: 1.5rem;
    width: 12.5em;
    border-radius: 30px;
}

input[type="range"] {
    --thumb-height: 20px;
    --track-height: 4px;
    --track-color: #ECEBEB;
    --clip-edges: 0.125em;
    border-radius: 10px !important;
}
input[type="range"].red{color: #C50202;border-radius: 10px;}
input[type="range"].green{color: #009988;border-radius: 10px;}
input[type="range"].yellow{color: #FFC034;border-radius: 10px;}
input[type="range"].gray{color: #808080;border-radius: 10px;}

@media (prefers-color-scheme: dark) {
    html {
        background-color: #000;
    }

    html::before {
        background: radial-gradient(circle at center, #101112, #000);
    }

    input[type="range"] {
        color: #f07167;
        --track-color: rgba(255, 255, 255, 0.1);
    }

    input[type="range"].win10-thumb {
        color: #3a86ff;
    }
}

/* === range commons === */
input[type="range"] {
    position: relative;
    background: #fff0;
    overflow: hidden;
    width: 100%;
}

input[type="range"]:active {
    cursor: grabbing;
}

/* === WebKit specific styles === */
input[type="range"],
input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    transition: all ease 100ms;
    height: var(--thumb-height);
}

input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-thumb {
    position: relative;
}

input[type="range"]::-webkit-slider-thumb {
    --thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
    --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
    --clip-bottom: calc(var(--thumb-height) - var(--clip-top));
    --clip-further: calc(100% + 1px);
    --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0
        100vmax currentColor;

    width: var(--thumb-width, var(--thumb-height));
    background: linear-gradient(currentColor 0 0) scroll no-repeat left center /
        50% calc(var(--track-height) + 1px);
    background-color: currentColor;
    box-shadow: var(--box-fill);
    border-radius: var(--thumb-width, var(--thumb-height));

    filter: brightness(100%);
    clip-path: polygon(
        100% -1px,
        var(--clip-edges) -1px,
        0 var(--clip-top),
        -100vmax var(--clip-top),
        -100vmax var(--clip-bottom),
        0 var(--clip-bottom),
        var(--clip-edges) 100%,
        var(--clip-further) var(--clip-further)
    );
}

input[type="range"]:hover::-webkit-slider-thumb {
    filter: brightness(var(--brightness-hover));
    cursor: grab;
}

input[type="range"]:active::-webkit-slider-thumb {
    filter: brightness(var(--brightness-down));
    cursor: grabbing;
}

input[type="range"]::-webkit-slider-runnable-track {
    background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center /
        100% calc(var(--track-height) + 1px);
}

input[type="range"]:disabled::-webkit-slider-thumb {
    cursor: not-allowed;
}

/* === Firefox specific styles === */
/*input[type="range"],
input[type="range"]::-moz-range-track,
input[type="range"]::-moz-range-thumb {
    appearance: none;
    transition: all ease 100ms;
    height: var(--thumb-height);
}

input[type="range"]::-moz-range-track,
input[type="range"]::-moz-range-thumb,
input[type="range"]::-moz-range-progress {
    background: #fff0;
}

input[type="range"]::-moz-range-thumb {
    background: currentColor;
    border: 0;
    width: var(--thumb-width, var(--thumb-height));
    border-radius: var(--thumb-width, var(--thumb-height));
    cursor: grab;
}

input[type="range"]:active::-moz-range-thumb {
    cursor: grabbing;
}

input[type="range"]::-moz-range-track {
    width: 100%;
    background: var(--track-color);
}

input[type="range"]::-moz-range-progress {
    appearance: none;
    background: currentColor;
    transition-delay: 30ms;
}

input[type="range"]::-moz-range-track,
input[type="range"]::-moz-range-progress {
    height: calc(var(--track-height) + 1px);
    border-radius: var(--track-height);
}

input[type="range"]::-moz-range-thumb,
input[type="range"]::-moz-range-progress {
    filter: brightness(100%);
}

input[type="range"]:hover::-moz-range-thumb,
input[type="range"]:hover::-moz-range-progress {
    filter: brightness(var(--brightness-hover));
}

input[type="range"]:active::-moz-range-thumb,
input[type="range"]:active::-moz-range-progress {
    filter: brightness(var(--brightness-down));
}

input[type="range"]:disabled::-moz-range-thumb {
    cursor: not-allowed;
}*/

/* -------- progress slider ends ---------- */
/* -------------- trip-log photo slider css starts --------------- */
.controls-top{position: absolute;z-index: 1;top: 32%;width: 100%;}
.controls-top a{background-color: #E9E5DF;width: 25px;height: 25px;border-radius: 50%;}
.controls-top a:last-child{float: right;}
.controls-top a:first-child{float: left;}
.controls-top a:last-child i{position: absolute;right: 6px;top: 5px;color: #AB8238;}
.controls-top a:first-child i{position: absolute;left: 6px;top: 5px;color: #AB8238;}
.carousel-indicators{top: 90%;}
.carousel-indicators li{background-color: #DDDDDD;width: 10px;height: 10px;border-radius: 50%;}
.carousel-indicators .active{background-color: #2569D8;}
.tip-popup-img{/*width: 284px;height: 213px;*/width: 80%;height: 100%;margin-left: auto;margin-right: auto;}
/* -------------- trip-log photo slider css ends ----------------- */
.text-desc-italic{font-style: italic;font-weight: 300;font-size: 14px;line-height: 21px;color: #979797;}
.plan-desc{font-weight: 300;font-size: 16px;line-height: 21px;color: #153468;text-align: left;font-style: italic;margin-bottom: 0px;}
.basic-payment, .standard-payment{background: rgba(21, 52, 104, 0.1);border: 1px solid #153468;border-radius: 7px;padding: 10px;margin-top: 20px;margin-bottom: 20px;}
.premium-payment{background: #D9EFDB;border: 1px solid #153468;border-radius: 7px;padding: 10px;margin-bottom: 20px;}
.plan-type{font-weight: 600;font-size: 22px;color: #153468;text-align: center;margin-bottom: 0px;}
.plan-cost{font-weight: 600;font-size: 48px;text-align: center;color: #153468;margin-bottom: 0px;line-height: 40px;}
.plan-time{font-weight: 600;font-size: 14px;text-align: center;color: #153468;margin-bottom: 0px;}
.standard-payment .plan-cost span{font-weight: 600;font-size: 16px;text-align: center;color: #153468;top: 23%;position: absolute;right: 59%;}
.premium-payment .plan-cost span{font-weight: 600;font-size: 16px;text-align: center;color: #153468;top: 20%;position: absolute;right: 70%;}
.plan-status{font-weight: 700;font-size: 16px;line-height: 19px;text-align: center;color: #41AD49;}
.btn-apple-pay{width: 100%;background-color: #000;color: #fff;font-size: 20px;}
.btn-apple-pay svg{width: 27px;height: 27px;fill: #fff;padding-right: 5px;}
.btn-apple-pay:hover{color: #fff;}
.payment-details label{margin-bottom: 0px;}
.card-info{margin-bottom: 1rem;padding-left: 15px !important;padding-right: 15px !important;}
.card-info .col-6:first-child{padding-right: 0px !important;}
.card-info .col-6:last-child{padding-left: 0px !important;}
.card-info .col-6:first-child input{border-top-right-radius: 0px;border-bottom-right-radius: 0px;}
.card-info .col-6:last-child input{border-top-left-radius: 0px;border-bottom-left-radius: 0px;}
.btn-subscribe{width: 100%;background-color: #233968;color: #fff;font-size: 18px;}
.btn-subscribe:hover{background-color: #B1822D;color: #fff;}
.card-image ul li{list-style-type: none;display: inline-block;width: 35px;height: 25px;}
.card-image ul li img{width: 100%;height: 100%;cursor: pointer;}
.card-image{position: absolute;top: 30%;right: 5%;}
.card-cvv{position: absolute;top: 20%;right: 8%;width: 35px;height: 25px;}
.card-cvv img{width: 100%;height: 100%;}
.option{position: absolute;bottom: -2.7%;background-color: #fff;z-index: 1;left: 37%;padding: 10px;}
.option p{font-weight: 400;font-size: 16px!important;color: #6A6A6A;}
/*.home-meter{width: 100%;}*/
.link-img p, .link-file p{font-weight: 400;font-size: 16px;line-height: 19px;color: #000000;margin-top: 10px;margin-bottom: 0px;}
.link-img img{border-radius: 10px;height: 288.85px;width: 100%;}
.bg-link-file{width: 100%;height: 100%;margin-left: auto;margin-right: auto;border-radius: 10px;text-align: center;}
.icon-link-file{width: 100px;height :180px;fill: var(--primary-color);}
.carousel-item.active:after{display: none;}
.workmap-img{height: 23rem;width: 23rem;}
.slick-prev, .slick-next{width: 25px;height: 25px;}
.br-top-gray{border-top: 2px solid #EDEDED !important;}
input.tank-readings {color: #aca5a5;/*width: 100px;*/margin-left: auto;margin-right: auto;}
.screen-100 object{width: 100%;}
.screen-65 object{width: 65%;} 
.screen-50 object{width: 50%;}
.screen-20 object{width: 20%;}
/* ------------ new slider css starts ------------ */
.wrapper{
  /*padding: 70px 0;*/
  padding: 20px 0;
  /*overflow-x: hidden;*/
}
/*.my-slider{
  padding: 0 10px;
}*/
.slick-slider{margin-bottom: 0px;}
.slick-initialized .slick-slide{
  /*background-color: #b32532;
  color: #FFF;
  height: 200px;*/
  margin: 0 0;
  /*display: flex;*/
  align-items: center;
  justify-content: center;
  height: auto;
}
.slick-next, .slick-prev{
  z-index: 5;
}
.slick-next{
  right: 15px;
  width: 25px;
  height: 25px;
}
.slick-prev{
  left: 15px;
  width: 25px;
  height: 25px;
}
.slick-next:before, .slick-prev:before{
  color: #D7D4CF;
  font-size: 26px;
}
.slick-prev:before, .slick-next:before, [dir=rtl] .slick-prev:before{background-color: var(--primary-color);border-radius: 50%;}
.slick-dots li button{display: none;} 
.slick-dots li.slick-active button:before{opacity: .75;color: #2569D8;width: 10px;height: 10px;}

.slick-next:before, .slick-prev:before {
    color: #E9E5DF !important;
}

/* ------------ new slider css ends ------------ */ 
.desk-50{width: 50%;}
/*.draggable .slick-track{width: auto !important;}*/
.cart-icon{width: 16px;height: 16px;fill: var(--primary-color);margin-top: -4px;}
.cart-set{position: absolute;right: 15px;top: 29px;}
/*.records-img-small{width: 20px;height: 20px;margin-right: 10px;}*/
.admin-pop-img{fill: var(--primary-color);height: 250px;width: 250px;}
.arow-right{width: 14px;height: 16px;fill: #AB8238;}
.current-read{font-weight: 500;font-size: 16px;line-height: 20px;color: #2E2E2E;}
.plan{padding-top: 20px;padding-bottom: 20px;}
.plan:hover{background: #ccc;border-radius: 10px;}
.plan-img{width: 36%;}
.plan-name{font-weight: bold;}
.plan-price span:first-child{font-weight: bold;font-size: 30px;}
.plan-price span:last-child{position: absolute;line-height: 15px;margin-top: 7px;margin-left: 3px;font-size: 16px;}
.plan-icon{width: 16px;height: 16px;}
.badge-tremate{font-size: 12px;background-color: #eee;padding: 2px 4px 2px 8px;width: 25%;border-radius: 3px;}
.trial-img{width: 100%;margin-top: 14px;}
.no-border{border: none;}
.done-subscription{padding-top: 47%;}
.tick-green{fill: #3BB702;width: 50px;height: 50px;}
/*-- ---- home new design css starts ---- */
ul.home-readings {
    display: grid;
    /*grid-template-columns: repeat(auto-fit, 120px);*/
    grid-template-columns: repeat(auto-fit, 114px);
    /*grid-gap: 1rem;*/
    justify-content: space-between;
    align-content: center;
    /* boring properties: */
    list-style: none;
    /*width: 90vw;*/
    /*height: 90vh;*/
    margin: 15px auto;
    /*border: 5px solid green;*/
    padding: 0;
    overflow: auto;
    }
ul.home-readings li {
    /*background: tomato;*/
    height: 118px;
    padding: 5px 0;
    text-align: center;
}
/*object{height: 78%;width: 85%;}*/
object{height:100%;width:100% !important;}
.row.text-center.box.mx-auto.mitere-mobile.equipment_tanks {
    margin: 5px 0 18px;z-index: 0;
    position: relative;
}
.live_Search td object{height:auto;width:100% !important;}
@media(min-width:575px){
   object{height: 78%;width: 85% !important;}
   .live_Search td object{height:auto;width: 85% !important;}
    .row.text-center.box.mx-auto.mitere-mobile.equipment_tanks {
        margin:0 0;
    } 
}

.item-4{cursor: pointer;}
#SingleBoatModal ul.boatDisplay li .item-4{cursor: default;}
.meter-reading{width: 80%;margin-top: 13px;}
/*-- ---- home new design css ends ---- */
.slick-slider{margin-bottom: 0px !important;}
.trunck-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width: 100%;margin-bottom: 0px;}
.ttext{color: #000;font-size: 18px;padding-left: 0;font-weight: 400; width: 100%;}
.table-responsive td p{margin-bottom: 0px;}
.dollar-icon{height: 19px;width: 19px;fill: #000;}
.home-readings li{cursor: pointer;}
/* ------- css from bhavin starts ------- */
.tbl-a-yellow {
    color: #B1822D;
    font-size: 18px;
}
.table-responsive.tbl-mb {
    max-height: 240px;
}
/* ------- css from bhavin ends ------- */
.brochure{margin-top: -10px;}
.body-footer{min-height: 100vh;}
/* -------- css for choose file on record page starts --------- */
input.set-dsgn::file-selector-button {
    font-weight: 700;
    font-size: 16px;
    line-height: 19px;
    background-color: transparent;
    color: #B1822D;
    border: none;
    margin-top: 6px;
    visibility: hidden;
}
input.set-dsgn{border: none;}
input.set-dsgn::before {
    content: "Select file";
    /*content: "Select photo/file";*/
    position: absolute;
    z-index: 2;
    display: block;
    background-color: #eee;
    width: 125px;
    font-weight: 700;
    font-size: 16px;
    line-height: 19px;
    background-color: transparent;
    color: var(--primary-color);
    border: none;
    margin-top: 6px;
}
/* -------- css for choose file on record page ends --------- */
.add-item-set{
    background-color: #FCFCFC;
    cursor: pointer;
    border-top: 1px solid #EEEEEE;
    border-left: none;
    border-right: none;
    text-align: left;
    font-size: 16px;
    border-bottom: 1px solid #153468;
}
.bg-accordian{border-top:none; border-bottom:none;}

    @media(min-width:576px){
        .bg-accordian{border-top: 1px solid #EEEEEE; /*border-bottom: 1px solid #EEEEEE;*/}
    }
.accordian-card{/*background-color: #FCFCFC;*/border-top:#A7A7A7 1px solid;/*background-color: #f0f0f0;*//*border-bottom: 1px solid #EEEEEE;*/}


td.trunck-desk p{white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 150px;}
td p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;/*width: 180px;width: 200px;*/margin-bottom: 0px;}

#livesearch td p { min-width:90% !important; width:65px !important;}

.cbody{ padding: 3px 10px; }
.hs-0:after { content: "\f282"; }
/* ------ bell dropdown css starts -------- */
.dropdown-toggle::after{display: none;}
.noti-title {
    background-color: transparent;
    padding: 15px 20px;
}
.text-dark {
    --ct-text-opacity: 1;
    color: rgba(var(--ct-dark-rgb),var(--ct-text-opacity))!important;
}
.bell-card-body{position: relative;}
.dropdown-item.active, .dropdown-item:active{
    color: #16181b;
    text-decoration: none;
    background-color: #e9ecef;
}
.notify-icon {
    float: left;
    height: 36px;
    width: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 50%;
    color: #fff;
}
.bell-card-body{
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #153468;
}
.noti-close-btn{
    position: absolute;
    top: 3px;
    right: 12px;
    fill: #6c757d !important;
    width: 15px;
    height: 15px;
}
/* ------ bell dropdown css ends -------- */
.main-reminder-icon{
    color: #000000;
    fill: #000000;
    font-weight: 900;
    width: 23px !important;
    height: 23px !important;
}
#collapse1.active:after{display: none;}
.track-level-active .active:after{display: none;}
canvas { border: none;margin: 0px;padding: 0px;}
.datepicker-days .active:after{content: none;}
/*.datepicker-dropdown{width: 16%;}*/
.dropdown-menu.show {
    max-height: 286px;
    overflow-y: scroll;
}
.box {
    place-content:center;
    flex-wrap:wrap; width: 100%;
    /*float:left;*/
    /*display: block;*/
    /*height: 200px;
    width: 200px;*/
}
.item-userdetail{width: 24%;}
.item-4{width:13%;}
.modal-content{border: none;}
.modal.show{padding-right: 0px !important;}
.icon-link{fill: #737373;width: 20px;height: 15px;}
.service-date-set{width: 16%;}
.mitere-mobile{display: none;}


.bg-home2,.bg-home3,.bg-home1{width:80px !important;}
@media(min-width:420px){
    .bg-home2,.bg-home3,.bg-home1{width:95px !important;}
}
@media(min-width:510px){
    .bg-home2,.bg-home3,.bg-home1{width:108px !important;}
}
@media(min-width:570px){
    .bg-home2,.bg-home3,.bg-home1{width:114px !important;}
}
@media(min-width:600px){
    .bg-home2,.bg-home3,.bg-home1{width:66px !important;}
}
@media(min-width:620px){
    .bg-home2,.bg-home3,.bg-home1{width:69px !important;}
}
@media(min-width:720px){
    .bg-home2,.bg-home3,.bg-home1{width:80px !important;}
}
@media(min-width:840px){
    .bg-home2,.bg-home3,.bg-home1{width:89px !important;}
}
@media(min-width:960px){
    .bg-home2,.bg-home3,.bg-home1{width: 95px !important;}
}
@media(min-width:1020px){
    .bg-home2,.bg-home3,.bg-home1{width: 80px !important;}
}
@media(min-width:1100px){
    .bg-home2,.bg-home3,.bg-home1{width: 85px !important;}
}

.item-4{width:21%;}
@media(min-width:420px){
    .item-4{width:21%;}
}
@media(min-width:590px){
    .item-4{width:21%;}
}
@media(min-width:600px){
    .item-4{width:13%;}
}
@media(min-width:1100px){
    .item-4{width:13%;}
}



/* ---------- data table css starts ----------- */
/*table.dataTable thead>tr>th.sorting_asc:before, table.dataTable thead>tr>th.sorting_desc:after, table.dataTable thead>tr>td.sorting_asc:before, table.dataTable thead>tr>td.sorting_desc:after {
    color: blue;
}*/
/*table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled{
    background-position: left center;
}*/
/*table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc{background-repeat: no-repeat;background-position: 98% 54%;background-position: right;}*/
/*table.dataTable thead>tr>th.sorting_asc:before, table.dataTable thead>tr>th.sorting_desc:after, table.dataTable thead>tr>td.sorting_asc:before, table.dataTable thead>tr>td.sorting_desc:after {
    opacity: .6;
}*/
/*table.dataTable thead th, table.dataTable thead td{padding: 10px 18px 10px 0px !important;}*/
/*table{border-collapse: collapse !important;}
table.dataTable tbody tr{background-color: #fff !important;}
table.dataTable thead th, table.dataTable thead td{border-bottom: 1px solid #EEEEEE !important;}
table.dataTable tbody th, table.dataTable tbody td{padding: 8px 2px 8px 0px!important;}
table.dataTable.display tbody tr.odd>.sorting_1,
table.dataTable.order-column.stripe tbody tr.odd>.sorting_1,
table.dataTable.display tbody tr.even>.sorting_1,
table.dataTable.order-column.stripe tbody tr.even>.sorting_1 {
    background-color: #fff !important;
}*/
/*table.dataTable thead>tr>th.sorting,
table.dataTable thead>tr>th.sorting_asc,
table.dataTable thead>tr>th.sorting_desc,
table.dataTable thead>tr>th.sorting_asc_disabled,
table.dataTable thead>tr>th.sorting_desc_disabled,
table.dataTable thead>tr>td.sorting,
table.dataTable thead>tr>td.sorting_asc,
table.dataTable thead>tr>td.sorting_desc,
table.dataTable thead>tr>td.sorting_asc_disabled,
table.dataTable thead>tr>td.sorting_desc_disabled {
    background-position: 98% 54%;
}*/
/*table.dataTable thead>tr>th.sorting:before,
table.dataTable thead>tr>th.sorting:after,
table.dataTable thead>tr>th.sorting_asc:before,
table.dataTable thead>tr>th.sorting_asc:after,
table.dataTable thead>tr>th.sorting_desc:before,
table.dataTable thead>tr>th.sorting_desc:after,
table.dataTable thead>tr>th.sorting_asc_disabled:before,
table.dataTable thead>tr>th.sorting_asc_disabled:after,
table.dataTable thead>tr>th.sorting_desc_disabled:before,
table.dataTable thead>tr>th.sorting_desc_disabled:after,
table.dataTable thead>tr>td.sorting:before,
table.dataTable thead>tr>td.sorting:after,
table.dataTable thead>tr>td.sorting_asc:before,
table.dataTable thead>tr>td.sorting_asc:after,
table.dataTable thead>tr>td.sorting_desc:before,
table.dataTable thead>tr>td.sorting_desc:after,
table.dataTable thead>tr>td.sorting_asc_disabled:before,
table.dataTable thead>tr>td.sorting_asc_disabled:after,
table.dataTable thead>tr>td.sorting_desc_disabled:before,
table.dataTable thead>tr>td.sorting_desc_disabled:after {
    left: 30%;
}*/
table.dataTable thead>tr>th.text-right.sorting:before,
table.dataTable thead>tr>th.text-right.sorting:after,
table.dataTable thead>tr>th.text-right.sorting_asc:before,
table.dataTable thead>tr>th.text-right.sorting_asc:after,
table.dataTable thead>tr>th.text-right.sorting_desc:before,
table.dataTable thead>tr>th.text-right.sorting_desc:after,
table.dataTable thead>tr>th.text-right.sorting_asc_disabled:before,
table.dataTable thead>tr>th.text-right.sorting_asc_disabled:after,
table.dataTable thead>tr>th.text-right.sorting_desc_disabled:before,
table.dataTable thead>tr>th.text-right.sorting_desc_disabled:after,
table.dataTable thead>tr>td.text-right.sorting:before,
table.dataTable thead>tr>td.text-right.sorting:after,
table.dataTable thead>tr>td.text-right.sorting_asc:before,
table.dataTable thead>tr>td.text-right.sorting_asc:after,
table.dataTable thead>tr>td.text-right.sorting_desc:before,
table.dataTable thead>tr>td.text-right.sorting_desc:after,
table.dataTable thead>tr>td.text-right.sorting_asc_disabled:before,
table.dataTable thead>tr>td.text-right.sorting_asc_disabled:after,
table.dataTable thead>tr>td.text-right.sorting_desc_disabled:before,
table.dataTable thead>tr>td.text-right.sorting_desc_disabled:after {
    right: 0;
}
/* ---------- data table css ends ------------- */
/* ----- 15-11-22 css for tbl scroll starts ------ */
#service-history-tbl_wrapper .row, 
#user-search-tbl_wrapper .row{margin-left: auto!important;margin-right: auto!important;}
/* ----- 15-11-22 css for tbl scroll ends ------ */
.modal-body-height{height: 282px;}
/*.home-reading-txt{margin-top:30%;}*/
.vis-hidden{visibility: hidden;}
.msg-pop-img img{width: 100%;}
.bg-transparent{background-color: transparent;}
/* ---------- photo preview transparent background css starts -------- */
#trip-photo-preview{
    background-color: #00000096;
}
#trip-photo-preview .modal-content{
    background-color: transparent;
}
#trip-photo-preview .modal-header{
    background-color: transparent;
    border: none;
}
#trip-photo-preview .modal-title, #trip-photo-preview .modal-body button{
    display: none;
}
#trip-photo-preview .modal-header button{
    position: absolute;
    right: 20%;
    top: 1%;
}
/* ---------- photo preview transparent background css ends -------- */
.font-bold {font-weight: bold;}

.my-auto img.equipment-icon,
.my-auto svg.equipment-icon {
    position: relative;
    left: 12px;
}
@media(max-width:767px){
    .my-auto img.equipment-icon,
    .my-auto svg.equipment-icon {
        position: relative;
        left: 0;
    }
}
@media(min-width:992px){
    .my-auto img.equipment-icon,
    .my-auto svg.equipment-icon {
        position: relative;
        left: 0;
    }
}

/* spinner */

/* spinner */
.loader-ring {
  display: none;
  width: 100%;
  height: 100%;
  left: -1rem;
  right: 0;
  top: 0;
  bottom: 0;
  /*background-color: rgba(225,225,225,0.8);*/
  z-index: 9999;
  position: fixed;
}
.loader-ring:after {
  content: " ";
  display: block;
  width: 84px;
  height: 84px;
  margin: -32px;
  border-radius: 50%;
  border: 6px solid #fff;
  border-color: var(--spinner-color);
  animation: loader-ring 1.2s linear infinite;position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.loader-ring img {
  height: 60px;
  display: block;
  width: auto;
  margin: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@keyframes loader-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/*.loader-ring {
    display: none;
    width:100%; height: 100%;
    left:-40px;right:0;top:0;bottom:0;
    background-color: rgba(85,85,85,0.9);
    z-index:9999;position: absolute;
}
.loader-ring:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid #fff;
  border-color: #366ec9 #366ec9 #cc9933 #cc9933;
  animation: loader-ring 1.2s linear infinite;position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.loader-ring img {
  height: 40px;
  display: block;
  width: auto;
  margin: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@keyframes loader-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}*/

/*table .c-items td p{
    width:195px !important;
}*/
table .c-items td p,table .t-items td p{
    width:250px !important;
}
.tooltip { pointer-events: none !important; overflow: auto !important;}

@media(min-width:576px){
     table .c-items td p, table .t-items td p {
        width: 460px !important;
    }
}
@media(min-width:768px){
     table .c-items td p, table .t-items td p {
        width: 690px !important;
    }
}
@media(min-width:1024px){
    table .c-items td p, table .t-items td p {
        width: 100% !important;
    }
   table .c-items td p,table .t-items td p{width:100% !important}
}
.table-responsive table tbody tr td p {white-space: nowrap;}
.commonModal .table-responsive table tbody tr td p {white-space: nowrap;}
@media(min-width:1024px){
    .table-responsive table tbody tr td p {white-space: pre-wrap;}
}

.form-check .cl-times {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 62% !important;
}
@media(min-width:768px){
    .form-check .cl-times {
        width: 88% !important;
    }
}

.checklist-modal-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
} 

input#maintenance_hours, input#maintenance_days {
    width: 94px;
    text-align: center;
}
.form-wrapper .OR_center{
    position: relative;
    top: -15px;
}
@media(min-width:560px){
    input#maintenance_hours, input#maintenance_days {
        width: 200px;
        text-align: center;
    }
}
#todoadd form#item_form {
    margin: auto;
}

.slick-initialized .slick-slide {
    display: inline-block !important;
    vertical-align: top;
}
.slick-slide {
    float: none !important;
}

a#system-redirection {
    position: relative;
    margin: 10px 0 0;
    display: block;
}

/* ----------------------------------------------- */
 .mobile-view header {
  background-color: #000;
  position: fixed;
  width: 100%;
  left: 0; top: 0;
  margin:0; z-index: 2;
}
.mobile-view .main-header {
  padding: 0 15px 0 0;
}
.boatAddedContainer{position: relative; margin:44px 0 0;}
.boatAddedContainer .item-4{height: auto;}
.Pricing_boatAddedContainer{margin:44px 0 0 !important;}

@media(min-width:768px){
    .mobile-view header {
      position: relative;
    }
    .boatAddedContainer{position: relative; margin:0 auto;}
}
 .container{
  width: 100%;
  /*padding-right: 0;
  padding-left: 0;*/
}
@media(min-width:768px){
     .container{
          width: 95%;
          padding-right: 0;
          padding-left: 0;
        }
}
@media(min-width:992px){
    /*.page-bg{background-color: #E3E3E3;}*/
    .mobile-view header{background-color: #fff;}
    .container{
      width: 100%;
      padding-right:15px;
      padding-left:15px;
    }
}

.col.foot-change.active{background: #000;}
.col.foot-change.active::after{content:''!important;}
/*.card-body.cbody {
    margin: 0 0 20px;
}*/
.card-body.cbody {
    margin: 0;
    background: #fcfcfc;
}

/* SearchInput */
    .SearchInput{display: inline-flex; margin: 0 15px 0 0; cursor: pointer;}
    .SearchInput .form-control{
        height: auto; background-color: transparent; color: #fff;
        padding: 4px 2.375rem;font-size: 15px; line-height: auto; margin: 5px 0 0;border: 1px solid #fff;
        border-radius: 5px; display: none;
    }
    .SearchInput .search-addon {
      position: relative;
      /*z-index: 2;*/
      display: block;
      text-align: center;
      pointer-events: none;
      color: #fff; background:transparent;top: -3px; padding: 0; 
    }
    .SearchInput .search-addon svg{
      fill: #fff;
    }
    .SearchInput .form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
      color: #fff;
    }
    .SearchInput .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
      color:  #fff;
    }
    .SearchInput .form-control::-ms-input-placeholder { /* Microsoft Edge */
      color:  #fff;
    }

    @media(min-width:756px){
        .SearchInput .form-control{display: inline-flex;}
        .SearchInput .search-addon {
          position: absolute;top: 2px; padding:.375rem .75rem;
        }
    }

    @media(min-width:992px){
        .SearchInput .form-control{
            color: #000;border: 1px solid #000000;
        }
        .SearchInput .form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
          color: #979797;
        }
        .SearchInput .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
          color:  #979797;
        }
        .SearchInput .form-control::-ms-input-placeholder { /* Microsoft Edge */
          color:  #979797;
        }
        .SearchInput .search-addon svg{
          fill: #979797;
        }
    }

/* InnerSearch */
    .InnerSearch {
        display: inline-flex;
        margin: 0;
        cursor: pointer;
        width:100%; position: relative; z-index:1;
    }
    .InnerSearch .form-control{
        height: auto; background-color: transparent; color: #979797;
        padding: 4px 2.375rem;font-size: 15px; line-height: auto; margin: 5px 0 0;border: 1px solid #fff;
        border-radius: 5px; display: inline-flex;
    }
    .InnerSearch .search-addon {
      position: absolute;
      /*z-index: 2;*/
      display: block;
      text-align: center;
      pointer-events: none;
      color: #fff; top: 2px; padding:.375rem .75rem; background: transparent; left: 0;
    }
    .InnerSearch .form-control{
        color: #000;border: 1px solid #153468; z-index:10;
    }
    .InnerSearch .input-group>.custom-file .custom-file-input:focus~.custom-file-label,
    .InnerSearch .input-group>.custom-select:focus, .input-group>.form-control:focus {
        z-index: 9999;
    }
    .InnerSearch .form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
      color: #979797;
    }
    .InnerSearch .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
      color:  #979797;
    }
    .InnerSearch .form-control::-ms-input-placeholder { /* Microsoft Edge */
      color:  #979797;
    }
    .InnerSearch .search-addon svg{
      fill: #979797;
    }

@media(min-width:420px){
    .InnerSearch {
        width:350px;
    }
}
@media(min-width:420px){
    .SearchInput {
        width:350px;
    }
}
.need_help{color: #6A6A6A}

/* btn round to close */
.PlusIcon {
  position: absolute;
  bottom: 60px;
  right: 20px;transition: 0.5s ease;
}
/*.PlusIcon .btn-round {
  width: 55px;
  height: 55px;
  border-radius: 100px;
  background-color: #000 !important;
  right: 0;
  position: absolute;
  top: -60px;cursor: pointer;
    transition: 0.5s all;
}*/
.PlusIcon .btn-round {
    width: 50px;
    height: 50px;
    border-radius: 100px;
    background-color: #000 !important;
    right: 0;
    position: fixed;
    bottom:70px;
    cursor: pointer;
    transition: 0.5s ease;
    right:19px;box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.PlusIcon .btn-round.closeButton {
  background-color: #fff !important;border: 1px solid #000000;transition: 0.5s ease;
}
.PlusIcon .close {
  position: relative;
  display: inline-block;
  width: 25px;
  height: 25px;
  top: 12px;
  left: -12px;
  overflow: hidden;
  opacity: 1;transition: 0.5s ease;
}
.PlusIcon .btn-round.closeButton .close {
    top: 10px;
    left: -12px;
}
.PlusIcon .close::before, .PlusIcon .close::after {
  content: "";
  position: absolute;
  height: 3px;
  width: 100%;
  top: 50%;
  left: 0;
  margin-top: -1px;
  background: #C99136; border-radius: 20px;transition: 0.5s ease;
}
.PlusIcon .close:not(:disabled):not(.disabled):focus, .PlusIcon .close:not(:disabled):not(.disabled):hover{opacity: 1}

.PlusIcon .close::before {
  transform: rotate(0deg);
}
.PlusIcon .close::after {
  transform: rotate(90deg);
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes plusButton {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -135deg);
    transform: rotate3d(0, 0, 1, -135deg);
    background-color: #000;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    background-color: #000;
  }
}
@keyframes plusButton {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 135deg);
    transform: rotate3d(0, 0, 1, 135deg);
    background-color: #000;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    background-color: #000;
  }
}
.PlusIcon .plusButton {
  -webkit-animation-name: plusButton;
  animation-name: plusButton;
}

@-webkit-keyframes closeButton {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    background-color: blue;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 135deg);
    transform: rotate3d(0, 0, 1, 135deg);
    background-color: #000;
  }
}
@keyframes closeButton {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    background-color: #000;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 135deg);
    transform: rotate3d(0, 0, 1, 135deg);
    background-color: #000;
  }
}
.PlusIcon .closeButton {
  -webkit-animation-name: closeButton;
  animation-name: closeButton;
}

@-webkit-keyframes circleShape {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    background-color: #000;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 135deg);
    transform: rotate3d(0, 0, 1, 135deg);
    background-color: #000;
    border-radius: 100px;
  }
}
@keyframes circleShape {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    background-color: #000;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 135deg);
    transform: rotate3d(0, 0, 1, 135deg);
    background-color: #000;
    border-radius: 100px;
  }
}
.circleShape {
  -webkit-animation-name: circleShape;
  animation-name: circleShape;
}

.PlusIcon .dropup-content {
    display: none;
    border-radius: 10px;
    position: relative;
    background-color:transparent !important;
    min-width: auto; width: auto;
    bottom:60px;
    z-index: 1;
    right: auto; left: 10px;
    padding: 0 10px;
    border:none;
    box-shadow:none; transition: 0.5s ease;
}

/* MenuList */
.MenuList {
  padding: 0 0 10px;
}
.MenuList li {
  /*background: #FFFFFF;
  border: 1px solid #C99136;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 50px;
  list-style: none;
  padding: 0 15px;
  margin: 10px 0;*/

    background: transparent;
    border: none;
    box-shadow: none;
    display: flex;
}
/*.MenuList span.PlusIcon_MenuList {
    width: 50px;
    height: 50px;
    border-radius: 100px;
    border: 1px solid #000000;
    background: #fff;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}*/

.MenuList span.PlusIcon_MenuList {
    width: 50px;
    height: 50px;
    border-radius: 100px;
    border: 1px solid #000000;
    background: #fff;
    padding: 0;
    display: inline-block;
    position: relative;
    top: 17px;
    margin: 0 0 0 10px;
}
/*.PlusIcon .MenuList li {
  margin:10px 0;
}*/
.PlusIcon .MenuList li {
    margin: 0 0 5px 0;
    padding: 0;
    vertical-align: middle;
    display: block;
}
/*.MenuList a {  
  padding: 10px 0;
    margin: 0;
    line-height: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 23px;
    color: #000000 !important;
    position: relative;
    border-bottom: none;
    display: inline-block;
    text-align: right;
    margin:5px 15px 0 0;
    color: #fff !important;text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}*/
.MenuList a {
    padding: 0;
    line-height: normal;
    font-weight:300;
    font-size: 20px;
    line-height: normal;
    position: relative;
    border-bottom: none;
    display: block;
    text-align: right;
    margin: 0px;
    color: #fff !important;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: 'Roboto', sans-serif !important;
}
.MenuList a img,.MenuList a svg {
  position: absolute;
  right: 10px;
  top:10px;
  width: 28px;
  height: 28px;color: #C99136;
}
.hamburgerIcon .MenuList a svg{
    top:7px;
}
@media(min-width:1024px){
    .PlusIcon{display: none}
}
.GreyBG {
    background:rgba(0, 0, 0, 0.75);
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999;
    top: 0;
    left: 0;transition: 0.5s ease;
}


/* hamgerber menu */
/*.MainBG-hamburger,
.hamburgerIcon {
  position: relative;
  z-index: 99;
  cursor: pointer;
}*/
/* --- hamburger button --- */
.MainBG-hamburger.GreyBG {
    background:rgba(0, 0, 0, 0.75);
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999;
    top: 0;
    left: 0;
}

.MainBG-hamburger .MenuList a{ 
    text-align: left;color: #fff !important;
}
/*.MainBG-hamburger .MenuList a:hover{
    font-weight: 500;
}*/
/*.hamburgerIcon {
  position: absolute;
}*/
/*.MainBG-hamburger .hamburger {
  text-align: -webkit-center;
  display: block;
  cursor: pointer;
  width: 35px;
  height: 40px;
  z-index: 999;
  top: -30px;
  position: relative;
  margin: 0;
  padding: 0;
  left: -20px;
}*/
/*.MainBG-hamburger .hamburger.active {
  background: #fff;
  border-radius: 100px;
  width: 40px;
  height: 40px;
  top: 0px;
  left:-30px; border: 1px solid #000000; display: flex;
}*/
.MainBG-hamburger .hamburger.active {
    background: #fff;
    border-radius: 100px;
    width: 50px;
    height: 50px;
    top:-45px;
    right: 20px;
    border: 1px solid #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    line-height: 50px;
    margin: 0;left: 76%;
}
.MainBG-hamburger .hamburger {
    text-align: -webkit-center;
    display: block;
    cursor: pointer;
    width: 30px;
    height: 30px;position: relative;
    top: 1px;
}
.MainBG-hamburger .hamburger span,
.MainBG-hamburger .hamburger span::after,
.MainBG-hamburger .hamburger span::before {
    display: block;
    position: relative;
    width: 20px;
    height: 1px;
    background: #ffffff;
    border-radius: 50px;
    transition: 500ms cubic-bezier(0.77, 0, 0.175, 1);top: 13px;
}
.MainBG-hamburger .hamburger.active span,
.MainBG-hamburger .hamburger.active span::after,
.MainBG-hamburger .hamburger.active span::before{top: 0;width: 30px;}

.MainBG-hamburger .hamburger span::after,
.MainBG-hamburger .hamburger span::before{
    content: "";
    position: absolute;
}
/*.MainBG-hamburger .hamburger span{
    top: 19px; left:6px; transition: 0.5s all;
}*/

.MainBG-hamburger .hamburger span::after {
    top:8px;transition: 0.5s all;
}
.MainBG-hamburger .hamburger span::before{
    top:-8px;
}
/*@media(min-width:768px){
    .MainBG-hamburger .hamburger.active {
      left: -20px;
    }
}*/
/* --- transition effect from hamburger to X --- */
.MainBG-hamburger .hamburger.active span {
    background: transparent; right: 3px;
}
.MainBG-hamburger .hamburger.active span::after, .MainBG-hamburger .hamburger.active span::before {
  background: #C99136;
  top: -1px;
  left: 3px;
  padding: 1.5px;
}
.MainBG-hamburger .hamburger.active span::after,
.MainBG-hamburger .hamburger.active span::before{
    /*background: #ffffff;
    top: 0px;*/
}
.MainBG-hamburger .hamburger.active span::after{
    transform: rotate(225deg);
}
.MainBG-hamburger .hamburger.active span::before{
    transform: rotate(-225deg);
}

.MainBG-hamburger .dropup-content {
  display: block;
  border-radius: 10px;
  position: absolute;
  background-color: transparent !important;
  min-width: 100%;
  bottom:1.5px;
  z-index: 1;
  right:0;
  left: auto;
  padding: 0 10px;
  border: none;
  box-shadow: none;transition: 0.5s all;
}
.MainBG-hamburger.GreyBG .dropup-content{
    right:0px;
}
.MainBG-hamburger .MenuList{display: none;}
.MainBG-hamburger .MenuList a {
    padding: 10px 15px;
    line-height: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 23px;
    color: #000000 !important;
    position: relative;
    border-bottom: none;
    display: inline-block; text-align: left;margin:0;
    background: #FFFFFF;
    border: 1px solid #C99136;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 22.5px;text-shadow: none;
}
.MainBG-hamburger .MenuList li {/*
  background: transparent;
  border: none;
  box-shadow: none;*/ display:flex;
  /*background: #FFFFFF;
    border: 1px solid #C99136;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 22.5px;*/
    margin:15px 0px 10px; padding: 0 10px;
}
/*.MainBG-hamburger.GreyBG .hamburgerIcon {
  position: absolute;
  bottom: 10px;
  right: 0; 
}*/
.MainBG-hamburger.GreyBG .hamburgerIcon {
    position: absolute;
    bottom: 0;
    right: 0;
    height:auto;
    z-index: 9999;
}
/*.hamburgerIcon .MenuList li .hamburger_Menuimages{ display: initial;}*/
.hamburgerIcon .MenuList li .hamburger_Menuimages {
    display: initial;
    position: relative;
    top: -33px;
    right: -6px;
    width: 100%;
    display: block;
}
/*.hamburgerIcon .MenuList li .hamburger_Menuimages{
    width: 50px;
    height: 50px;border-radius: 100px;border: 1px solid #000000;background: #fff;padding: 0; display: initial;
    align-items: center;
    justify-content: center;
}*/
.hamburgerIcon .MenuList li img,
.hamburgerIcon .MenuList li svg {
  vertical-align: middle;
  border-style: none;
  display: inline-block;  
    width: 28px;
    height: 28px;
   
}


/*@media(min-width:576px){
    .MainBG-hamburger .hamburger {
      top: -20px;
      left: -10px;
    }
}
@media(min-width:620px){
    .MainBG-hamburger .hamburger {
      left: -16px;
    }
}
@media(min-width:768px){
    .MainBG-hamburger.GreyBG .dropup-content{
        right:0px;
    }    
}*/

/*.GeneratorBG {background: rgba(228, 7, 7, 0.03);border: 0.5px solid #E40707;}
.WatermakerBG{background: rgba(255, 157, 0, 0.03);border: 0.5px solid #FF9D00;}*/

#maintenance-reminder-slider .my-slider .pip .set-bgsize{background-color: #D8D8D8 !important; border-color: #979797 !important;filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); padding: 0 !important;}
#maintenance-reminder-slider .my-slider .pip.slick-slide img {
    border-radius: 5px !important;
}
#maintenance-reminder-slider .my-slider .pip.slick-slide .plus-icon {
    margin-top: 1.5em !important;
}

.slick-dots {
    bottom: -30px !important;
}
.slick-dots li {
    margin: 0 !important;
}
.slick-dots li button:before {
    font-size: 16px !important;
    line-height: 20px !important;
}
.slick-dots li.slick-active button:before {
    color: var(--primary-color) !important;
}

.form-control {
    background: #FFFFFF;
    border: 0.5px solid #979797;
    border-radius: 5px !important; 
}

.form-control:disabled, .form-control[readonly] {
    background-color: #eee !important;
    opacity: 1;
}



.footer-menu .col {
    margin-top: 1px !important;padding:8px 0;
}
.foot-change a {
    position: relative !important;
    top: 0 !important;
}

@media(min-width:580px){
    .foot-change a {
        position: relative !important;
        top: 0 !important;
    }
}
/*.MainBG-hamburger .hamburger {
    top: 7px;
}*/
.MainBG-hamburger .hamburger {
  top: -3px;
  text-align: center;
  left: 50%;
  margin-left: -9px;
}
@media(min-width:580px){
    .MainBG-hamburger .hamburger {
        top:-2.8px;
    }
}

body#OPenPopup {
    z-index: 99999;
    position: relative;
}

#loginForm .login-set {
    margin-left: 0;
}
.logincontent .loginbtn.LoginPageBtn{ width:250px !important; height:50px; }
.input-group-text {
    border: 0.5px solid #979797;
}
.SettingForm{padding: 3px 10px;}

header .boat-txt{margin-right:0;}
header span.boat-txt{
    display: inline-block;
    width:130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    top: 6px; text-align: left; margin: 0 5px 0 0;
}
@media(min-width:420px){
    header span.boat-txt{
        width:170px;
    }
}
@media(min-width:576px){
    header span.boat-txt{
        width:280px;
    }
}
@media(min-width:620px){
    header span.boat-txt{
        width:300px;
    }
}
@media(min-width:756px){
    header span.boat-txt{
        width:136px;
    }
}
@media(min-width:820px){
    header span.boat-txt{
        width:173px;
    }
}
@media(min-width:920px){
    header span.boat-txt{
        width:222px;
    }
}

@media(min-width:1200px){
    header span.boat-txt{
        width:222px;
    }
}
/*@media(min-width:815px){
    header span.boat-txt{
        width:90px;
    }
}*/

.modal-dialog-centered {
    justify-content: center;
}
.slick-prev {
  left: -15px !important;
}
.slick-next {
  right: -15px !important;
}
.AddBoat_btn {
    position: relative;
    top: 6px;
}

.Ser_History_Note {
position: relative;
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: #808080;
padding: 0 10px;
}

@media screen and (max-width: 580px) {
    .truncate-string table tr td:last-child {
        width: 285px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }

    #service_log_tbl tr td span {
        width: 235px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }
}

/* drag-drop */
.facet-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-right: 10px;
  background: #transparent;
  padding: 5px;
  width: 143px;
  min-height: 1.5em;
  font-size: 0.85em; width: 100%; text-align: center;
}
.facet-list li {
  margin: 10px;
  padding: 10px;
  font-size: 1.2em;
  width: auto;
}
.facet-list li.placeholder {
  height:auto
}
.facet {
    border:none;
    background-color:transparent;
    cursor: move;
    width: 100%;
    display: inline-block;
    margin: auto;
    padding: 0 0 10px;
}

@media(min-width:576px){
    .facet {
        /*width: 49%;*/ padding: 10px;
    }
}
@media screen and (max-width: 580px){
    .facet .home-svg, .facet .home-fan {
        display: block;
    }
}
.facet.ui-sortable-helper {
  opacity: 0.5;
}
.placeholder {
  background-color: #fffffd;
}
.facet .step3-head
    { color:#979797;font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-size: 28px;
    line-height: 33px;
    text-align: center;
}

.step3 .facet .track-level svg {
     color:#979797; 
     fill: #979797; 
}
.track-level .ImageOpacity{opacity: 0.4;}
.track-level.active svg {
     color:#000; 
     fill: #000; 
}
.track-level.active .ImageOpacity {
    opacity: 1;
}
.step3 .facet .track-level.active svg {
     color:#000; 
     fill: #000; 
}
.facet .step3-desc {
    color: var(--primary-color);
    font-weight: 700;
    position: absolute;
    bottom: 4px;
}
.facet .step3-desc {
    color: var(--primary-color);
    font-weight: 700;
    position: absolute;
    bottom:6px;
    text-align: center;
    display: inline-block;
    left: 0;
    right: 0;
    width: 100%;
}
@media(min-width:576px){
   .facet .step3-desc {
        left: 15px; 
    }
}

.facet .step3-desc svg{
     color: var(--primary-color); 
     fill: var(--primary-color); position: relative; margin: 0 5px 0 0;
}
/*.facet.drop_card .track-level{
    background: #FFFFFF;
    border: 0.5px solid #979797;
    width: 100%;
    height: 70px;
    border-radius: 5px;position: relative;
}*/
.facet.drop_card .track-level {
    background: #FFFFFF;
    border: 0.5px solid #979797;
    width: 90%;
    height: 70px;
    border-radius: 5px;
    position: relative;
    margin: 0 !important;
}
@media(min-width:576px){
    .facet.drop_card .track-level{
        width: 247.31px;
        height: 70px;margin: auto !important;
    }
}

.facet.drop_card .track-level.active {
  background: rgba(0, 186, 49, 0.15);
  border: 0.5px solid #00BA31;
}
/*.administrationFacet .facet.drop_card .track-level.active {
  background: #FFFFFF;
    border: 0.5px solid #979797;
}*/
.facet.drop_card .track-level.active .step3-head{
    color:#000000;font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-size: 28px;
    line-height: 33px;
    text-align: center;
}
.facet .track-level .MovingIcon {
    position: absolute;
    right: -40px;
    display: flex;
    align-items: center;
    vertical-align: middle;
    justify-content: center;
    top: 23px;pointer-events: none;
}
.facet.drop_card .track-level .step3-head {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-size: 28px;
    line-height: 33px;
    text-align: center;
    position: absolute;
    top: 8px;
}
/*===== DRAG and DROP =====*/
.drop_img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    margin-right: 1rem;
}
.drop_name {
    font-size: var(--normal-font-size);
    color: var(--first-color);
    font-weight: 500;
}
.drop_profession {
    font-size: var(--smaller-font-size);
    color: var(--first-color-light);
}
.drop_social {
    margin: 0 0.375rem;
    color: var(--first-color-light);
    transition: 0.4s;
}
.drop_social:hover {
    color: var(--first-color);
}
.sortable-drag {
    opacity: 0;
}
/* modalBox */
.modalBox {
    width: 90%;
    margin:0 auto 20px;
}
.modalBox .step3-desc {
    color: #979797;
    font-weight: 700;
    position: absolute;
    bottom: 4px;
    text-align: center;
    left: 0;
    right: 0;
}
.modalBox .step3-desc .change-icon {
    font-weight: 400;
    width: 12px;
    height: 12px;
    line-height: 12px;
    color: #979797;
    fill: #979797;
    margin: 0 6px 0 0;
}
.ModalSwitchBtn .switch {
    position: relative;
    display: inline-block;
    width: 25px;
    height: 34px;
}
.modalBox .preview {
    width: 100%;
    display: block;
    position: relative;
    text-align: center;
    font-size: 16px;
    line-height:18.75px; margin: 0 0 5px;
}
.modalBox .facet{width: 100%}
.modalBox span.icons_edit {
    position: absolute;
    bottom: 6px;
    margin:0 -10px;color: #979797;
    fill: #979797;
}
.modalBox span.icons_edit .change-icon {
    color: #979797;
    fill: #979797;
}
/* custom select  */
.vodiapicker{
  display: none; 
}
.lang-select .icons_ul {
    padding-left: 0px;
    height: 200px;
    overflow-x: scroll;
    overflow: auto;
    margin-bottom: 0;
}
.lang-select .icons_ul img, .lang-select .customIconSelect img{
    width: auto;
    height: 30px;
}
.lang-select .icons_ul li{
  list-style: none;
  padding: .375rem .75rem;
}
.lang-select .icons_ul li:hover{
 background-color: #F4F3F3;
}
.lang-select .icons_ul li img{
  margin: 0;
}
.lang-select .icons_ul li span, .lang-select .customIconSelect li span{
  margin-left: 10px;
    font-size: 1rem;  color: #000;
}
.lang-select svg {
    width: 20px;
    height: 20px;
    position: relative;
    right: 10px;
    float: right;
    top: 33px;
    z-index: 9;
}
.lang-select .equipment_icon_select:after,
.lang-select .boatmodel_equipment_icon_select:after,
.lang-select .edit_boatmodel_equipment_icon_select:after,
.lang-select .tank_icon_select:after,
.customIconSelect.edit_equipment_icon_select:after,
.customIconSelect.edit_tank_icon_select:after{
    position: absolute; content: '';
    width: 20px; height: 20px; top:12px; right: 10px;
    background-repeat: no-repeat; background-position: right center;background-image: url('./img/angle-down.svg')
}
/* item list */

.lang-select .icon_list{
  display: none;
  width: 100%;
  max-width: 350px;
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 5px;   position: absolute; z-index: 99; background-color: #fff;
}
.lang-select .open{
  display: show !important;
}
.customIconSelect{
  margin-top: 0;
  width: 100%;
  max-width: 350px;
  height:45px;
  border-radius: 5px;
  background-color: #fff;
  border: 1px solid #ccc; padding: .375rem .75rem; position: relative;
}
.customIconSelect li{
  list-style: none;
  float: left;
  padding-bottom: 0px;
}
.customIconSelect:hover li{
  margin-left: 0px;
}
.customIconSelect:focus{
   outline:none;
}
/*.customIconSelect:after {
    content: '';
    background: url(./img/tremate_logo_circle.png);
    height: 26px;
    width: 26px;
    position: absolute;
    display: flex;
    right: 10px;
    top: 8px;
    z-index: 99999999999;
    align-items: center;
    justify-content: center;
    background-size: 100%;
    background-repeat: no-repeat;
    text-align: center;
    margin: auto;
}*/
.lang-select {
    margin-left: 0; position: relative;
}
.AddText {
    text-align: left;
    padding-left: 15px;
    padding-right: 15px;
}
@media(min-width:576px){
    .AddText{text-align: center;}
}
.customLocationDiv{width: 100%; margin:0 0 10px;}

.customLocationDiv.row{
    margin-right:0px;
    margin-left: 0px;
}
.customLocation,.customLocationBtn{width:100%;}
.customLocation select.form-control {
  background: transparent;
  border: none;
  padding: 0;
  height: auto; color: var(--primary-color); width: auto;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
   width: 100%;text-overflow: ellipsis;
   background: url(https://tremate.appuno.co/public/assets/img/minus-square.svg) !important;
    background-size:21px;
    background-repeat: no-repeat !important; background-position: center right !important;
}
.customLocation select.form-control, .customLocation select.form-control option.selected {
    width: 100% !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0 20px 0 0 !important;
}
/*.customLocation:after {
    content: '';
    background: #000;
    width: 10px;
    height: 10px;
    position: absolute;
    display: block;
    right: 20px;
    top: 7px;
    cursor: pointer;
}*/
.customLocationBtn{float: right;}
.customLocation select.form-control:focus{outline: none;box-shadow: none;}
.customLocationBtn .cart-set {
  top: 0;
}
#add_location_modal #add_location_form {
  width: 100%;
}
/*.customLabel a {
    text-align: right;
    float: right;
}*/
.customLabel {
    position: relative;
}
.customLabel a {
    text-align: right;
    float: right;
    position: absolute;
    right: 0;
    top: -6px;
}
/* administrationFacet */
.administrationFacet .facet-list {
    text-align: left;
}
.administrationFacet .level-icon-black {
    width: 26px;
    height: 26px;margin: 0 0 0 -5px;
}
.administrationFacet .facet.drop_card .track-level .step3-head {
    font-size: 19px;
    line-height: 26px;
    height: 50px;display: flex;
    align-items: center;
    justify-content: center;
}
.administrationFacet .home-fan {
    width: 18px;
    height: 22px;
    margin:0 0 0 -5px;
}
.administrationFacet .facet {
    width:100%;
    padding: 0 5px 10px;
    margin: 0 9px;
}
.administrationFacet .facet.drop_card .track-level-active{
        background: rgba(0, 186, 49, 0.03);
        border: 0.5px solid #00BA31;
}
.drop_card.modalBox .facet-list .facet.drop_card .track-level img{width: auto; height: 36px;}
/* boat slider css */
.boatSliderList .slick-list {
    max-width:100%;
    margin: 0 auto 0 !important;
    padding: 0 !important;
}
.boatSliderList.Main_slider {
    max-width:98%;
    margin: 0 auto 0 !important;
    padding: 0 !important;
    position: relative;z-index: 0;
}
/*.boatSliderList .slick-list.draggable {
    margin: 0 11px !important;
}*/
/*.boatSliderList canvas {
    margin:0;
}*/
.boatSliderList canvas {
    margin: 0 0 0 -25px;
}
.boatAddedContainer .col-sm-12.text-center{ padding:0 }
.boatSliderList .slick-list.draggable {
    margin: 0 auto !important;
    width: 96%;
}
@media(min-width:1180px){
    .boatSliderList .slick-list {
        max-width:100%;
    }
    .boatSliderList.Main_slider {
        max-width: 100%;
    }
    /*.boatSliderList .slick-list.draggable {
        margin: 0 !important;
    }*/
    .boatSliderList canvas {
        margin: 0 0 0 -15px;
    }
    .boatSliderList .slick-list {
        max-width:100%;
    }
}

.boatSliderList .slick-list .slick-slide {
    font-size: 30px;
    text-align: center;
    padding:0;
    line-height: 2;
    font-weight: 700;
    height: auto;
    margin: 0 5px 0 5px; opacity: 0.4; cursor: pointer;
}
.boatSliderList .slick-list .slick-slide.slick-current {
     opacity:1
}
.boatSliderList .slick-arrow {
    z-index: 1;
    width:30px;
    height:30px;
}
.boatSliderList .slick-arrow:before {
    font-size: 30px;
}
.boatSliderList .slick-next {
    right: 0;
}
.boatSliderList .slick-prev {
    left: 0;
}
/*.boatSliderList .btn-wrap {
    text-align: center;
    width: 100%;
    height: 100%;
}*/

.boatSliderList button {
    background-color: transparent;
    border: none;
    padding:0;
    border-radius: 5px;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    transition: all 0.5s;
}
.boatSliderList button.slick-disabled {
    opacity: 0.6;
}
/*.boatSliderList .btn-wrap {
    text-align: center;
    width: 100%;
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    z-index: 1;
}*/
.boatSliderList .prev-btn,
.boatSliderList .next-btn {
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    bottom: 0;
    cursor: pointer;
}
.boatSliderList .prev-btn span,
.boatSliderList .next-btn span{    
    background: #E9E5DF;
    border: 1px solid #D7D4CF;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        width: 25px;
    height: 25px;
    line-height: normal;
    border-radius: 100%;
}
/*.boatSliderList button.prev-btn {
    left: -20px;
}
.boatSliderList button.next-btn {
    right: -20px;
}*/
.boatSliderList button.prev-btn {
    left: 0px;
}
.boatSliderList button.next-btn {
    right:0px;
}

/*@media(min-width:576px){
    .boatSliderList button.next-btn {
        right:0px;
    }
}*/
.boatSliderList .storage-boat h2{
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    color: var(--primary-color);
}

/* live search */
div#livesearch {
    display: block;
    width: 100%;
    max-height: 240px;
    overflow-y: scroll;
    border: 1px solid #153468;
    border-top: none;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    position: absolute;
    z-index: 1;
    top: 38px;
    left: 0;
}
.live_Search {
    border-radius: 5px;
    background: #fff;
    margin: 3px 0 0;
}
.live_Search svg,
.live_Search img{
    /*margin:-3px 10px 0 0px;*/ margin: 0s; fill: #000;
}
.live_Search span.ColorBlue{color: var(--primary-color);}
.live_Search tr {border: none}
.live_Search tr td{ padding:10px 2px; text-align: left; vertical-align: top;}
span.TextBlue{color: var(--primary-color);font-weight: 600;}

@media(min-width:420px){
    .live_Search tr td{ padding:7px 5px;}
}

/* slick-track */
.slick-track.middleone {
    position: relative;
    transform: none !important;
}
span.SpaceBetween {
    width: 50px;
    position: relative;
    display: inline-block;
}

input.settings_defaultLocation#s_location {
    background-color: transparent !important;
}
div#livesearch td:first-child {
    text-align: center;
}
div#livesearch span.first {
    display: inline-block;
    width: 130px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
div#livesearch span.second {
    display: inline-block;
    width: 130px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.storage-boat.mt-2.mb-0.text-center.slick-slide canvas {
    margin: auto;
}

/* Setting Storage Slider */
.adminStorageSlider:before{
    display: none;
}
.slick-slider {
    width: 100%;
    height: auto;
}
/* icons_edit */
span.icons_edit {
    position: absolute;
    bottom: 6px;
    margin: 0 -10px;
}
span.icons_edit .change-icon {
    font-weight: 400;
    width: 12px;
    height: 12px;
    line-height: 12px;
    color: var(--primary-color);
    fill: var(--primary-color);
    position: relative;
    bottom: 2px;
    margin: 0 5px 0 0;
}

.Icon {
    position: relative;
    /*width: 50%;*/
    text-align: center;
    background:transparent;
}
.Icon object {
  z-index:1; position: relative;
}
/*.Icon img {
    background: transparent;
    position: relative;
    z-index: 1;
    width:16px;
    height: auto;
}*/
.Icon .boaticon object {
  background: transparent;
  position: relative;
  z-index: 0;
  width: 16px !important;
  height: 16px !important;
  top:6px;
}
@media(min-width:768px){
    /*.Icon .boaticon object {
      width: 20px !important;
      height: auto !important;
    }*/    
    .boatAddedContainer .Icon .boaticon object {
        width: auto !important;
        height:18px !important;
    }
}
@media(min-width:920px){
    .boatAddedContainer .Icon .boaticon object {
        width: auto !important;
        height:24px !important;
    }
}
@media(min-width:1200px){
    .Icon .boaticon object {
      top: 8px;
    }
}
.boaticon {
    position: absolute;
    background: transparent; top:8%; right: 0; left: 0;
}
.boaticon svg {
    fill: #000;
    outline: #000;
    height: 50px;
    width: auto;
}
/*.imgHW {
    display: inline-block;
    width: 30px;
    height: 30px; text-align: center;
}
.imgHW img{height: 100% !important; width: auto !important;}*/

.icons_ul li object,
.customIconSelect li object {
    width: 22px !important;
    height: 22px !important;
    vertical-align: middle;
}
.row.text-center.box.mx-auto.equipment_card {
    z-index: 0;
    position: relative;
}

.slick-arrow{
  position: absolute !important;
  top:45% !important;
  /*margin-top: -15px;*/
}
.prev-arrow{
  left: -40px;
  width: 0;
  height: 0;
}
.next-arrow{
  right: -40px;
  width: 0;
  height: 0;
}

/* mobile-search */
.SearchInput.mobileSearch{
    display: inline-block; width: auto !important;
}
.SearchInput.desktopSearch{
    display: none;width: auto;
}

@media(min-width:756px){
    .SearchInput.mobileSearch{
        display: none;
    }
    .SearchInput.desktopSearch{
        display: inline-block; width: 325px;
    }
}
@media(min-width:807px){
    .SearchInput.desktopSearch{
         width: 325spx;
    }
}

/* mobile input search open */
.mobileInputBox {
  position: relative;
  width: 100%;
  max-width: 60px;
  height:auto;
  margin:-1.5px 50px;
  background-color:transparent;
  border-radius: 6px;
  transition: all 0.5s ease-in-out;top: 5px;
}
.mobileInputBox.open {
    max-width: 90%;
    left: 50%;
    margin-left: -45%;
}
.mobileInputBox input {
  position: relative;
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-weight: 400;
  color: #333;
  padding: 0 15px;
  border: none;
  border-radius: 6px;
  outline: none;
  transition: all 0.5s ease-in-out; text-indent: -5000px; background: transparent;
}
.mobileInputBox.open input {
  padding:8px 15px 8px 40px;text-indent:initial; background: #fff; border: 1px solid #153468;
}
.mobileInputBox .search svg{fill: #fff}
.mobileInputBox.open .search svg {
  fill: #000;
}
.mobileInputBox .search {
  position: absolute;
  top: 0;
  left: 0;
  width:40px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color:transparent;
  border-radius: 6px;
  cursor: pointer; display: none;
}
.mobileInputBox.open .search {
  border-radius: 6px 0 0 6px; display: inline-flex;
}
.search .search-icon {
  font-size: 30px;
  color: #1c1c1c;
}
.mobileInputBox .close-icon {
  position: absolute;
  top: 50%;
  right: -45px;
  font-size: 30px;
  color: #1c1c1c;
  padding: 5px;
  transform: translateY(-50%);
  transition: all 0.5s ease-in-out;
  cursor: pointer;
  pointer-events: none;
  opacity: 0;
}
.mobileInputBox.open .close-icon {
  transform: translateY(-50%) rotate(180deg);
  pointer-events: auto;
  opacity: 1;
}
.mobileInputBox .live_Search {
    margin: 0px 0;
}
.mobileInputBox{ display:inline-block; position:absolute; }
#mobile_livesearch_html table tr td object {
    height: auto!important;
    width: 75% !important; display: inline-block;
}
#mobile_livesearch_html table tr td{display: inline-block;}
@media(min-width:756px){
    .mobileInputBox{ display:none; }
}

.beforeLogin{text-align: center;}
@media(min-width:576px){
    .beforeLogin{text-align: left;}
    .textContent {
        float: right;
    }
}

.B-loginmobileContact{display: block;}
.B-loginmobileContact span{display: inline-block;}
.B-logindeskContact{display: none;}

@media(min-width:680px){
  .B-loginmobileContact{display: none;}
  .B-logindeskContact{display: inline-block;}
}
div#trip-photo-preview {
    z-index: 9999;
}

.imagePreview .modal-backdrop.fade {
    opacity: 0.6 !important;
    z-index: 9999 !important;
}
.table tbody#todo-list-tbl tr td {
    padding: 5px 0.55rem;
}
tbody#boat-todo-list-tbl tr td{padding:0;}

select.TripSelectOption {
    appearance: none !important;
    border: none !important;
    text-align: left !important; height: 25px; width: 180px;
    background-image: url(../../assets/images/drop_arrow_blue.svg) !important;
    background-repeat: no-repeat !important;
    background-position: right 5px center !important;
}
select.TripSelectOption option{
    font-size: 15px; padding:5px 10px;
}
select:focus-visible{outline: 0;}
.showmsg{ color: #979797;text-align: center;padding: 10px 0;font-size: 1rem; }
.boat-single{text-align: right;}
.black-text {color: #000 !important;}
i.edit_boat_title {font-weight: 600;}

div#map .mapboxgl-ctrl-bottom-right {
    display: none;
}
.readdis{
    opacity: 0.7;
}
.BoatNameSearch {
    position: relative;
    width: 100%;
    top: 0px;
    left: 0;
    margin: auto;
    right: 0;
}
@media(min-width:768px){
    .BoatNameSearch {
        position: absolute;
        width: 92%;
        top: 42px;
    }
}
.MakeNameSearch {
    position: relative;
    width: 100%;
    top: 0px;
    left: 0;
    margin: auto;
    right: 0;
}
@media(min-width:768px){
    .MakeNameSearch {
        position: absolute;
        width: 99%;
        top: 43px;
    }
}

#boatsearch td p { min-width:90% !important; width:65px !important;}
div#boatsearch {
    display: block;
    width: 100%;
    max-height: 240px;
    overflow-y: scroll;
    border: 1px solid #153468;
    border-top: none;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
}
/*div#boatsearch td:first-child {
    text-align: center;
}*/
div#boatsearch span.first {
    display: inline-block;
    width: 130px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
div#boatsearch span.second {
    display: inline-block;
    width: 130px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.boat_live_Search {
    border-radius: 5px;
    background: #fff;
    margin: 3px 0 0;
}
.boat_live_Search svg,
.boat_live_Search img{
    /*margin:-3px 10px 0 0px;*/ margin: 0s; fill: #000;
}
.boat_live_Search span.ColorBlue{color: var(--primary-color);}
.boat_live_Search tr {border: none}
.boat_live_Search tr td{ padding:10px 2px; text-align: left; vertical-align: top;}
span.TextBlue{color: var(--primary-color);font-weight: 600;}
@media(min-width:420px){
    .boat_live_Search tr td{ padding:7px 5px;}
}

.mobileInputBox .boat_live_Search {
    margin: 0px 0;
}
.boat_live_Search td object{height:auto;width:100% !important;}
@media(min-width:575px){
   object{height: 78%;width: 85% !important;}
   .boat_live_Search td object{height:auto;width: 85% !important;}
    .row.text-center.box.mx-auto.mitere-mobile.equipment_tanks {
        margin:0 0;
    } 
}