/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

/*******Area Type Start****/
.autocomplete-box{position:relative;top:100%;width:100%;max-height:225px;overflow:auto;-ms-overflow-style:none;scrollbar-width:none;border:1px solid #E9E9E9;border-top:none;z-index:1051;background-color:#ffffff}
.autocomplete-box p{padding-top:0!important}
.autocomplete-box:empty{border-color:transparent;background:transparent;height:0px}
.autocomplete-box::-webkit-scrollbar{display:none}
.autocomplete-option{display:block;width:100%;height:calc(1.5em + 1.5rem + 2px);padding:.75rem .75rem;font-size:13px;font-weight:400;cursor:pointer}
.autocomplete-value{display:none}
.autocomplete-text span{font-weight:600;color:#222222}
/*******Area Type End****/


.error {
    color: red;
    font-size: 12px;
}
.modal-slide-in .modal-dialog.sidebar-sm {
    width: 37rem !important;
}
img#previewMobileImg {
    width: 57px;
    margin-top: 6px;
}
.importloader {
    width: 13px !important;
    height: 13px !important;
    margin-right: 8px;
}
.dNone{
    display: none !important;
}
.rNone{
  display: none !important;
  pointer-events: none;
}
.tiersPosition{
    position: absolute;
    z-index: 999999;
}
.addreward{
    margin: 10px 0px;
}
.p-cstm-table{
    padding: 0px 10px;
}
.myItem {
    z-index: 999999;
    cursor: pointer;
}
.cursur-pointer{
  cursor: pointer !important;
}
.dark-style #template-customizer .template-customizer-open-btn {
  background: #555;
  display: none;
}

div#template-customizer {
  visibility: hidden!important;
}


/****Overlay code start**/
#overlay{
    position: fixed;
    top: 0;
    z-index: 9999999999;
    width: 100%;
    height:100%;
    display: none;
    background: rgba(0,0,0,0.6);
  }
  .cv-spinner {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .spinner {
    width: 40px;
    height: 40px;
    border: 4px #ddd solid;
    border-top: 4px #2e93e6 solid;
    border-radius: 50%;
    animation: sp-anime 0.8s infinite linear;
  }

  .addres_error,  .radius_error,
  .radius_count_error {
    color: #e14646 !important
  }

  .mapAddressTextField {
    position: relative;
    bottom: 300px;
  }

  #map {
    height: 400px;
  }

  .image-area {
      position: relative;
      margin-right: 20px;
    }
.image-area img{
  max-width: 100%;
  height: auto;
}
.remove-image {
    display: none;
    position: absolute;
    top: -10px;
    right: -10px;
    border-radius: 10em;
    padding: 2px 6px 3px;
    text-decoration: none;
    font: 700 21px/20px sans-serif;
    background: #555;
    border: 3px solid #fff;
    color: #FFF;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 2px 4px rgba(0,0,0,0.3);
      text-shadow: 0 1px 2px rgba(0,0,0,0.5);
      -webkit-transition: background 0.5s;
      transition: background 0.5s;
  }
  .remove-image:hover {
    background: #E54E4E;
      padding: 3px 7px 5px;
      top: -11px;
    right: -11px;
  }
  .remove-image:active {
    background: #E54E4E;
      top: -10px;
    right: -11px;
  }






  .eyeButton{position: absolute;top: 27px;right: 0px;border: 0 !important;    background: transparent !important;}
  .toggleEye{position:relative;}
  @keyframes sp-anime {
    100% {
      transform: rotate(360deg);
    }
  }
  .is-hide{
    display:none;
  }
/****Overlay code end**/
.dashboardImg{
  height: 3rem;
  width: 3rem;
  border-radius: 0px !important;
}
.anc-cstm-clr{
  color: #FC6011 !important;
}
/****7 column*****/
@media (min-width: 768px){
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1  {
    width: 100%;
    *width: 100%;
  }
}

@media (min-width: 992px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}

/**
 *  The following is not really needed in this case
 *  Only to demonstrate the usage of @media for large screens
 */
@media (min-width: 1200px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}
/*********/