:root {
    --primary-heading-text-1: #027177;

    --color-white: #ffffff;
    --color-black: #000000;

    --text-color1: #2d3748;
    --text-color2: #444;

    --dot-loader-color1:rgba(4, 157, 166, 0.35);
    --dot-loader-color2:rgba(13, 156, 181, 0.35);
    --dot-loader-color3:rgba(21, 155, 193, 0.35);
}
/*badge color*/
.badge{border-radius: 2.5px; color: #fff; line-height: 0px; padding: 8px 9px; font-weight: 600;}
/*.requiredColor{background: rgba(17, 103, 172, 0.45); color: rgba(17, 103, 172, 1)!important; border: 1px solid rgba(17, 103, 172, 1); }*/ /*#1167ac;*/ 
/*.notRequiredColor{background: rgba(119, 119, 119, 0.45); color: rgba(119, 119, 119, 1)!important; border: 1px solid rgba(119, 119, 119, 1); }*/ /*#777777; gray*/ 
/*.activeColor{background: rgba(0, 100, 1, 0.3); color: rgba(0, 100, 1, 1)!important; border: 1px solid rgba(0, 100, 1, 1); }*/ /*#006401; green*/ 
/*.inactiveColor{background: rgba(245, 166, 35, 0.45); color: rgba(245, 166, 0, 1)!important; border: 1px solid rgba(245, 166, 35, 1); }*/ /*#e58900; 229, 137, 0*/ 
.requiredColor{background: #cfe2ff; color: #084298!important; border: 1px solid #b6d4fe; }
.notRequiredColor{background: #e2e3e5; color: #41464b!important; border: 1px solid #d3d6d8; }
.activeColor{background: #d1e7dd; color: #0f5132!important; border: 1px solid #badbcc;}
.inactiveColor{background: #fff3cd; color: #664d03!important; border: 1px solid #ffecb5; }

.badge_primaryColor{color: #084298!important; background: #cfe2ff; border: 1px solid #b6d4fe; }
.badge_secondaryColor{color: #41464b!important; background: #e2e3e5; border: 1px solid #d3d6d8; }
.badge_successColor{color: #0f5132!important; background: #d1e7dd; border: 1px solid #badbcc; }
.badge_dangerColor{color: #842029!important; background: #f8d7da; border: 1px solid #f5c2c7; }
.badge_warningColor{color: #664d03!important; background: #fff3cd; border: 1px solid #ffecb5; }
.badge_infoColor{color: #055160!important; background: #cff4fc; border: 1px solid #b6effb; }
.badge_lightColor{color: #636464!important; background: #fefefe; border: 1px solid #fdfdfe; }
.badge_darkColor{color: #141619!important; background: #d3d3d4; border: 1px solid #bcbebf; }

/* cursor style */
.disabledCursor{cursor: not-allowed;opacity: 0.9;}

/*table cell alignment*/
.tableCellCenterMiddle{
    text-align: center;
    vertical-align: middle;
}
/*same height*/
.sameHeightFlexFlexWrap{
    display: flex; flex-wrap: wrap;
}
/*button*/
.btn-outline-primary{color: #007bff; background-color: transparent; background-image: none; border-color: #007bff;}
.btn-outline-primary:hover{color: #fff; background-color: #007bff;}
/*box bosy view*/
.box-body-view{min-height:440px;}
/*===[data table / datatable]==========*/
.dataTables_wrapper label{color: rgba(0, 0, 0, 0.5); /*#d2d6de;*/}
/*table data filter form */
.data_filter_form_view{display: block; margin-bottom: 10px; padding: 0 auto;}
.data_filter_form_view button{margin: 3px 0px 0px 3px;}
.data_filter_form_view .inputBox{width: 135px; display: inline-block; margin: 3px 5px 3px 5px;}
.data_filter_form_view .inputBox label{ font-size:12px; font-weight:600; color: rgba(0, 0, 0, 0.6);}
.data_filter_form_view .inputBox label .resetBtn{cursor:pointer; color:#3c8dbc; padding-left: 5px;}
.data_filter_form_view .inputBox label .resetBtn i{font-size:9px; padding-right: 1px;}
.data_filter_form_view .inputBox .dropdown-toggle{margin-top: -1px !important; border-radius: 0;}
/*------------------*/
.form-group .form-control .dropdown-toggle{margin-top: -1px !important; border-radius: 0;}
/*gray scale view*/
.grayscaleView{-webkit-filter: grayscale(100%);filter: grayscale(100%);}
/*disabled view*/
.disabledView{opacity:0.7; cursor: no-drop;}
.no-padding { padding: 0; margin: 0; }
/*navbar manu active list view*/
.dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover{
/*  background: linear-gradient(to left, #159bc1, #049da6);*/
  background: rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.75);
}
/*navbar menu list divider*/
.dropdown-menu .divider{ margin: 5px 0; }
.left-menu-divider{padding:0; height: 1px; margin: 8px 0 5px -5px!important; background: rgba(255,255,255,0.3);}
/*navbar logo style*/
.navbar-static-top .navbar-header .navbar-brand{padding: 2px 10px; margin-left: 15px;}
.navbar-static-top .navbar-header .navbar-brand .top-nav-logo-large{max-height: 46px; display: block;}
.navbar-static-top .navbar-header .navbar-brand .top-nav-logo-small{max-height: 46px; display: none;}
@media only screen and (min-width: 1240px) {
    .navbar-static-top .navbar-header .navbar-brand .top-nav-logo-large{max-height: 46px;}
}
@media only screen and (max-width: 1240px) {
    .navbar-static-top .navbar-header .navbar-brand .top-nav-logo-large{max-height: 46px;}
}
@media only screen and (max-width: 988px) {
    .navbar-static-top .navbar-header .navbar-brand .top-nav-logo-large{max-height: 40px; padding-top: 6px;}
}
@media only screen and (max-width: 380px) {
    .navbar-static-top .navbar-header .navbar-brand .top-nav-logo-large{display: none;}
    .navbar-static-top .navbar-header .navbar-brand .top-nav-logo-small{display: block;}
}
/*navbar user photo style*/
.navbar-nav > .user-menu > .dropdown-menu > li.user-header > img{object-fit:contain; }
.navbar-nav > .user-menu .user-image{
  object-fit:contain; 
  border: 1px solid;
  border-top-color: currentcolor;
  border-right-color: currentcolor;
  border-bottom-color: currentcolor;
  border-left-color: currentcolor;
  border-color: transparent;
  border-color: rgba(255, 255, 255, 0.2);
}
.navbar-nav > .user-menu .profileUserImg{ margin-right:-10px;z-index:0;width:23px;height:23px;margin-top:0px; }
@media (max-width: 767px) {
  .navbar-nav > .user-menu .profileUserImg{ margin-top:-7px; }
}
/*back to previous page section*/
.backToPrevious{
    text-align: center; 
    padding: 0 9px 2px 5px; 
    border-radius: 3px; 
    cursor: pointer; 
    min-width: 60px; 
    white-space: nowrap; 
    /*color: #444;*/ 
    /*border: 1px solid #444;*/ 
    font-weight: 500; 
    /*margin: 3px 8px 0 8px;*/ 
    /*background-color: rgba(255, 255, 255, 0.8);*/
    transition: all 0.3s ease-in-out;
}

.backToPrevious i{
    position: relative; 
    top: 2px; 
    margin-right: 0px;
    transition: all 0.3s ease-in-out;
}

.backToPrevious:hover{
    font-weight: 600; 
    transition: all 0.3s ease-in-out;
}

.backToPrevious:hover i{
    margin-right: 3px;
    transition: all 0.3s ease-in-out;
}
/*badge button style*/
.badge-btn{
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: 700;
  line-height: 0;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor:pointer;
  border-radius:50px;
  color:#fff;
  opacity:0.85;
  background:#00695B;}
.badge-btn:hover{opacity: 1;}
/*more data presrent copunt view*/
.plusMoreView{ margin-left:3px; padding:0px 8px; line-height: 0; border:1px solid rgba(0, 0, 0, 0.2); border-radius:25px; background: rgba(0, 0, 0, 0.15);}

/*input image preview section*/
.fileInputPreviewBox{
  position:relative; width:100px; height:100px; top:3px;  
  border:1px solid #E6E6E6; border-radius:6px; background-color:#FFFFFF; 
  display:flex; justify-content:center; align-item:center; padding:3px;
}
.fileInputPreviewBox img{max-width: 100%; max-height: 100%; padding:7px; object-fit:contain;}
.fileInputPreviewButtonView{position:relative; display: block; margin: 15px auto;}
.inputFileBtnArea{display: inline-block; margin:10px; text-align: center; cursor: pointer;}
.inputFileBtnArea .inputFileBtn{
    position: relative; 
    width: 90px; 
    height: 90px; 
    display: table-cell; 
    vertical-align: middle; 
    padding: 2px; 
    border: 1px dashed #EBE9EA; 
    background: #fdfdfd; 
    border-radius: 8px; 
    overflow: hidden;
}
.inputFileBtnArea .inputFileBtn img{ max-height: 100%; max-width: 100%; }
.inputFileBtnArea .inputFileBtnText{
    background:rgba(255,255,255,0.8);
    width: 100%; 
    font-size: 13px; 
    font-weight: 500; 
    color: rgba(0, 0, 0, 0.4); 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
}
.inputFileBtnArea .inputFileBtnText i{ font-size: 12px;}
.inputFileBtnArea .inputFileBtnText span{ font-weight: 600;}
.inputFileBtnArea .inputFiled{
    display:; 
    width: 125px; 
    height: 125px; 
    z-index: 1;
    position: absolute; 
    top: 40%; left: 50%; 
    transform: translate(-50%, -50%);
    cursor: pointer;
}
.inputFileBtnArea .inputFiledLabel{
  display:block; font-weight: 600; font-size: 12px; margin-top:-6px; color: rgba(0, 0, 0, 0.4);
}
.inputFileBtnArea .inputFiledLabel label{font-weight: 600; cursor: pointer; margin:0;}
.imgInputPreviewSection{position: relative;width: 100%;}
.imgInputPreviewSection .inputImagePreview {
  position:absolute; width:72px; height:72px; top:3px;  
  border:1px solid #E6E6E6; border-radius:3px; background-color:#FFFFFF; 
  display:flex;justify-content:center; align-item:center; padding:3px;
/*  overflow:hidden;*/
}
.imgInputPreviewSection .boxRight {right:0;}
.imgInputPreviewSection .boxLeft {left:0;}
.imgInputPreviewSection .inputImagePreview img{max-width:100%; max-height:100%; object-fit:contain}
.imgInputPreviewSection .inputImageFiled{ position:relative; top:0px;}
.imgInputPreviewSection .inputRight{margin-right:100px;}
.imgInputPreviewSection .inputLeft{margin-left:100px;}
.imgInputPreviewSection .imgRemoveBtn{position: absolute; top:-10px; right:-6px; color:rgba(208, 1, 1, 0.6); cursor:pointer; z-index: 9;}
.imgInputPreviewSection .imgRemoveBtnLeft{position: absolute; top:-5px; left:65px; color:rgba(208, 1, 1, 0.6); cursor:pointer; z-index: 9;}
.imgInputPreviewSection .imgRemoveBtn:hover,
.imgInputPreviewSection .imgRemoveBtnLeft:hover{color:rgba(208, 1, 1, 0.9);}

/*dropdown link active color*/
/*.dropdown-item.active, .dropdown-item:active{background-color:#666;}*/
/*navebar bark and light button toggole */
.toggleLightBtn{
  margin-top: 1px;
  background-color: #fff;
  width: 43px;
  height: 22px;
  border-radius: 50px;
  position: relative;
  padding: 4px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 2px solid #888;
}

.toggleLightBtn i{
  color: #fcc41e;
  font-size: 13px;
}

.toggleLightBtn .toggleBallBtn{
  background-color: #888;
  width: 16px;
  height: 16px;
  position: absolute;
  left: 2px;
  top: 1px;
  border-radius: 50%;
  transition: transform 0.2s linear;
}

.toggleLightBtn:hover{
  background-color: rgba(0, 0, 0, 0.1);
  border: 2px solid #888;
}

.toggleDarkBtn{
  margin-top: 1px;
  background-color: #888;
  width: 43px;
  height: 22px;
  border-radius: 50px;
  position: relative;
  padding: 4px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 2px solid #888;
}

.toggleDarkBtn i{
  color: #c7e7fc;
  font-size: 13px;
}

.toggleDarkBtn .toggleBallBtn{
  background-color: #555;
  width: 16px;
  height: 16px;
  position: absolute;
  left: 2px;
  top: 1px;
  border-radius: 50%;
  transition: transform 0.2s linear;
  transform: translateX(20px);
}

.toggleDarkBtn:hover{
  background-color: #777;
  border: 2px solid #777;
}
/*===[image preview in view details section begin]===*/
.viewDetailsImgPreview{
  display: inline-flex;
  margin: 0; padding: 0;
  height: 120px; width: 120px;
  justify-content: center; align-items: center;
  border:1px solid #f4f4f4; border-radius: 5px;
  background-color: #fff; overflow: hidden;
}
.viewDetailsImgPreview img{max-width: 100%; max-height: 100%; object-fit:contain}
/*===[image preview in view details section end]===*/

/*===[table view begin]=====*/
.tableImgPreview{
  display: inline-flex;
  margin: 0; padding: 0;
  height: 45px; width: 45px;
  justify-content: center; align-items: center;
  border:1px solid #f4f4f4; border-radius: 5px;
  background-color: #fff; overflow: hidden;
}
.tableImgPreview img{max-width: 100%; max-height: 100%; object-fit:contain}
/*===[table view end]=====*/

/*navebar dropdoen menu margin setup*/
/*.dropdown-menu{ margin: .5rem 0 0; }*/

/*navbar icon padding customize*/
/*.navbar-expand .navbar-nav .nav-link {
  padding-right: 0.5em;
  padding-left: 0.5rem;
}*/

/*navbar badge position*/
/*.navbar-badge{
  right: 2px;
    top: 5px;
}*/

/* navbar active background */
/*.nav-sidebar.nav-legacy > .nav-item > .nav-link.active, */
/*.nav-sidebar.nav-legacy > .nav-item > .nav-link.active{*/
/*  background-color: rgba(0, 0, 0, 0.1);*/
/*}*/

/*navbar icon font size*/
/*.nav-sidebar > .nav-item .nav-icon.fa, .nav-sidebar > .nav-item .nav-icon.fab, 
.nav-sidebar > .nav-item .nav-icon.fad, .nav-sidebar > .nav-item .nav-icon.fal, 
.nav-sidebar > .nav-item .nav-icon.far, .nav-sidebar > .nav-item .nav-icon.fas, 
.nav-sidebar > .nav-item .nav-icon.ion, .nav-sidebar > .nav-item .nav-icon.svg-inline--fa {
  font-size: 17px;
}*/
/*page title */
.pageTitle{ opacity: 0.6; font-size: 1.5rem!important;}
/*required input indication*/
.requiredMark{color: red;}
/*card view header icon */
.cardHeadIcon{position: relative; top:3px; opacity: 0.6;}
/*card action model view*/
.cardActionSmall{display: block;}
/*card text view*/
.cardTextView{display: block; margin-bottom: 4px;}
/*card block text*/
.cardTextView p{font-weight: 600; padding-left: 23px; }
/*card light text*/
.cardTextView .cardLightText{display: block; width: 100%;}
.cardTextView .cardLightText i{margin-right: 3px; position: relative; top: 3px;}
/*model box */
.modal-header{background-color: #f9f9f9;}
.modal-footer{background-color: #f9f9f9;}
/*pop up model section*/
.deleteModelView{ max-width: 400px; }
.deleteModelView .modal-content{padding: 15px; border-radius: 5px; border: none; text-align: center;}
.deleteModelView .modal-content .iconBox{
  border:5px solid gray; border-radius: 50%; padding: 4px; 
  width: 55px; height: 55px; display: table-cell; vertical-align: middle; text-align: center;
}
.deleteModelView .modal-content .iconBox i{
  font-size:35px;
}
.deleteModelView .modal-content .modal-body{color: rgba(0, 0, 0, 0.7);}
.deleteModelView .modal-content .modal-body h4{font-weight: 600;}
.deleteModelView .modal-content .modal-body p{font-size: 16px; font-weight: 500; color: #636363;}
.deleteModelView .modal-content .action-btn{min-width: 120px; border: none; padding: 10px; border-radius: 3px; margin: 0 5px;}

/*model title data*/
/*.modal-content .modal-header .modal-title {font-size: 1.2rem;}*/
/*lable style*/
.form-group label, .form-check label{font-weight: 600; opacity: 0.9;}
/*card p font size*/
.cardTextView p {font-weight: 500;}
/*box shadow*/
.boxShadow1{
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
}

.box-body .nav .label{
  margin-top: 3px;
}
/*===| media screen view sectin begin |========================*/
/*===[1]=For Desktop===*/
@media only screen and (min-width: 768px) {
    .largeScreenViewOnly {
        visibility: visible;
        display: "";
    }

    .smallScreenViewOnly {
        visibility: hidden;
        display: none;
    }

    .notificationSize{
        max-width: 35%;
    }
}
/*===[2]=For tablets===*/
@media only screen and (max-width: 600px) {
    .largeScreenViewOnly {
        visibility: hidden;
        display: none;
    }

    .smallScreenViewOnly {
        visibility: visible;
        display:"";
    }

    .notificationSize{
        max-width: 50%;
    }
}
/*===[3]=For mobile phones===*/
@media only screen and (max-width: 768px) {
    .largeScreenViewOnly {
        visibility: hidden;
        display: none;
    }

    .smallScreenViewOnly {
        visibility: visible;
        display:"";
    }

    .notificationSize{
        max-width: 100%;
    }
}
/*===| media screen view sectin end |========================*/
/*notification icon section customize*/
.msgIconBox{
  border:2px solid gray; border-radius: 50%; padding: 4px; 
  width: 30px; height: 30px; display: table-cell; vertical-align: middle; text-align: center;
}
.msgIconBox i{line-height:0; vertical-align:0; position: relative; top: 0; left: 0; padding: 0px;}

/*session notification message box for all*/
.alertMsgBoxAll{
    padding: 15px 20px;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    font-size:16px;
    border-radius: 5px;

    position: fixed; 
    /*width: auto; */
    /* top:50%; 
    left: 40%; */
    left: 50%;

    transform: translate(-50%, 0);
    bottom: 20%;
    z-index: 99999999;
}

.alertMsgBoxAll .alertCloseBtn{
    margin-left: 15px;
    color: white;
    font-weight: 400;
    float: right;
    font-size: 22px;
    line-height: 25px;
    cursor: pointer;
    transition: 0.3s;
}
/*===| notification icon animation begin |===================*/
.questionView{
  transform-origin: 0% 0%;
  animation: questionAnimation 1.5s ease-out 1s forwards infinite;
} 
@keyframes questionAnimation {  
  0%,100% {
      transform: rotate(0deg);
  }
  5%,90% {
      transform: rotate(-50deg);
  }
  0%,40% {
      opacity: 1;
  }
  52%,56%,60%,64%,68%,72% {
      opacity: .3;
  }
  54%,58%,62%,66%,70%,74% {
      opacity: 1;
  }
  0%,74% {
/*      color: #DB316F;*/
  }
  75%,100% {
      color: #D81D61;
  }
}

.errorView{ animation: errorAnimation 1s cubic-bezier(.36,.07,.57,.99) infinite; } 
@keyframes errorAnimation {  
  0% {
    transform: scale(1.0) translateX(0);
  }
  15% {
    transform: scale(1.1) translateX(5px);
  }
  30% {
    transform: scale(1.2) translateX(-5px);
  }
  45% {
    transform: scale(1.1) translateX(3px);
  }
  60% {
    transform: scale(1.0) translateX(-3px);
  }
  75% {
    transform: scale(1.1) translateX(0);
  }
  100% {
    transform: scale(1.0) translateX(0);
  }
}

.warningView{
  opacity: 0.3;
  animation: warningAnimation 1.5s ease-out 1s infinite;
} 
@keyframes warningAnimation {  
  0% {
      transform: translateX(0px);
      opacity: 0.3;
  }
  5%,15%,25%,35%,45% {
      transform: translateX(5px);
  }
  10%,20%,30%,40%,50% {
      transform: translateX(-5px);
  }
  55%,65%,75%,85%,95% {
      transform: translateX(3px);
  }
  60%,70%,80%,90% {
      transform: translateX(-3px);
  }
  50% {
      opacity: .5;
      stroke-dashoffset: 0;
  }
  80% {
      opacity: 1;        
  }
  100% {
      transform: translateX(0px);
      opacity: 1;
  }
  0%,50% {
      color: #FFC20A;
  }
  50%,100% {
      color: #e0a802;
  }
}

.successView{
  transform: scale(1);
  animation: successAnimation 2s ease-in 1s forwards infinite;
} 
@keyframes successAnimation {  
  0% {
      transform: scale(0);
  }
  15% {
      transform: scale(.7);
  }
  45% {
      transform: scale(1.2);
  }
  65% {
      transform: scale(.7);
  }
  85% {
      transform: scale(0.9);
  }
  100% {
      transform: scale(1);
  }
  0%, 30% {
      color: #2ba847;
  }
  31%, 100% {
      color: #1e9137;
  }
}

.infoView{animation: infoAnimation 2s ease-out 1s forwards infinite;} 
@keyframes infoAnimation {  
  0%,10%,20% {
      transform: rotate(-10deg);
  }
  5%,15% {
      transform: rotate(60deg);
  }
  25%,70% {
      transform: rotate(40deg);
  }
  50%,60% {
      transform: rotate(-10deg);
  }
  90%,100% {
      transform: rotate(0deg);
  }
  /*25%,100% {
      color: #148ea0;
  }*/
}

.rotateVerticalView{animation: rotateVerticalAnimation 2s linear infinite;}
@keyframes rotateVerticalAnimation {  
  0% {transform: rotateY(0deg);}
  100% {transform: rotateY(360deg);}
}

.fullCircleView{animation: fullCircleAnimation 2s linear infinite;}
@keyframes fullCircleAnimation {  
  0% {transform: rotate(0deg);}
  100% {transform: rotate(-360deg);}
}

.popView{animation: popAnimation 2s linear infinite;}
@keyframes popAnimation {  
  0% {transform: scale(1,1);}
  50% {transform: scale(1.2,1.2);}
  100% {transform: scale(1,1);}
}

.blinkView{
  animation: blinkAnimation 2s linear infinite;  /*ease-out*/
  /*animation: blinkAnimation 1s infinite;*/
/*  animation: blinkAnimation 1s linear infinite;*/
}
/*@-webkit-keyframes*/
@keyframes blinkAnimation {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}
/*===|notification icon animation end|=====================*/
/*===|loading process section begin|=====================*/
.pageProcessLoader{
    padding: 7px 12px; /* 10px 18px 15px 18px; */
    background-color: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    font-size:16px;
    border-radius: 5px;
    position: fixed; 
    /*width: auto; */
    /* top:50%; 
    left: 40%; */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
/*    bottom: 35%;*/
    z-index: 99999999;
    text-align: center;
    /*min-width: 400px;*/
    /*min-height: 100px;*/
}
.pageProcessLoader h4{
    font-weight: 700;
    font-size: 25px;
    color: #f57420;
    padding: 0;
    margin: 0;
}

.pageProcessLoader p{
    font-weight: 500;
    font-size: 15px;
    color: #ecfeff;
    line-height: 19px;
    padding: 0;
    margin: 0;
}

.pageProcessLoader .processLoaderView {
    margin: 8px 0px;
    margin-left: -2px;
    margin-right: -2px;
    /*border: 4px solid #f2f2f2;*/
    border: 4px solid #049da6;
    border-radius: 50%;
    /*border-top: 4px solid #049da6;*/
    border-top: 4px solid #f2f2f2;
    width: 25px;
    height: 25px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/*===[dot loader]========================*/
.processDotLoading{
    position: fixed; 
    top:50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999999;
    padding: 15px 20px;
    margin: auto;
    background-color: rgba(255, 255, 255, 0.9);/*#ddd*/
    color: #ffffff;
    border-radius: 5px;

    display: flex;
    justify-content: space-between;
    text-align: center;

    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
}

.processDotLoading span{
    position: relative;
    display: inline-block; 
    background: #222; 
    width: 13px; 
    height: 13px; 
    border-radius: 100px; 
    margin: 3.5px;
    padding: 0;
}

/* Animation */
.processDotLoading span {
  animation-name: dotLoading;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.processDotLoading span:nth-of-type(2) {
  animation-delay: .2s;
}
.processDotLoading span:nth-of-type(3) {
  animation-delay: .4s;
}

/* Keyframes */
@keyframes dotLoading {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }

  /*0% { background-color: #03b1b7; }
  50% { background-color: #12dbe2; }
  100% { background-color: #10e3ea;}*/
}

/*===|loading process section end|=====================*/
/*===[internet connection notification section begin]====*/
.internetConnNoti{ 
    padding: 13px 18px;
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    font-size:16px;
    border-radius: 5px;
    position: fixed; 
    /*width: auto; */
    top:98%; 
    left: 1%;
    transform: translate(-1%, -98%);
/*    bottom: 20%;*/
    z-index: 99999999;
}
.internetConnNoti .offline{ color:rgba(255, 255, 255, 0.8); }
.internetConnNoti .online{ color:rgba(61, 175, 87, 0.8); }
.internetConnNoti .refereshBtn{
  position: relative;
  font-size: 16px;
  padding: 3px;
  margin-left: 6px;
  top: 3px;
  border-radius: 5px;
  border: 1px solid #fff;
  cursor: pointer;
  opacity: 0.8;
}
.internetConnNoti .refereshBtn:hover{opacity: 1;}
.internetConnNoti i{ 
  position: absolute;
  top: 7px;
  font-size: 25px;
}

.internetConnNoti .textView{
  width: 100%;
  margin-left: 33px;
  margin-right: 27px;
}
.internetConnNoti .notiCloseBtn{
    position: absolute;
    top: 7px;
    font-size: 25px;
    right: 18px;
    cursor: pointer;
    transition: 0.3s;
    opacity: 0.7;
}
.internetConnNoti .notiCloseBtn:hover{ opacity: 1;}
/*===[internet connection notification section end]====*/
/*=====card view link view begin======*/
.cardViewLinkBox{
  position: relative;
  display: inline-block;
  padding: 3px; 
  border-radius:10px;
  overflow: hidden;
  background: #fff; 
  transition: 0.3s;
  margin-bottom: 25px;
}
.cardViewLinkBox::before{
  content:"";
  background: #fff; 
  background-size: cover;
  min-width: 350px;
  min-height: 350px;
  height: 100%; width: 100%;
  z-index: 0;
  position: absolute;
  top:-90%; 
  left:-10%;
  transform: translate(90%, 10%);
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
  transition: 0.3s;
}
/*.cardViewLinkBox:hover:before{background: linear-gradient(45deg, #00d2ff 0%, #3a47d5 100%); transition: 0.3s;}*/
.cardViewLinkBoxAll:hover:before{background: linear-gradient(90deg, #159bc1 0%, rgba(0, 222, 202, 0.8) 100%); transition: 0.3s;} /*#049da6*/
.cardViewLinkBoxFlipkrt:hover:before{background: linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%); transition: 0.3s;} /* #F7E830 #2977F6 */
.cardViewLinkBoxAmazon:hover:before{background: linear-gradient(90deg, #FDBB2D 0%, #3A1C71 100%); transition: 0.3s;}
.cardViewLinkBoxMeesho:hover:before{background: linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%); transition: 0.3s;}
.cardViewLinkBoxInventory:hover:before{background: linear-gradient(90deg, #d53369 0%, #daae51 100%); transition: 0.3s;}
.cardViewLinkBox .cardLinkBody{
  position: relative;
  background: #fff; 
  display: block; 
  min-height: 110px; 
  min-width: 285px;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.8);
  border-radius: 7px;
  word-wrap: break-word;
  text-align: left;
  padding: 5px;
}
.cardViewLinkBox .cardLinkBody .cardTitle{
  display: block; width: 100%; position: relative;
}
.cardViewLinkBox .cardLinkBody .cardTitle .imgView {
  position: absolute;
  top: 0px;
  left: 0px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  height: 70px; 
  width: 70px;
  border-radius: 5px;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.05);
/*  float: left;*/
}
.cardViewLinkBox .cardLinkBody .cardTitle .imgView img { padding: 5px; max-height: 100%;}
.cardViewLinkBox .cardLinkBody .cardTitle .contentView {
/*  float: left;*/
  display: block;
  position: relative;
  margin: 0px auto auto 75px;
  padding: 5px;
  min-height: 70px; 
}
.cardViewLinkBox .cardLinkBody .cardTitle .contentView h5{
  text-transform: uppercase;
  font-size: 17px;
  font-weight: 600;
  margin: 0 auto 5px auto;
  color: #444;
}
.cardViewLinkBox .cardLinkBody .cardTitle .contentView p{
  font-size: 14px;
  font-weight: 600;
  margin: 0 auto 5px auto;
  color: #555;
}
.cardViewLinkBox .cardLinkBody .cardInfo{
  display: block;
  text-align: center;
  font-size: 14px;
  color: #555;
  margin: 2px auto;
}
.cardViewLinkBox .cardLinkBody .cardInfo img{
  display: inline-block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.25);
  margin: auto 2px;
}
.cardViewLink{
  position: relative;
  background: #ffffff; 
  display: flex; 
  flex-flow: row wrap;
  justify-content: center; 
  align-items: center;
  min-height: 110px; 
  min-width: 285px;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.8);
  border-radius: 7px;
  word-wrap: break-word;
}
.cardViewLink h4{
  position: absolute;
  top:36%; 
  left:43%;
  transform: translate(-36%, -43%);
  font-size: 45px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.5);
  z-index: 0;
}
.cardViewLink img{max-height: 85px; object-fit:contain; padding: 0; margin: 0; z-index: 1;} /* max-width: 90%;  max-height: 95%; */
.cardViewLink .textView{
  position:absolute; top:95%; left:95%;
  transform: translate(-95%, -95%); display:block; 
  margin:0; padding:0; font-size:14px; 
  font-weight:600; width:100%; z-index: 1;
}

@media only screen and (min-width: 1240px) {
    .cardViewLink,
    .cardViewLinkBox .cardLinkBody {
      min-width: 285px;
    }
}
@media only screen and (max-width: 1240px) {
    .cardViewLink,
    .cardViewLinkBox .cardLinkBody {
      min-width: 240px;
    }
}
@media only screen and (max-width: 988px) {
    .cardViewLink,
    .cardViewLinkBox .cardLinkBody {
      min-width: 285px;
    }
}
/*===| Content Header breadcrumb |========================*/
.breadcrumb-heading{font-weight: 600!important;}
.breadcrumb-heading-divider{opacity:0.5;}
/*===| icon style |========================*/
.ri-icon-style{position:relative; top:3px; padding-right:5px; font-weight:600;}
/*===| box style |========================*/
.box-title-style{
  font-size:14.5px!important; 
  color:var(--primary-heading-text-1); 
  font-weight:600; 
  text-transform:uppercase;
}
.box-title-custom{font-size:15.5px!important; font-weight:500; text-transform:capitalize;}
.requiredInfoCount{font-size: 13.5px; color: #777; padding-left: 5px;}
.box-title-customIcon{font-size: 13px; padding-right: 3px;}
.box-tools-info-text{font-size: 13px; text-align:right; padding-top: 6px;}
/*===| dashboard information style |========================*/
.dash-info-link{
  padding: 10px auto;
  margin: 5px auto;
}
.dash-info-link .dash-info-data{
  display: block;
  padding: 3px;
  font-weight: 600;
  font-size: 16px;
}
.dash-info-link .dash-info-title{
  display: block;
  padding: 3px;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
}
.dash-info-link .info-border{
  margin-top: 4px;
  padding-top: 5px;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}
/*===| for dashboard table cell style |========================*/
.table-cell-2{
  text-align: center; 
  vertical-align: center; 
  width:50%;
  word-wrap: break-word;
}
.table-cell-3{
  text-align: center; 
  vertical-align: center; 
  width:33.33%;
  word-wrap: break-word;
}
.table-cell-4{
  text-align: center; 
  vertical-align: center; 
  width:25%;
  word-wrap: break-word;
}

/*===| loading dots style |========================*/
.dotTextLoading{position:relative;left:-10px;font-size: 11.5px;color:var(--dot-loader-color1);}
.dotTextLoading:after {
/*  content: ' . ';*/
  content:'\25CF';
  -webkit-animation: dots 1s steps(5, end) infinite;
          animation: dots 1s steps(5, end) infinite;
}
@-webkit-keyframes dots {
  0%, 20% {
    color: rgba(0,0,0,0);
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  40% {
    color: var(--dot-loader-color1);
    text-shadow:
      .4em 0 0 rgba(0,0,0,0),
      .8em 0 0 rgba(0,0,0,0);}
  60% {
    text-shadow:
      .5em 0 0 var(--dot-loader-color2),
      1.0em 0 0 rgba(0,0,0,0);}
  80%, 100% {
    text-shadow:
      .6em 0 0 var(--dot-loader-color2),
      1.2em 0 0 var(--dot-loader-color3);}
}
@keyframes dots {
  0%, 20% {
    color: rgba(0,0,0,0);
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  40% {
    color: var(--dot-loader-color1);
    text-shadow:
      .4em 0 0 rgba(0,0,0,0),
      .8em 0 0 rgba(0,0,0,0);}
  60% {
    text-shadow:
      .5em 0 0 var(--dot-loader-color2),
      1.0em 0 0 rgba(0,0,0,0);}
  80%, 100% {
    text-shadow:
      .6em 0 0 var(--dot-loader-color2),
      1.2em 0 0 var(--dot-loader-color3);}
}
/*================*/
.headingTextWithBorder{
    margin:5px auto 15px auto; 
    font-size:16px; 
    font-weight:600; 
    color:rgba(0, 59, 109, 0.9); 
    background:rgba(102, 154, 204, 0.25);
    border:2px solid rgba(0, 59, 109, 0.3); 
    padding: 7px 14px; 
    border-radius:6px;
}
.textHeadView{
    margin: 7px auto 12px auto;
/*    padding: 5px;*/
    background: #fff;
    font-size:15px; 
    font-weight:600; 
    color:rgba(0, 59, 109, 0.8); 
    display:flex;
}
.textHeadView::after{
    content: " ";
    color:rgba(0, 59, 109, 0.25); 
    flex:1;
    border-bottom:groove 2px;
    margin: auto 0.55rem;
/*    box-shadow: 0 -2px ;*/

/*    background-color: rgba(0, 59, 109, 0.3); 
    content: "";
    display: inline-block;
    height: 2px;
    position: relative;
    vertical-align: middle;
    width: calc(100% - 200px);*/
}
.textHeadViewUP{
    font-size: 14.5px; 
    color: #666; 
    font-weight: 600; 
    margin: 0;
    margin-right: 5px;
    margin-bottom: 10px;
    padding: 0;
    text-transform: uppercase;
    /*padding-bottom: 3px; */
    /*border-bottom: 1px solid #f2f2f2;*/
}
.textHeadViewUP_border{
    font-size: 14.5px; 
    color: #666; 
    font-weight: 600; 
    text-transform: uppercase;
    margin: 20px 0 10px 0;
    padding-top: 5px; 
    border-top: 1px solid #f2f2f2;
}
}
/*------------------------*/
/*form input are style*/
.formInputBox{}
.formInputBox .formLabelTitle{
    color: #8b8b8b; 
    text-align: right; 
    font-weight: 400!important; 
    font-size: 14px;
    text-transform: capitalize;
}
.formInputBox .formInputArea input, 
.formInputBox .formInputArea textarea, 
.formInputBox .formInputArea select{ width: 80%!important; display: inline-block;}
.formInputBox .formInputArea .afterText{ display: inline-block; padding-left: 5px; color:#8b8b8b; }
.formInputBox .formInputArea .inputBox{ width: 80%!important; display: inline-block;}
.formInputBox .formInputArea .inputBox{display: inline-block; width: 80%;}
.formInputBox .formInputArea .inputBox input,
.formInputBox .formInputArea .inputBox textarea{ width: 100%!important; display: inline-block;}
/*tool tip*/
.tooltipIcon{ color: rgb(0, 102, 204); font-size: 12px; padding-left: 3px; cursor: pointer; position: relative; }
.tooltipView{ color: rgb(0, 102, 204); font-size: 12px; padding-left: 3px; cursor: pointer; position: relative;}
.tooltipView .helpText{
    /*position: absolute;
    color: white;
    background-color: rgba(0, 0, 0, 0.7);
    width: 120px;
    font-size: 12px;
    padding: 5px;
    transition: 0.3s;
    text-align: left;
    z-index: 9999;
    padding: 3px;
    border-radius: 3px;
    display: inline-block;*/
/*    opacity: 0;*/
/*    visibility: hidden;*/
    position: absolute;
    width: clamp(100px, 100%, 250px);
    padding: 0px 4px 2px 4px;
    border-radius: 10px;
    text-align: center;
    background-color: rgb(72, 72, 71);
    z-index: 1;
    bottom: 120%;
    left: 50%;
    /* center the tooltip text box*/
    transform: translate(-50%);
    /* animation */
/*    opacity: 0;*/
/*    transition: opacity 1s;*/
}
.tooltipView .helpText::after {
    /*content: "";
    position: absolute;
    border: 10px solid transparent;*/
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%);
    border: 10px solid;
    border-color:  rgb(72, 71, 71) transparent transparent transparent;
}
.tooltipView[data-position = "top"] .helpText {
    bottom: 5px;
    left: -52px;
}
.tooltipView[data-position = "top"] .helpText::after {
    border-top-color: rgba(0, 0, 0, 0.7);
    left: 50px;
    bottom: -20px;
}
.tooltipView[data-position = "left"] .helpText {
    top: 10px;
    left: -150px;
}
.tooltipView[data-position = "left"] .helpText::after {
    border-left-color: rgba(0, 0, 0, 0.7);
    right: -20px;
    bottom: 5px;
}
.tooltipView[data-position = "bottom"] .helpText {
    bottom: -45px;
    left: -10px;
}
.tooltipView[data-position = "bottom"] .helpText::after {
    border-bottom-color: rgba(0, 0, 0, 0.7);
    left: 50px;
    top: -20px;
}
.tooltipView[data-position = "right"] .helpText {
    top: 10px;
    right: -150px;
}
.tooltipView[data-position = "right"] .helpText::after {
    border-right-color: rgba(0, 0, 0, 0.7);
    left: -20px;
    bottom: 5px;
}
/*---------------------------------------------------*/
/*pdoduct image slider - product listing section*/ 
/*-----------------------------------------------------*/
.textBtn{
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  text-transform: uppercase; 
  color: #0192b6; 
  cursor: pointer; 
  touch-action: manipulation;
}
.textBtn:hover{font-weight: 600;}
.infoBoxAreaView{display:block; border: 1px solid #e5e5e5; border-radius: 6px; margin-bottom:5px; word-wrap: break-word; overflow:hidden;}
.infoBoxAreaViewHead{display: block; width: 100%; padding: 2px; border-bottom: 1px solid #e5e5e5; background-color: #ebe9ea;}
.infoBoxAreaViewHead .headerText{font-size: 15px; color:#423c3f; padding: 7px 10px; margin: 0;}
.infoBoxAreaViewBody{display: block; width: 100%; overflow-y: auto; overflow-x: auto; color: #666; padding: 7px 10px;}
.infoBoxAreaViewBody .infoBodyText{font-size: 14px;}
.infoBoxAreaViewBody .textDivider{display:block; margin: 1px 0 0px 0; padding: 0; border: none;}
.infoBoxAreaViewBody .textInfoIcon{font-size: 5px; position: relative; top: -3px; padding:0 5px;}
.proImageGalleryView{
    display: block;
    position: relative;
}
.proImageGalleryView .proBigImageView{
    position: relative; 
    display: block;  
    padding: 0; 
    margin: 0;
    width: 100%;
    max-height:320px;
    overflow: hidden;
}
.proImageGalleryView .proBigImageView .activeImgView {
    display: block;
}

.proImageGalleryView .proBigImageView .activeImgView .imgContainer{
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;
    width: 350px; 
    height: 320px; 
    padding: 2px; 
    overflow: hidden;
}

.proImageGalleryView .proBigImageView .activeImgView .imgContainer img{
    max-width: 100%; 
    max-height: 100%;
}

.proImageGalleryView .proBigImageView .removeProImageBtn{
    position: absolute;
    top:0;
    right: 5%;
    cursor: pointer;
    display: none;
}

.proImageGalleryView .proBigImageView .removeProImageBtn i{
    font-size: 20px;
    color: rgba(208, 1, 1, 0.5);
/*    #b1b1b1;*/
}

.proImageGalleryView .proBigImageView .removeProImageBtn i:hover{
    color: rgba(208, 1, 1, 1); 
/*    #808080;*/
}

.proImageGalleryView .proImgPrev,
.proImageGalleryView .proImgNext {
    cursor: pointer;
    position: absolute;
    top: 45%;
    margin: 0px;
    background: rgba(0,0,0,0.01);
    color: #666;
    font-size: 20px;
    user-select: none;
    -webkit-user-select: none;
}

.proImageGalleryView .proImgNext {
    right: 0;
    border-radius: 50px 0px 0px 50px;
    padding: 15px 10px 15px 15px;
}

.proImageGalleryView .proImgPrev{
    left: 0;
    border-radius: 0px 50px 50px 0px;
    padding: 15px 15px 15px 10px;
}

.proImageGalleryView .proImgPrev:hover,
.proImageGalleryView .proImgNext:hover {
    color: black;
    background-color: rgba(0, 0, 0, 0.04);
}

.proImageGalleryView .proSmallImageThumbs{
    position: relative; 
    display: block;  
    padding: 0; 
    margin: 5px 0 0 0;
    width: 100%;
    height: auto;
}

.proImageGalleryView .proSmallImageThumbs .proImgThumbList{
    display: block; 
    position: relative; 
    width: 100%; 
    height: 81px;
    overflow: hidden; 
    white-space:nowrap;  
    padding: 0; 
    margin: 0;
}

.proImageGalleryView .proSmallImageThumbs .proImgListPrev,
.proImageGalleryView .proSmallImageThumbs .proImgListNext {
    cursor: pointer;
    position: absolute;
    top: 14%;
    margin: 0px;
    background: rgba(0,0,0,0.3);
    /*color: rgba(0,0,0,0.4);*/
    color: rgba(255, 255, 255, 0.5);
    font-size: 20px;
    user-select: none;
    -webkit-user-select: none;
}

.proImageGalleryView .proSmallImageThumbs .proImgListNext {
    right: 0;
    border-radius: 50px 0px 0px 50px;
    padding: 15px 10px 15px 15px;
}

.proImageGalleryView .proSmallImageThumbs .proImgListPrev{
    left: 0;
    border-radius: 0px 50px 50px 0px;
    padding: 15px 15px 15px 10px;
}

.proImageGalleryView .proSmallImageThumbs .proImgListPrev:hover,
.proImageGalleryView .proSmallImageThumbs .proImgListNext:hover {
    /*color: rgba(0,0,0,0.7);*/
    color: rgba(255, 255, 255, 0.9);
    background-color: rgba(0, 0, 0, 0.6);
}

/***move thumbs on click on buttons***/
/*.proImageGalleryView .proSmallImageThumbs .proImgListPrev:active ~ .proImgThumbList ul{
    transform:translateX(0%);
    transition:3s all;
}

.proImageGalleryView .proSmallImageThumbs .proImgListNext:active ~ .proImgThumbList ul{
    transform:translateX(-90%);
    transition:3s all;  
}*/

.proImageGalleryView .proSmallImageThumbs .proImgThumbList ul{
    float:left;  
    padding: 0; 
    margin: 0;
    transition:999999s all; 
    transform:translateX(0);
    position: relative;
    margin-top: 10px;
}

.proImageGalleryView .proSmallImageThumbs .proImgThumbList ul li{
    display:inline-block; 
    list-style:none; 
    margin:5px; 
    padding:0;
}

.proImageGalleryView .proSmallImageThumbs .proImgThumbList .thumbImgBox{
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
    height: 70px; 
    width: 70px; 
    background-color: #fff; 
    border:1px solid #e2e2e2; 
    cursor: pointer; 
/*    overflow: hidden;*/
    margin: 0; 
    padding: 0;
    position: relative;
}

.proImageGalleryView .proSmallImageThumbs .proImgThumbList .thumbImgBox:hover,
.proImageGalleryView .proSmallImageThumbs .proImgThumbList .activeBox{
    border:1px solid rgba(0,0,0,0.2);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
}

.proImageGalleryView .proSmallImageThumbs .proImgThumbList .thumbImgBox img{
    max-width: 100%;
    max-height: 100%;
    opacity: 0.8;
}

.proImageGalleryView .proSmallImageThumbs .proImgThumbList .thumbImgBox:hover,
.proImageGalleryView .proSmallImageThumbs .proImgThumbList .thumbImgBox .activeImg{
    opacity: 1;
}

.proImageGalleryView .proSmallImageThumbs .proImgThumbList .thumbImgBox .imgRemoveBtn{
    position: absolute; top:-10px; right:-6px; color:rgba(208, 1, 1, 0.5); cursor:pointer; z-index: 9;
}
.proImageGalleryView .proSmallImageThumbs .proImgThumbList .thumbImgBox .imgRemoveBtn:hover{
    color:rgba(208, 1, 1, 1);
}
/*----------*/
.removeImageBtn{
    position: absolute;
    top:0;
    right: 5%;
    cursor: pointer;
}

.removeImageBtn i{
    font-size: 20px;
    color: #b1b1b1;
}

.removeImageBtn i:hover{
    /*color: #808080;*/
    /*color: #ED0000;*/
    color: #f25959;
}
/*listing product info view*/
.proListInfoView{display: table; width: 100%;}
.proListInfoView .proListInfoRow{display: table-row; width: 100%;}
.proListInfoView .proListInfoRow .proListInfoCell{display: table-cell; width: 50%;}
.proListInfoView .proListInfoRow .proListInfoCell .textView{font-weight: 400;  margin: 0px;}
/*listing product image remove alert */
.imageDelAlertBox{ display: none;
    background-color: rgba(0, 0, 0, 0.8); position: absolute; bottom: 1px; width: 100%; min-height: 145px;
}
.imageDelAlertBox .imageDelAlertBody{ position: relative; width: 100%; color: rgb(255, 255, 255); top: 30px; }
.imageDelAlertBox .imageDelAlertBody .alertBtnArea{position: relative; width: 100%; color: rgb(255, 255, 255); top: 15px; text-align: center;}
.imageDelAlertBox .imageDelAlertBody .actionBtn{
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 0px;
    font-weight: 600;
    min-width: 96px;
    width: fit-content;
    height: 36px;
    cursor: pointer;
    outline: none;
    white-space: nowrap;
    color: rgb(21, 103, 191);
    border: 1px solid rgb(21, 103, 191);
    background-color: rgb(255, 255, 255);
}
.imageDelAlertBox .imageDelAlertBody .actionBtn:hover{color: rgb(255, 255, 255); background-color: rgb(21, 103, 191);}
.imageDelAlertBox .imageDelAlertBody .actionDelBtn{ color: rgba(208, 1, 1, 0.9); 
    border: 1px solid rgba(208, 1, 1, 0.6); background-color: rgb(245, 225, 225);}
.imageDelAlertBox .imageDelAlertBody .actionDelBtn:hover{ color: rgb(245, 225, 225); 
    border: 1px solid rgba(208, 1, 1, 0.6); background-color: rgba(208, 1, 1, 0.9);}
.inlineSpace10{display: inline-block; width: 10px;}