.pena-btn-core {
    width: 80px
}

.pena-btn-info {
    width: 50px;
    text-align: center
}

.pena-btn-table {
    width: 60px;
}

.pena-mr-4 {
    margin-right: 4px;
}

.input-number {
    text-align: right
}

label.pena-label {
    font-weight: 500 !important;
}

#pena-data-table_wrapper, #pena-data-table_wrapper .btn-group button {
    font-size: 11px;
}

.pena-content-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

th.pena-border-right {
    border-right-width: 1px !important;
}

.pena-valign-middle {
    vertical-align: middle !important;
}

#pena-add-button {
    z-index: 9998;
    position: relative;
}

#pena-add-button #pena-add-circle {
    position: fixed;
    bottom: 50px;
    right: 50px;
    cursor: pointer;
    box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.2), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    transform: scale(1);
}

.pena-img-upload {
    display: none;
}

.pena-img-box {
    width: 125px !important;
    height: 125px !important;
    object-fit: cover;
}
    
.img-cursor {
    cursor: pointer;
}

.pena-img-container {
  position: relative;
  width: 100%;
  max-width: 130px;
}

.pena-img-container img {
  width: 100%;
  height: auto;
}

.pena-img-container .pena-btn-o-remove {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(15%, 50%);
  -ms-transform: translate(15%, 50%);
  padding: 6px 10px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
  border-radius: 50%;
  background: rgba(173, 32, 32, 0.3);
}

.pena-img-container .pena-btn-o-remove:hover {
  background: rgba(173, 32, 32, 0.6);
}

.pena-img-container .pena-btn-o-view {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-120%, 50%);
  -ms-transform: translate(-120%, 50%);
  padding: 6px 10px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
  border-radius: 50%;
  background: rgba(67, 44, 194, 0.3);
}

.pena-img-container .pena-btn-o-view:hover {
  background: rgba(67, 44, 194, 0.6);
}

.pena-img-blank {
    border:1px dashed rgb(141, 125, 228);
    width: 120px;
    height: 120px;
    border-radius: 2px;
}

.pena-img-blank:hover {
    background-color: rgb(141, 125, 228, 0.05);
}

.pena-img-container .pena-btn-o-add {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, 240%);
  padding: 6px 10px;
  border: 1px solid rgb(141, 125, 228);
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
  border-radius: 50%;
}

.pena-btn-o-add i {
    color:rgb(141, 125, 228);
}

.pena-icon-white {
    color: white;
}

@font-face {
	font-family: 'ufontscombodonimtblack1';
	src: url('./ufontscombodonimtblack1.eot');
	src: local('ufontscombodonimtblack1'), url('./ufontscombodonimtblack1.woff') format('woff'), url('./ufontscombodonimtblack1.ttf') format('truetype');
}

@font-face {
	font-family: 'OpenSans-Regular';
	src: local('OpenSans-Regular'), url('./OpenSans-Regular.ttf') format('truetype');
}

/* use this class to attach this font to any element i.e. <p class="fontsforweb_fontid_19037">Text with this font applied</p> */
.fontsforweb_fontid_19037 {
	font-family: 'ufontscombodonimtblack1' !important;
}

/* Font downloaded from FontsForWeb.com */

.fixed-header tr th {
    background: white;
    position: sticky;
    top: 0; /* Don't forget this, required for the stickiness */
}

#overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 999999;
    cursor: pointer;
}

.spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    height:60px;
    width:60px;
    margin:0px auto;
    -webkit-animation: rotation .6s infinite linear;
    -moz-animation: rotation .6s infinite linear;
    -o-animation: rotation .6s infinite linear;
    animation: rotation .6s infinite linear;
    border-left:6px solid rgba(0,174,239,.15);
    border-right:6px solid rgba(0,174,239,.15);
    border-bottom:6px solid rgba(0,174,239,.15);
    border-top:6px solid rgba(0,174,239,.8);
    border-radius:100%;
 }
 
 @-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(359deg);}
 }
 @-moz-keyframes rotation {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(359deg);}
 }
 @-o-keyframes rotation {
    from {-o-transform: rotate(0deg);}
    to {-o-transform: rotate(359deg);}
 }
 @keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(359deg);}
 }

th.pena-sort {
    cursor: pointer;
}

/* rewrite pagination style */
.pagination li a {
    min-width: 0 !important;
    font-size: 0.8rem;
}