/** LOADER *********************************************************************************/

.cleon-overlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.cleon-loading{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 10px solid #ddd;
  border-top-color: #566DE2;
  animation: loading 1s linear infinite;  
  left: 50%;
  position: relative;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
}

@keyframes loading {
  to {
    transform: rotate(360deg);
  }
}

/** FORMS *********************************************************************************/

.cleon-radios > label{
  display: inline-block;
  background: red;
  border: 2px groove grey;
  padding: 1em;
}

.cleon-radios > [type="radio"]{
  display: none;
}

.cleon-radios > input[type="radio"]:checked+label{ 
  background: yellow;
} 

label.required::after{
  color: red;
  content: '*'
}

.outline-warning {
  outline: 2px solid #fd7277 !important;
}

.form-inline label {
  margin-top: 10px;
}

.input-group-addon{
  background: #e5e5e5 !important;
}

.cleon-form label{
  margin-top: 1rem;
  width: 100%;
}

.cleon-form input:not([type="checkbox"]){
  width: 100%;
}

/** DROPZONE ***********************************************************************/

.cleon-dropzone{
  display: inline-block;
  width: 25rem;
  height: 25rem;
  outline: 2px dashed grey;
  line-height: 25rem;
  text-align: center;
}

.cleon-dropzone:hover{
  outline-width: 4px;
  font-weight: 600;
}

.cleon-dropzone > span{
  pointer-events: none;
}

/** CHIPS ********************************************************************/

.cleon-chip {
  display: inline-block;
  padding: 0 25px;
  height: 35px;
  font-size: 14px;
  line-height: 35px;
  border-radius: 25px;
  background-color: #f1f1f1;
  max-width: 100%;
}

.cleon-chip > .closebtn {
  padding-left: 10px;
  color: #888;
  font-weight: bold;
  float: right;
  font-size: 20px;
  cursor: pointer;
}

.cleon-chip > .cleon-chip-text{
  max-width: 95%;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
}

.cleon-chip > .closebtn:hover {
  color: #000;
}

/** DATATABLES ***************************************************/

.dataTables_wrapper .top > .dt-buttons{
  margin-top: 10px;
  margin-left: 5px;
}

/** GENERAL ************************************************************************/

.width100{
  width: 100px;
}

.no-margin-top{
  margin-top: 0px !important;
}

.no-pointer-events{
  pointer-events: none;
}


input.no-pointer-events, .no-pointer-events .btn-default{
  background: #e1e1e1 !important;
}

.align-right{
  text-align: right;
}

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

.page-title {
  border-bottom: 2px solid #566de2ff;
  padding: 8px;
  margin-bottom: 20px;
}

.modal-title{
  color: #fff;
}

.bg-light, .bg-light th{
  background: rgba(86, 109, 226, .2) !important;
}

.text-black{
  color: #000 !important;
}

.btn-info i.fa::before{
  color: #fff !important;
}

/** COLORS ************************************************************************/

.cleon-bg-1{background-color: #0275d8!important;color: white;}
.cleon-bg-2{background-color: #5cb85c!important;color: white;}
.cleon-bg-3{background-color: #705cb8!important;color: white;}
.cleon-bg-4{background-color: #da7b0e!important;}
.cleon-bg-5{background-color: #e03b44!important;color: white}
.cleon-bg-6{background-color: #0d3a4a!important;color: white}

.cleon-text-1{color: #5cb85c!important;}
.cleon-text-2{color: #5cb85c!important;}
.cleon-text-3{color: #5cb85c!important;}
.cleon-text-4{color: #5cb85c!important;}
.cleon-text-5{color: #5cb85c!important;}