*{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-user-select: none;
    user-select: none;
}

body{
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;

font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;
overflow: hidden;
color: #263843;
}

.position-absolute{position: absolute;}

.display-none{display: none;}


.border-right{border-right: 1px solid #bababa;}
.border-left{border-left: 1px solid #bababa;}
.border-top{border-top: 1px solid #bababa;}
.border-bottom{border-bottom: 1px solid #bababa;}

.border-main-color{border: 1px solid #25a196;}
.border-white-color{border: 1px solid #ffffff;}
.border-top-green{border-top: 1px solid #25a196;}
.border-bottom-green{border-bottom: 1px solid #25a196;}
.border-left-green{border-left: 1px solid #25a196;}
.border-right-green{border-right: 1px solid #25a196;}

.uppercase{text-transform: uppercase;}
.align-center{text-align: center;}
.align-right{text-align: right;}
.align-left{text-align: left;}
.align-justify{text-align: justify;}
.text-indent{text-indent: 5px;}
.text-indent-10{text-indent: 10px;}
.text-indent-20{text-indent: 20px;}
.text-indent-right-10{right: 10px;}
.text-indent-right-20{right: 20px;}

.word-wrap{
    word-break: break-word;
}

.word-wrap-all{
    word-break: break-all;
}
.pre-wrap{white-space: pre-wrap;}

.border-radius-10{border-radius: 10px;}

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

.overflow-hidden{ 
    overflow: hidden;
}

.padding5{padding: 5px;}
.padding10{padding: 10px;}
.padding15{padding: 15px;}
.padding20{padding: 20px;}
.padding30{padding: 30px;}
.padding40{padding: 40px;}
.padding80{padding: 80px;}

.margin20{margin: 20px;}
.margin40{margin: 40px;}

.padding-top-3{padding-top: 3px;}
.padding-top-5{padding-top: 5px;}
.padding-top-7{padding-top: 7px;}
.padding-top-10{padding-top: 10px;}
.padding-top-12{padding-top: 12px;}
.padding-top-15{padding-top: 15px;}
.padding-top-20{padding-top: 20px;}
.padding-top-30{padding-top: 30px;}
.padding-top-40{padding-top: 40px;}

.padding-bottom-5{padding-bottom: 5px;}
.padding-bottom-10{padding-bottom: 10px;}
.padding-bottom-20{padding-bottom: 20px;}
.padding-bottom-30{padding-bottom: 30px;}
.padding-bottom-40{padding-bottom: 40px;}

.padding-left-10{padding-left: 10px;}
.padding-left-20{padding-left: 20px;}
.padding-left-30{padding-left: 30px;}
.padding-left-40{padding-left: 40px;}


.padding-right-10{padding-right: 10px;}
.padding-right-20{padding-right: 20px;}
.padding-right-30{padding-right: 30px;}
.padding-right-40{padding-right: 40px;}


.margin-auto{margin: auto;}
.margin-width-auto{
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
}


.margin-height-auto{margin-top: calc(50vh - 150px);}

.margin-left-auto{margin-left:auto;}
.margin-right-auto{margin-right:auto;}


.margin-right-5{margin-right: 5px;}
.margin-right-10{margin-right: 10px;}
.margin-right-20{margin-right: 20px;}
.margin-right-30{margin-right: 30px;}
.margin-right-40{margin-right: 40px;}
.margin-right-60{margin-right: 60px;}

.margin-left-5{margin-left: 5px;}
.margin-left-10{margin-left: 10px;}
.margin-left-20{margin-left: 20px;}
.margin-left-30{margin-left: 30px;}
.margin-left-40{margin-left: 40px;}

.margin-top-5{margin-top: 5px;}
.margin-top-10{margin-top: 10px;}
.margin-top-15{margin-top: 15px;}
.margin-top-20{margin-top: 20px;}
.margin-top-25{margin-top: 25px;}
.margin-top-30{margin-top: 30px;}
.margin-top-40{margin-top: 40px;}
.margin-top-50{margin-top: 50px;}
.margin-top-80{margin-top: 80px;}

.margin-bottom-5{margin-bottom: 5px;}
.margin-bottom-10{margin-bottom: 10px;}
.margin-bottom-15{margin-bottom: 15px;}
.margin-bottom-20{margin-bottom: 20px;}
.margin-bottom-25{margin-bottom: 25px;}
.margin-bottom-30{margin-bottom: 30px;}
.margin-bottom-40{margin-bottom: 40px;}
.margin-bottom-60{margin-bottom: 60px;}
.margin-bottom-80{margin-bottom: 80px;}

.bottom{bottom: 0px;}
.inline-block{display: inline-block;}

.float-right{float:right;}
.float-left{float:left;}

.cursor-pointer{cursor: pointer;}
.cursor-move {cursor: move;}
.cursor-move-horizontal {cursor: col-resize;}
.cursor-progress {cursor: progress;}
.border-top{border-top: 1px solid #eee;}
.border-bottom{border-bottom: 1px solid #eee;}
.border-bottom-dashed{border-bottom: 1px dashed #eee;}

.line-height-10{line-height: 10px;}
.line-height-15{line-height: 15px;}
.line-height-20{line-height: 20px;}
.line-height-40{line-height: 40px;}

.border-radius-5{border-radius: 5px;}
.border-radius-10{border-radius: 10px;}
.border-radius-left-5{border-top-left-radius: 5px; border-bottom-left-radius: 5px;}
.border-radius-left-10{border-top-left-radius: 10px; border-bottom-left-radius: 10px;}
.border-radius-right-5{border-top-right-radius: 5px; border-bottom-right-radius: 5px;}
.border-radius-right-10{border-top-right-radius: 10px; border-bottom-right-radius: 10px;}

.border-radius-bottom-5{border-bottom-right-radius: 5px; border-bottom-left-radius: 5px;}

.border-radius-circle{border-radius: 50%;}

.pointer-events{pointer-events:none;}
.no-select{
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}


/*HEIGHTS*/
.height-100-percent{
    height: 100%;
}
.height10{
    vertical-align: middle;
    height:10px;
    line-height: 10px;
}
.height15{
    vertical-align: middle;
    height:15px;
    line-height: 15px;
}
.height20{
    vertical-align: middle;
    height:20px;
    line-height: 20px;
}
.height30{
    vertical-align: middle;
    height:30px;
    line-height: 30px;
}
.height40{
    vertical-align: middle;
    height:40px;
    line-height: 40px;
}
.height50{
    vertical-align: middle;
    height:50px;
    line-height: 50px;
}
.height60{
    vertical-align: middle;
    height:60px;
    line-height: 60px;
}
.height70{
    vertical-align: middle;
    height:70px;
    line-height: 70px;
}
.height80{
    vertical-align: middle;
    height:80px;
    line-height: 80px;
}
.height100{
    vertical-align: middle;
    height:100px;
    line-height: 100px;
}
.height150{
    vertical-align: middle;
    height:150px;
    line-height: 150px;
}
.height250{
    vertical-align: middle;
    height:250px;
    line-height: 250px;
}
.height300{
    vertical-align: middle;
    height:300px;
    line-height: 300px;
}
.height500{
    vertical-align: middle;
    height:500px;
    line-height: 500px;
}
.heigh100vh{
    height:100vh;
}

.min-height-20{min-height: 20px;}
.min-height-50{min-height: 50px;}
/*HEIGHTS*/

/*WIDTH*/
.width-fit-content{width: fit-content;}
.width20{width: 20px;}
.width30{width: 30px;}
.width40{width: 40px;}
.width50{width: 50px;}
.width60{width: 60px;}
.width70{width: 70px;}
.width75{width: 75px;}
.width80{width: 80px;}
.width100{width: 100px;}
.width120{width: 120px;}
.width150{width: 150px;}
.width200{width: 200px;}
.width250{width: 250px;}
.width300{width: 300px;}
.width350{width: 350px;}
.width400{width: 400px;}
.width800{width: 800px;}
.max-width-20{max-width: 20px;}
.max-width-30{max-width: 30px;}
.max-width-40{max-width: 40px;}
.max-width-50{max-width: 50px;}
.max-width-80{max-width: 80px;}
.max-width-100{max-width: 100px;}
.max-width-150{max-width: 150px;}
.max-width-200{max-width: 200px;}
.max-width-250{max-width: 250px;}
.max-width-300{max-width: 300px;}
.min-width-50{min-width: 50px;}
.min-width-100{min-width: 100px;}
.min-width-150{min-width: 150px;}
.min-width-250{min-width: 250px;}
/*WIDTH*/


.right-0{right: 0px;}
.top-0{top: 0px;}

.center-element{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-top: auto;
}

.center-element-horizontal{
    left: 0;
    right: 0;    
    margin-left: auto;
    margin-right: auto;    
}


/*GRID*/
.grid-center-500{    
    position: relative;
    width: 500px;        
    margin: 0 auto;    
}
.grid-center{    
    position: relative;
    width: 80%;
    margin-left: 10%;  
    margin-right: 10%;
    max-width: 960px;
    margin: 0 auto;    
}
.grid-form{
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    font-size: 12px;
}
.grid-flex{
    display: flex;
    position: relative;
    width: 100%;
    flex: 1;
}
.grid-colunn{
    flex-direction: column;
}
.grid-flex-grow{
    flex-grow: 1;
    flex-shrink: 100;
}

.grid-flew-between{
    justify-content: space-between;
}
.grid-button {
    position: relative;
    width: 100%;
    height: 40px;
}
.grid-1-1{
    position: relative;
    width: 100%;      
}
.grid-1-2{
    position: relative;
    width: 50%;
    display: inline-block;
    vertical-align: top;
}
.grid-1-3{
    position: relative;
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
    display: inline-block;
    vertical-align: top;
}
.grid-1-4{
    position: relative;
    width: 25%;
    display: inline-block;
    vertical-align: top;
}
.grid-1-5{
    position: relative;
    width: 20%;
    display: inline-block;
    vertical-align: top;
}
.grid-4-5{
    position: relative;
    width: 80%;
    display: inline-block;
    vertical-align: top;
}
.grid-1-6{
    position: relative;
    width: 16%;
    display: inline-block;
    vertical-align: top;
}
.grid-1-8{
    position: relative;
    width: 12.5%;
    display: inline-block;
    vertical-align: top;
}
.grid-1-10{
    position: relative;
    width: 10%;
    display: inline-block;
    vertical-align: top;
}
.grid-2-3{
    position: relative;
     width: 100%;
    grid-template-columns: 2fr, 1fr;
    display: inline-block;
    vertical-align: top;
}
.grid-3-4{
    position: relative;
    width: 75%;
    display: inline-block;
    vertical-align: top;
}
.grid-5-6{
    position: relative;
    width: 84%;
    display: inline-block;
    vertical-align: top;
}
.grid-7-8{
    position: relative;
    width: 87.5%;
    display: inline-block;
    vertical-align: top;
}
.grid-9-10{
    position: relative;
    width: 90%;
    display: inline-block;
    vertical-align: top;
}

.grid-column-template-1-1{
    display: grid;
    width: 100%;    
    /*height: 100%;    */
    grid-template-columns: 1fr 1fr;
    justify-items: stretch;        
}

.grid-column-template-2-1{
    display: grid;
    width: 100%;    
    height: 100%;    
    grid-template-columns: 2fr 1fr;
    justify-items: stretch;        
}

.grid-column-template-3-1{
    display: grid;
    width: 100%;    
    height: 100%;    
    grid-template-columns: 2fr 1fr 1fr;
    justify-items: stretch;        
}

.grid_btns{
    margin-top: 10px;
    margin-bottom: 20px;
    vertical-align: top;
}
.grid-table{
    position: relative;
    width: 100%;           
}
.grid-table-row{
    position: relative;
    display: flex;    
    height: 50px;
    line-height: 50px;    
}
.grid-table-row:nth-child(odd){
    background-color: #ebeef3;
}
 
.grid-table-row input{
    position: relative;
    width: 85%;    
    height: 30px;
    margin-top: 10px;
    outline: 0;
    border: 1px solid #c2c2c2;
    border-radius: 5px;
    text-align: center;
}
.grid-collumn-5{width:5%;}
.grid-collumn-10{width:10%;}
.grid-collumn-15{width:15%;}
.grid-collumn-20{width:20%;}
.grid-collumn-25{width:25%;}
.grid-collumn-30{width:30%;}
.grid-collumn-35{width:35%;}
.grid-collumn-40{width:40%;}
.grid-collumn-45{width:45%;}
.grid-collumn-50{width:50%;}
.grid-collumn-55{width:55%;}
.grid-collumn-60{width:60%;}
.grid-collumn-65{width:65%;}
.grid-collumn-70{width:70%;}
.grid-collumn-75{width:75%;}
.grid-collumn-80{width:80%;}
.grid-collumn-85{width:85%;}
.grid-collumn-90{width:90%;}
.grid-collumn-95{width:95%;}
.grid-collumn-100{width:100%;}

.grid-3-collumn {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-row-gap:    5px;
  grid-column-gap: 5px;
}

.grid-row{
    border-bottom: 1px solid #eaeaea;
    height: 50px;
    line-height: 50px;
    margin-bottom: 20px;
}

.grid-box-1-3{
    position: relative;
    width: calc(33% - 30px);
    display: inline-block;
    min-height: 40px;
    line-height: 40px;
    margin-left: 20px;
    margin-right: 20px;
    border-radius: 4px;
}
.grid-box-1-3:first-child{
    margin-left: 0px;
}
.grid-box-1-3:last-child{
    margin-right: 0px;
}
.grid-auto-width{
    width: auto;
}
.grid-page-numbers{
    position: relative;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px 5px 5px 5px;
}
.grid-circle{
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 50%; 
    margin: 0px 5px 0px 5px;
}
.grid-table-header-icon{
    position: relative;
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-position: 50%;
    width: 20px;
    cursor: pointer;
}
.flex-justify-end{
    justify-content: flex-end;
    
}
.flex-space-between{justify-content: space-between;}


.grid-vertical-flex{
    flex-direction: column;
}


/*ICONS*/
.icon-size-5{
    background-size: 5px 5px;
    background-repeat: no-repeat;
}
.icon-size-10{
    background-size: 10px 10px;
    background-repeat: no-repeat;
}
.icon-size-15{
    background-size: 15px 15px;
    background-repeat: no-repeat;
}
.icon-size-20{
    background-size: 20px 20px;
    background-repeat: no-repeat;
}
.icon-size-30{
    background-size: 30px 30px;
    background-repeat: no-repeat;
}
.icon-size-60{
    background-size: 60px 60px;
    background-repeat: no-repeat;
}
.icon-size-100{
    background-size: 100px 100px;
    background-repeat: no-repeat;
}
.icon-align-left{
    background-position: left center;
    background-repeat: no-repeat;  
}
.icon-align-right{
    background-position: right center;
    background-repeat: no-repeat;  
}
.icon-align-center{
    background-position: center;
    background-repeat: no-repeat;  
}
.icon-align-center-top{
    background-position: center top;
    background-repeat: no-repeat;  
}
.icon-round{
    border-radius: 50%;
    object-fit: cover;
}
.icon-round:hover:after{
    position: absolute;
    content:attr(data-title);
    width: 300px;
    height: 30px;
    
    color: #fff;
}
/*ICONS*/


/*INPUT*/

.checkbox_input{
    position: relative;
    width: 10%;
    height: 100%;    
    display: inline-block;
}
.checkbox_label{
    position: relative;
    width: 90%;
    height: 100%;    
    display: inline-block;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
.product_item{
    position: relative;
    height: 150px;
    margin: 10px;
    background-color: #fff;
    border:1px solid #ececec;
    cursor: pointer;
}
.input_regular{
    position: relative;
    width: 80%;
    margin-left: 10px;
    height: 30px;
    line-height: 30px;
    outline:0;
    top: 5px;    
    border-radius: 3px;
    border: 1px solid #cecece;
    text-indent: 5px;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}


/* Checkbox Starts */
.checkbox-label {
    display: block;
    position: relative;
    margin: auto;
    cursor: pointer;
    font-size: 12px;
    line-height: 24px;
    text-indent: 30px;    
}
.checkbox-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.checkbox-label .checkbox-custom {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 16px;
    width: 16px;
    background-color: transparent;
    border-radius: 5px;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    border: 1px solid #25a196;
    top: 2px;
}
.checkbox-label input:checked ~ .checkbox-custom {
    background-color: #25a196;
    border-radius: 5px;
    -webkit-transform: rotate(0deg) scale(1);
    -ms-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
    opacity:1;
    border: 1px solid #FFFFFF;
    top: 2px;
}
.checkbox-label .checkbox-custom::after {
    position: absolute;
    content: "";
    left: 12px;
    top: 12px;
    height: 0px;
    width: 0px;
    border-radius: 5px;
    border: solid #FFFFFF;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(0deg) scale(0);
    -ms-transform: rotate(0deg) scale(0);
    transform: rotate(0deg) scale(0);
    opacity:1;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
}
.checkbox-label input:checked ~ .checkbox-custom::after {
  -webkit-transform: rotate(45deg) scale(1);
  -ms-transform: rotate(45deg) scale(1);
  transform: rotate(45deg) scale(1);
  opacity:1;
  left: 6px;
  top: 2px;
  width: 3px;
  height: 8px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  background-color: transparent;
  border-radius: 0;
}
.checkbox-label .checkbox-custom::before {
    position: absolute;
    content: "";
    left: 7px;
    top: 3px;
    width: 0px;
    height: 0px;
    border-radius: 5px;
    border: 1px solid #FFFFFF;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);    
}
.checkbox-label input:checked ~ .checkbox-custom::before {
    left: -3px;
    top: -3px;
    width: 16px;
    height: 16px;
    border-radius: 5px;
    -webkit-transform: scale(3);
    -ms-transform: scale(3);
    transform: scale(3);
    opacity:0;
    z-index: 999;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    border: 1px solid rgba(0,0,0,0.5);
}
/* Checkbox End */

/* Rounded sliders */
.switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  top: -2px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #25a196;
  -webkit-transition: .4s;
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .slider {
  background-color: #25a196;
}
input:focus + .slider {
  box-shadow: 0 0 1px #25a196;
}
input:checked + .slider:before {
  -webkit-transform: translateX(16px);
  -ms-transform: translateX(16px);
  transform: translateX(16px);
}
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}

.label-color-dove-grey{
    color:#707070;
}


input,
textarea,
[contenteditable] {
    -webkit-user-select: text;
    user-select: text;
}