:root{
    --primary-light: #7142ff;
    --primary-main: #0000ff;
    --primary-dark: #0000ca;

    --secondary-light: #ffd982;
    --secondary-main: #faa753;
    --secondary-dark: #c37824;

    --common-white: #ffffff;
    --common-black: #1C1C1C;
    --common-blue-cloud: #ebf0f8;
    --common-gray: #808080;
    --common-gray-light: #ebf0f8;
    --common-gray-dark: #f1f1f1;
    
    --common-brown: #745d5d;
    --common-red: #f00;
    --common-blue: #0057d9;    
    --common-gray-field: #f2f2f2;
    --common-gray-border: #E6E8ED;
    --common-gray-label: #A7A7A7;  
    --common-gray-disabled-button: #B4B4B4;  
    --common-blue-soft: #9EC5FF;   

    
        
    
    
}

[v-cloak] > * { display:none }


/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #B5B5C3 white;
  }

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 8px;
}

*::-webkit-scrollbar-track {
    background: white;
    border-radius: 5px;
}
  
*::-webkit-scrollbar-thumb {
    background-color: #B5B5C3;
    border-radius: 8px;  
}

/* bootstrap override */
.custom-select {
    background: #fff
    url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='292.362px' height='292.362px' viewBox='0 0 292.362 292.362' style='enable-background:new 0 0 292.362 292.362;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M286.935,69.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952,0-9.233,1.807-12.85,5.424 C1.807,72.998,0,77.279,0,82.228c0,4.948,1.807,9.229,5.424,12.847l127.907,127.907c3.621,3.617,7.902,5.428,12.85,5.428 s9.233-1.811,12.847-5.428L286.935,95.074c3.613-3.617,5.427-7.898,5.427-12.847C292.362,77.279,290.548,72.998,286.935,69.377z'/%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A")
    no-repeat right 0.75rem center/8px 10px;
}
.custom-select.is-valid,
.was-validated .custom-select:valid {
  background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='292.362px' height='292.362px' viewBox='0 0 292.362 292.362' style='enable-background:new 0 0 292.362 292.362;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M286.935,69.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952,0-9.233,1.807-12.85,5.424 C1.807,72.998,0,77.279,0,82.228c0,4.948,1.807,9.229,5.424,12.847l127.907,127.907c3.621,3.617,7.902,5.428,12.85,5.428 s9.233-1.811,12.847-5.428L286.935,95.074c3.613-3.617,5.427-7.898,5.427-12.847C292.362,77.279,290.548,72.998,286.935,69.377z'/%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A")
      no-repeat right 0.75rem center/8px 10px,
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e")
      #fff no-repeat center right 1.75rem / calc(0.75em + 0.375rem)
      calc(0.75em + 0.375rem);
}
.custom-select.is-invalid,
.was-validated .custom-select:invalid {
    background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='292.362px' height='292.362px' viewBox='0 0 292.362 292.362' style='enable-background:new 0 0 292.362 292.362;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M286.935,69.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952,0-9.233,1.807-12.85,5.424 C1.807,72.998,0,77.279,0,82.228c0,4.948,1.807,9.229,5.424,12.847l127.907,127.907c3.621,3.617,7.902,5.428,12.85,5.428 s9.233-1.811,12.847-5.428L286.935,95.074c3.613-3.617,5.427-7.898,5.427-12.847C292.362,77.279,290.548,72.998,286.935,69.377z'/%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A")
    no-repeat right 0.75rem center/8px 10px,
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e")
        #fff no-repeat center right 1.75rem / calc(0.75em + 0.375rem)
        calc(0.75em + 0.375rem);
}


