/**
* COLOR
**/
:root{
  --mainColor: #4B6ED9;
  --mainColor_2: #204ccf;
  --mainColorDark: #2b59c1;
  --mainColorClear: #E9EEF8;
  --darkRed: #9c1111;
  --red: #ff0000;
  --clearRed: #ffdfd4;
  --darkGreen: #006400;
  --clearGreen: #d8e4d3;
  --darkOrange: #ff8c00;
  --clearOrange: #ffecd8;
}


/**
* BUTTON
**/
.buttonMainColor,.btn-primary{
  background: var(--mainColor);
  color: #fff;
  transition: 0.5s;
  cursor: pointer;
  border: 0px;
}

.buttonMainColor:hover,.btn-primary:hover{
  background: var(--mainColorDark);
  transition: 0.5s;
}

.buttonWhite,.btn-white{
  background: #fff;
  cursor: pointer;
  transition: 0.5s;
}

.buttonWhite:hover,.btn-white:hover{
  background: rgb(0,0,0,0.05);
  transition: 0.5s;
}

.btn-red{
  background: var(--clearRed);
  color: var(--red);
  cursor: pointer;
  border: 0px;
  transition: 0.5s;
}

.btn-red:hover{
}

.btn-orange{
  background: var(--clearOrange);
  color: var(--darkOrange);
  cursor: pointer;
  border: 0px;
  border-radius: 15px;
  transition: 0.5s;
  display: flex;
  align-items: center;
}

/**
* INPUT
**/
input{
  border: 1px solid #c6c6c6;
  border-radius: 5px;
  font-size: 14px;
  outline:none;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/**
* LOADER
**/
.loader {
    border: 4px solid #f3f3f3;
    border-radius: 50%;
    border-top: 4px solid var(--mainColor);
    width: 20px;
    height: 20px;
    z-index: 1;
    -webkit-animation: spin 1s linear infinite; /* Safari */
    animation: spin 1s linear infinite;
  }
  
  /* Safari */
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }