/*      buttons
/*----------------------------------------*/
.btn {
    font-size: 15px;
    border: none;
    border-radius: 3px;
    padding: 10px 20px;
    transition: 200ms ease-in-out;
}

.btn-default,
.btn-default.focus,
.btn-default:focus,
.btn-default.active,
.btn-default:active,
.btn-default:active:hover,
.btn-default.active:hover,
.btn-default:active:focus,
.btn-default.active:focus,
.btn-default:active.focus,
.btn-default.active.focus,
.btn-default.disabled:hover,
.btn-default.disabled.focus,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
.btn-default[disabled]:hover,
.btn-default[disabled].focus,
.btn-default[disabled].active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:focus,
fieldset[disabled] .btn-default.focus,
fieldset[disabled] .btn-default:hover,
.open > .dropdown-toggle.btn-default,
.open >.dropdown-toggle.btn-default:focus,
.open > .dropdown-toggle.btn-default.focus,
.open > .dropdown-toggle.btn-default:hover {
    background: #f1f1f1;
    outline: 0;
    border-color: #dddddd;
}

.btn-default:hover {
    border-color: #dddddd;
    background: #e7e7e7;
}

.btn-primary,
.btn-primary.focus,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:active:hover,
.btn-primary.active:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.btn-primary.disabled:hover,
.btn-primary.disabled.focus,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
.btn-primary[disabled]:hover,
.btn-primary[disabled].focus,
.btn-primary[disabled].active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:focus,
fieldset[disabled] .btn-primary.focus,
fieldset[disabled] .btn-primary:hover,
.open > .dropdown-toggle.btn-primary,
.open >.dropdown-toggle.btn-primary:focus,
.open > .dropdown-toggle.btn-primary.focus,
.open > .dropdown-toggle.btn-primary:hover {
    background: #0068e1;
    outline: 0;
}

.btn-primary:hover {
    background: #0059bd;
}

.btn-danger,
.btn-danger.focus,
.btn-danger:focus,
.btn-danger.active,
.btn-danger:active,
.btn-danger:active:hover,
.btn-danger.active:hover,
.btn-danger:active:focus,
.btn-danger.active:focus,
.btn-danger:active.focus,
.btn-danger.active.focus,
.btn-danger.disabled:hover,
.btn-danger.disabled.focus,
.btn-danger.disabled:focus,
.btn-danger[disabled]:focus,
.btn-danger[disabled]:hover,
.btn-danger[disabled].focus,
.btn-danger[disabled].active,
.btn-danger[disabled]:active,
fieldset[disabled] .btn-danger:focus,
fieldset[disabled] .btn-danger.focus,
fieldset[disabled] .btn-danger:hover,
.open > .dropdown-toggle.btn-danger,
.open >.dropdown-toggle.btn-danger:focus,
.open > .dropdown-toggle.btn-danger.focus,
.open > .dropdown-toggle.btn-danger:hover {
    background: #fc4b4b;
}

.btn-danger:hover {
    background: #ff7070;
}

.btn-info,
.btn-info.focus,
.btn-info:focus,
.btn-info.active,
.btn-info:active,
.btn-info:active:hover,
.btn-info.active:hover,
.btn-info:active:focus,
.btn-info.active:focus,
.btn-info:active.focus,
.btn-info.active.focus,
.btn-info.disabled:hover,
.btn-info.disabled.focus,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
.btn-info[disabled]:hover,
.btn-info[disabled].focus,
.btn-info[disabled].active,
.btn-info[disabled]:active,
fieldset[disabled] .btn-info:focus,
fieldset[disabled] .btn-info.focus,
fieldset[disabled] .btn-info:hover,
.open > .dropdown-toggle.btn-info,
.open >.dropdown-toggle.btn-info:focus,
.open > .dropdown-toggle.btn-info.focus,
.open > .dropdown-toggle.btn-info:hover {
    background: #4bcffc;
}

.btn-info:hover {
    background: #6fcffd;
}

.btn:focus,
.btn:hover:focus,
.btn:active:focus {
    outline: 0;
    box-shadow: none;
}

.btn-loading {
    position: relative;
    color: transparent !important;
}

.btn-loading:after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 16px;
    width: 16px;
    border: 2px solid #ffffff;
    border-radius: 100%;
    border-right-color: transparent;
    border-top-color: transparent;
    animation: spinAround 600ms infinite linear;
}

.btn-loading.btn-default:after {
    border: 2px solid #0068e1;
    border-right-color: transparent;
    border-top-color: transparent;
}