/* .custom-filter {
    background: #fff
    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAKCAYAAAB8OZQwAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB6SURBVHgBjU6xDYAgEOTjD6IJA+gGlsAUlpZuoE7gDE6gJSV7QKKlQxDwScTKwivuPvefv2PsgZRyy3ORSCk1kvScc3DOGRBClABw5CvvfYOkU4zRZBMRO/YbQKkLaf0aACcSrfRzyGYIoSqstVeqQmhpOWutd/ZV/gYOiCZ7z439bAAAAABJRU5ErkJggg==")
    no-repeat right 0.75rem center/8px 10px;
}
.custom-filter.is-valid,
.was-validated .custom-select-filter:valid {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAKCAYAAAB8OZQwAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB6SURBVHgBjU6xDYAgEOTjD6IJA+gGlsAUlpZuoE7gDE6gJSV7QKKlQxDwScTKwivuPvefv2PsgZRyy3ORSCk1kvScc3DOGRBClABw5CvvfYOkU4zRZBMRO/YbQKkLaf0aACcSrfRzyGYIoSqstVeqQmhpOWutd/ZV/gYOiCZ7z439bAAAAABJRU5ErkJggg==")
      no-repeat right 0.75rem center/8px 10px,   calc(0.75em + 0.375rem);
}
.custom-filter.is-invalid,
.was-validated .custom-filter:invalid {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAKCAYAAAB8OZQwAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB6SURBVHgBjU6xDYAgEOTjD6IJA+gGlsAUlpZuoE7gDE6gJSV7QKKlQxDwScTKwivuPvefv2PsgZRyy3ORSCk1kvScc3DOGRBClABw5CvvfYOkU4zRZBMRO/YbQKkLaf0aACcSrfRzyGYIoSqstVeqQmhpOWutd/ZV/gYOiCZ7z439bAAAAABJRU5ErkJggg==")
    no-repeat right 0.75rem center/8px 10px,   calc(0.75em + 0.375rem);
} */

.table-striped thead th{
    border-top: 2px solid #e1e6ef;
    border-bottom: 1px solid #e1e6ef;
}
.table-striped tbody tr:not(:hover):nth-of-type(odd){
    background-color: #f8f8f8;
}
.table-striped tbody tr:last-of-type td{
    border-bottom: 1px solid #e1e6ef;
}
/* end bootstrap custom override */

.img-post {
    width: 100%;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.no-margin-padding {
    margin: 0px;
    padding: 0px;
}

.pull-right{
    position: absolute;
    right: 10px;
}

.loader-center {
	justify-content: center;
	padding: 2rem;
}

.loader {
  	border: 10px solid #f3f3f3;
  	border-top: 10px solid #012A91;
  	border-radius: 50%;
  	width: 75px;
  	height: 75px;
  	animation: spin 2s linear infinite;
}

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



.wrap-login100 {
    width: 100%;
    background: #fff;
    overflow: hidden;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    flex-direction: row-reverse;
}

.login100-form {
    width: 560px;
    min-height: 100vh;
    display: block;
    background-color: #f7f7f7;
    padding: 173px 55px 55px;
}

.login100-more {
    width: calc(100% - 560px);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1;
}

.validate-input {
    position: relative;
}

.wrap-input100 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    width: 100%;
    height: 80px;
    position: relative;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    margin-bottom: 10px;
}

.divider {
    width: 100%;
    height: 2px;
    background-color: #cacccf;
    border-style: none;
}

.img-report {
    width: 100%;
    height: 270px;
    object-fit: contain;
}
.py-2-5{
    padding-top: 12px;
    padding-bottom: 12px;
}

.table-bordered-dark {
    border: 1px solid #212529;
}

.table-th-dark {
    border: 1px solid #212529 !important;
    border-bottom: 2px solid #212529 !important;
}

.table-td-dark {
    border: 1px solid #212529 !important;
}

.table-td-bold-dark {
    border: 1px solid #212529 !important;
    border-top: 2px solid #212529 !important;
}

.html-vue {
    color: #212529;
}

.html-vue p span {
    color: #212529;
}

/* CUSTOM ACCORDION */
.custom-accordion {
    /* background-color: #eee; */
    color: #444;
    cursor: pointer;
    padding: 17px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
  }
  
  .active-accordion, .custom-accordion:hover {
    background-color: #ccc;
  }
  
  .custom-accordion:after {      
    content: url(../img/icons/icon_plus_circle.png);
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
  }
  
  .active-accordion:after {    
    content: url(../img/icons/icon_minus_circle_filled.png);    
  }
  
  .custom-accordion-panel {
    padding: 0 17px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    border-bottom: 1px solid var(--common-gray-dark);    
  }
  
/* REMOVE OUTLINE BUTTON BOOTSTRAP */
.btn:focus,.btn:active:focus,.btn.active:focus,
.btn.focus,.btn:active.focus,.btn.active.focus {
      box-shadow: none;
}

/* NAVBAR */
.navbar-custom {
    background-color: var(--primary-main);
}

.box-shadow {
    transition: box-shadow .3s;
    border-radius:3px;
}
.box-shadow:hover {
    -webkit-box-shadow: 0px 2px 5px 2px grey;
    -moz-box-shadow: 0px 2px 5px 2px grey;
    box-shadow: 0px 2px 5px 2px grey;
}

.bg-box-shadow {
    transition: box-shadow .3s;
    border-radius:3px;
    -webkit-box-shadow: 0px 2px 5px 2px #ebf0f8;
    -moz-box-shadow: 0px 2px 5px 2px #ebf0f8;
    box-shadow: 0px 2px 5px 2px #ebf0f8;
}

/* Ripple effect */
.ripple {
    background-position: center;
    transition: background 0.8s;
}
.ripple:hover {
    background: var(--primary-light) radial-gradient(circle, transparent 1%, var( --primary-light) 1%) center/15000%;
    border-radius: 5px;
}
.ripple:active {
    background-color: var(--primary-light);
    background-size: 100%;
    transition: background 0s;
}

/* Ripple effect */
.ripple-secondary {
    background-position: center;
    transition: background 0.8s;
}
.ripple-secondary:hover {
    background: var(--secondary-main) radial-gradient(circle, transparent 1%, var(--secondary-main) 1%) center/15000%;
}
.ripple-secondary:active {
    background-color: var(--secondary-dark);
    background-size: 100%;
    transition: background 0s;
}
/* sidebar menu */
.sidebar-menu-wrapper{
    background: var(--common-blue);
    border-radius: 6px;
    padding: 20px;
    height: 100%;
}
.sidebar-menu-wrapper .sidebar-menu{
    margin-bottom: 0px;
    padding-left: 0px;
    list-style: none;
}
.sidebar-menu-wrapper .sidebar-menu .sidebar-menu-item{
    border-bottom: 1px solid white;
    padding: 20px 0 10px 0;
}
.sidebar-menu-wrapper .sidebar-menu .sidebar-menu-item::before{
    content: "\2022";
    color: #8bb6f5;
}
.sidebar-menu-wrapper .sidebar-menu .sidebar-menu-item .sidebar-menu-link{
    color: #8bb6f5;
    padding-left: 12px;
}
.sidebar-menu-wrapper .sidebar-menu .sidebar-menu-item.active::before,
.sidebar-menu-wrapper .sidebar-menu .sidebar-menu-item.active .sidebar-menu-link{
    color: white;
}

/* profile */
.profile-image-inner-container .img-profile{
    width: 150px;
    object-fit: cover;
    border-radius: 50px;
    height: 150px;
    border-radius: 100%;
}
.profile-image-inner-container .profile-image-button{
    position: absolute;
    bottom: 0px;
    right: 0px;
    display: flex;
    width: 30px;
    align-items: center;
    height: 30px;
    justify-content: center;
}

/* report */
.report-overlay{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background: linear-gradient(-180deg, rgba(0, 87, 217, 0) 0%, rgb(28, 28, 28) 100%);
}
.modal-report .modal-header{
    background: var(--common-blue);
    position: relative;
    justify-content: center;
    align-items: center;
    color: white;
    border-radius: 10px 10px 0 0;
}
.modal-report .modal-header .close{
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0px;
    color: white;
    opacity: 1;
}
.modal-report .img-report-view{
    width: 100%;
    height: 100%;
    max-height: 450px;
    object-fit: contain;
    background: #f8f8f8;
    margin-bottom: 30px;
}
.modal-report .btn-primary{
    background: var(--common-blue);
}
.modal-report .form-file{
    border: 1px solid rgb(203, 203, 203);
    border-radius: 5px;
    padding: 15px;
    color: #a7a7a7;
    background: #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.modal-report .radio-control .input-radio,
.modal-report .input-file{
    border: 0px;
    padding: 0px;
    height: 0px;
    width: 0px;
    overflow: hidden;
    position: absolute;
}
.modal-report .radio-control .input-radio:checked + label{
    background: var(--primary-main);
    color: white;
}
.modal-report .radio-control label{
    border-radius: 3px;
    background: #bcbcbc;
    position: relative;
    padding: 6px;
    text-align: center;
    display: block;
    color: #797979;
    cursor: pointer;
}
.modal-report .radio-control label .control-indicator{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 6px;
    display: none;
}
.modal-report .radio-control .input-radio:checked + label .control-indicator{
    display: inline-block;
}

  /* PROGRESS BAR */
.container-progress-bar {
    width: 100%;
    margin: auto;
}
.progress-bar {
    height: 2px;
    background-color: var(--secondary-light);
    width: 100%;
    overflow: hidden;
}
.progress-bar-value {
    width: 100%;
    height: 100%;
    background-color: var(--secondary-main);
    -webkit-animation: indeterminateAnimation 1s infinite linear;
            animation: indeterminateAnimation 1s infinite linear;
    transform-origin: 0% 50%;
}

@-webkit-keyframes indeterminateAnimation {
    0% {
        transform:  translateX(0) scaleX(0);
    }
    40% {
        transform:  translateX(0) scaleX(0.4);
    }
    100% {
        transform:  translateX(100%) scaleX(0.5);
    }
}

@keyframes indeterminateAnimation {
    0% {
        transform:  translateX(0) scaleX(0);
    }
    40% {
        transform:  translateX(0) scaleX(0.4);
    }
    100% {
        transform:  translateX(100%) scaleX(0.5);
    }
}


.dropdown-item.active {
    color: var(--primary-main);
    text-decoration: none;
    /* border-bottom: 3px solid var(--primary-main); */
    background-color: transparent;
}

.dropdown-item:hover {
    color: var(--primary-main);
    text-decoration: none;
    background-color: var(--common-gray-light);
    border-radius: 5px;
}

.dropdown-item.active:after{
    content: '';
    position: absolute;
    bottom: 0;
    height: 3px;
    width: 54px;
    background: var(--primary-main);
    left: 24% ;
}

#image-logo {
    -webkit-transition:  all 0.5s ease ;
    -moz-transition:   all 0.5s ease  ;
    -ms-transition:  all 0.5s ease  ;
    -o-transition:  all 0.5s ease  ;
    transition:   all 0.5s ease  ;
}

.image-smaller {
    width: 133px;
    height: 33px;
}

/* ZOOM-IN ZOOM-OUT */
.transition-zoom-in {

    transition: transform 0.25s ease;	
    cursor: zoom-in;
}

.transition-zoom-out {
    transition: transform 0.25s ease;
    transform: scale(2);
    cursor: zoom-out;		
}
.transform-right-top {
    transform-origin: right top; 
}
.transform-left-top {
    transform-origin: left top; 
}
.transform-left-bottom {
    transform-origin: left bottom; 
}
.transform-right-bottom {
    transform-origin: right bottom; 
}

.transform-center-bottom {
    transform-origin: center bottom; 
}
.transform-center-top {
    transform-origin: center top; 
}
.transform-center {
    transform-origin: center; 
}

/* PULSE ANIMATION */

.pulse {	
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);	
	height: 7px;
	width: 7px;
	transform: scale(1);
	animation: pulse-black 2s infinite;
}

.pulse.red {
	background: rgba(255, 82, 82, 1);
	box-shadow: 0 0 0 0 rgba(255, 82, 82, 1);
	animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
    }
    
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(255, 82, 82, 0);
    }
    
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
    }
}

.fade-in {

	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 0.4s;
}

@keyframes fadeInOpacity {

	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.skeleton-box {
    display: inline-block;
    height: 1em;
    position: relative;
    overflow: hidden;
    background-color: #DDDBDD;
    border-radius: 5px;
  }
  .skeleton-box::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));
    -webkit-animation: shimmer 2s infinite;
            animation: shimmer 2s infinite;
    content: "";
  }
  @-webkit-keyframes shimmer {
    100% {
      transform: translateX(100%);
    }
  }
  @keyframes shimmer {
    100% {
      transform: translateX(100%);
    }
  }

.arrow-up {

    width: 0; 
    height: 0; 
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid var(--common-gray-light);  

}

.list-item-hover:hover {
    color: var(--primary-main);
    background-color: var(--common-gray-light);
}

/* Reference expressive css : https://tailwindcss.com/ */
.no-underline{
    text-decoration: none;
}

.mt-n-small {
    margin-top: -1.2rem;
}

.mt-n-medium {
    margin-top: -1.8rem;
}

.mt-1-75rem {
    margin-top: 1.75rem !important;
}

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


.mt-30px {
    margin-top: 30px;
}

.mt-40px {
    margin-top: 40px;

}

.list-none {
    list-style-type: none;
}

.list-none a {
    text-decoration: inherit;
    color: inherit;
}