@keyframes spinAround {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

/*      bg color
/*----------------------------------------*/
.bg-black {
    background: #494f5a;
}

.bg-red {
    background: #fc4b4b;
}

.bg-green {
    background: #37bc9b;
}

.bg-blue {
    background: #0068e1;
}

/*      text
/*----------------------------------------*/
.text-black {
    color: #494f5a;
}

.text-red,
.text-red:hover,
.text-red:focus {
    color: #fc4b4b;
}

.text-green {
    color: #37bc9b;
}

.text-blue {
    color: #0068e1;
}

/*      label
/*----------------------------------------*/
.label {
    font-weight: normal;
    padding: 5px 10px;
}

.label-default {
  background: #d2d6de;
}

.label-primary {
    background: #0068e1;
}

.label-success {
    background: #37bc9b;
}

.label-danger {
    background: #fc4b4b;
}

/*      Form error
/*----------------------------------------*/
.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline,
.has-error.radio label,
.has-error.checkbox label,
.has-error.radio-inline label,
.has-error.checkbox-inline label {
    color: #ff3366;
}

.has-error .form-control {
    border-color: #ff3366;
    box-shadow: none;
}

.has-error .form-control:focus {
    border-color: #ff3366;
    box-shadow: none;
}

.has-error .input-group-addon {
    color: #ff3366;
    background-color: #f2dede;
    border-color: #ff3366;
}

.has-error .form-control-feedback {
    color: #ff3366;
}

.help-block {
    margin-bottom: 0;
}

.checkbox label {
    font-size: 15px;
    color: #333333;
    margin-bottom: 0 !important;
}

.checkbox [type="checkbox"]:checked, .checkbox [type="checkbox"]:not(:checked) {
    position: absolute;
    display: none;
}

.checkbox [type="checkbox"]:checked + label, .checkbox [type="checkbox"]:not(:checked) + label {
    font-family: "Roboto", sans-serif;
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    display: inline-block;
    text-align: left;
}

.checkbox [type="checkbox"]:checked + label:before, .checkbox [type="checkbox"]:not(:checked) + label:before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 17px;
    height: 17px;
    border-radius: 3px;
    background: #e9e9e9;
    -webkit-transition: 200ms ease-in-out;
    -o-transition: 200ms ease-in-out;
    -moz-transition: 200ms ease-in-out;
    transition: 200ms ease-in-out;
}

.checkbox [type="checkbox"]:checked + label:after, .checkbox [type="checkbox"]:not(:checked) + label:after {
    content: "\f00c";
    font-family: FontAwesome;
    font-size: 13px;
    position: absolute;
    top: 1px;
    left: 2px;
    color: #ffffff;
    -webkit-text-stroke: 1px #0068e1;
    -webkit-transition: 200ms ease-in-out;
    -o-transition: 200ms ease-in-out;
    -moz-transition: 200ms ease-in-out;
    transition: 200ms ease-in-out;
}

.checkbox [type="checkbox"]:checked + label:before {
    background: #0068e1;
}

.checkbox [type="checkbox"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
       -moz-transform: scale(0);
         -o-transform: scale(0);
            transform: scale(0);
}

.checkbox [type="checkbox"]:checked + label:after {
    -webkit-text-stroke: 1px #0068e1;
    opacity: 1;
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
}

/* radio button */
.radio {
    text-align: left;
}

.radio label {
    color: #333333;
}

.radio [type="radio"]:checked, .radio [type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}

.radio [type="radio"]:checked + label, .radio [type="radio"]:not(:checked) + label {
    font-family: "Roboto", sans-serif;
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 22px;
    display: inline-block;
}

.radio [type="radio"]:checked + label:before, .radio [type="radio"]:not(:checked) + label:before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 19px;
    height: 19px;
    border: 1px solid #d2d6de;
    border-radius: 100%;
    background: #ffffff;
}

.radio [type="radio"]:checked + label:after {
    content: "";
    width: 13px;
    height: 13px;
    background: #0068e1;
    position: absolute;
    top: 4px;
    left: 3px;
    border-radius: 100%;
    -webkit-transition: 200ms ease-in-out;
    -o-transition: 200ms ease-in-out;
    -moz-transition: 200ms ease-in-out;
    transition: 200ms ease-in-out;
}

.radio [type="radio"]:not(:checked) + label:after {
    content: "";
    width: 14px;
    height: 14px;
    background: #0068e1;
    position: absolute;
    top: 3px;
    left: 3px;
    border-radius: 100%;
    -webkit-transition: 200ms ease-in-out;
    -o-transition: 200ms ease-in-out;
    -moz-transition: 200ms ease-in-out;
    transition: 200ms ease-in-out;
    opacity: 0;
    -webkit-transform: scale(0);
       -moz-transform: scale(0);
         -o-transform: scale(0);
            transform: scale(0);
}

.radio [type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
}

.radio + .radio, .checkbox + .checkbox {
    margin-top: 0;
}

/* select option */
.custom-select-white {
    appearance: none;
    background: #f9f9f9 url('../images/arrow-white.png') no-repeat right 8px center;
    background-size: 10px;
    line-height: normal !important;
    height: 40px;
    padding: 0 30px 0 10px;
    border-radius: 3px;
    border-color: #d9d9d9;
}

.custom-select-black {
    appearance: none;
    background: #ffffff url('../images/arrow-black.png') no-repeat right 8px center;
    background-size: 10px;
    line-height: normal !important;
    height: 40px;
    padding: 0 30px 0 10px;
    border-radius: 3px;
    border-color: #d9d9d9;
}

.custom-select-white:focus,
.custom-select-black:focus {
    outline: 0;
}