.rounded-2xl {
    border-radius: 1rem !important;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.uppercase {
    text-transform: uppercase;
}
.capitalize {
    text-transform:capitalize;
}

.bg-primary-main {

    background-color: var(--primary-main);
}

.bg-blue-light{
    background-color: var(--common-blue-cloud);
}

.bg-gray-light {
    background-color: var(--common-gray-light);
}

.bg-gray-dark {
    background-color: var(--common-gray-dark);
}

.bg-gray-field {

    background-color: var(--common-gray-field);
}

.bg-blue-cloud {
    
    background-color: var(--common-blue-cloud);
}

.bg-blue-soft {
    
    background-color: var(--common-blue-soft);
}

.text-13px {
    font-size: 13px;
    line-height: 17px;
}

.text-14px {
    font-size: 14px;
    line-height: 19px;
}


.text-sm{
    font-size: small;
}

.text-lg{
    font-size: larger;
}

.text-md {
    font-size: medium;
}

.text-black {
    color: var(--common-black) !important;
}

.text-white {
    color: var(--common-white);
}

.text-gray{
    color: var(--common-gray);
}

.text-gray-dark{
    color: var(--common-gray-dark);
}

.text-gray-light{
    color: var(--common-gray-light);
}

.text-primary-main{
    color: var(--primary-main)
}

.text-common-blue {    
    color: var(--common-blue)
}


.text-gray-label {
    color: var(--common-gray-label)
}

.text-secondary-main{
    color: var(--secondary-main)
}

.text-gray-disabled-button {
    
    color: var(--common-gray-disabled-button);
}

.text-gray-disabled-button:hover {
    
    color: var(--common-gray-disabled-button);
}

.bg-primary-dark{
    background-color: var(--primary-dark)
}

.bg-secondary-light{
    background-color: var(--secondary-light)
}

.bg-secondary-main{
    background-color: var(--secondary-main)
}

.border-transparent{
    border-color: transparent;
}

.border-gray-disabled-button {
    
    border-color: var(--common-gray-disabled-button);
}


.border-b-transparent{
    border-bottom: 1px solid transparent !important ;
}

.border-t-transparent{
    border-top:1px solid transparent !important ;
}

.border-l-transparent{
    border-left:1px solid transparent !important ;
}

.border-r-transparent{
    border-right:1px solid transparent !important ;
}

.border-top-left-radius-sm {
    border-top-left-radius: 5px !important;
}

.border-bottom-right-radius-sm {
    border-bottom-right-radius: 5px !important;
}

.border-top-right-radius-sm {
    border-top-right-radius: 5px !important;
}

.border-bottom-left-radius-sm {
    border-bottom-left-radius: 5px !important;
}

.border-grey-button {

    border:1px solid var(--common-gray-border)!important ;   
}

.cursor-pointer {
    cursor: pointer !important;
}

.cursor-zoomin {
    cursor: zoom-in;
}

.cursor-not-allowed{
    cursor: not-allowed !important;
}

.cursor-progress {
    cursor: progress !important;
}

.list-none {
    list-style-type: none;
}

.justify-end {
    justify-content: flex-end;
}

.border-transparent {
    border: 1px solid transparent;
}

.reward-menu {
    display: none;
}

.border-none{
    border: none !important;
}

.mr-n37px {
    margin-right: -37px !important;
}

.whitespace-nowrap {
    white-space: nowrap !important;
}

.mb-8 {

    margin-bottom: 3rem !important;
}

.w-75px {

    width: 75px;
}

.w-102px {

    width: 102px;
}

.w-210px {

    width: 210px;
}

.w-310px {

    width: 310px;
}

.w-520px {

    width: 520px;
}

.left-n8 {

    left: -8%;
}

.top-0 {
    top: 0;
}

.-indent-9 {
    text-indent: -9px;
}

.overflow-x-scroll {
    
    overflow-x: scroll !important;
}

.h-32px {

    height: 32px;
}

.h-40px {
    
    height: 40px;
}

.h-80px {
    
    height: 80px;
}

.object-contain {

    object-fit: contain !important;
}

.z-index-2 {
    z-index: 2;
}

/* mobile device - sm */
@media (max-width: 740px) { 

    .w-sm-75 {

        width: 75% !important;
    }

    .w-sm-100 {

        width: 100% !important;
    }

    .w-sm-auto {

        width: auto !important;
    }

    .w-sm-320px {

        width: 320px !important;
    }

    .text-md-mobile {
        font-size: medium !important;
    }

    .text-sm-mobile {
        font-size: small !important;
    }

    .text-lg-mobile {
        font-size: larger !important;
    }

    .object-sm-cover {

        object-fit: cover !important;
    }

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

/* mobile monitor - xl */
@media (min-width: 1920px) {
    .left-xl-n27 {

        left: -20% !important;
    }
    
    .top-xl-0 {
        top: 0 !important;
    }
}

/* media print */
@media print {
    .noprint {
        display:none;
    }
}