/*
    Stylesheet for helper classes and rules
*/

/* BUTTONS style definitions */
.btn, .btn:focus, .btn.focus, .btn:active, .btn.active {
    border: none;
    transition: background-color 0.2s ease-in;
    background-image: none;
}
.btn:hover {
    transition: background-color 0.2s ease-in;
}

.btn-primary,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active {
    background-color: #674584;
    background-image: none;
    border-radius: 10px;
}
.btn-primary:hover {
    background-color: #3f1960;
}
.btn-primary.btn-v-gradient,
.btn-primary.btn-v-gradient:focus,
.btn-primary.btn-v-gradient.focus,
.btn-primary.btn-v-gradient:active,
.btn-primary.btn-v-gradient.active {
	background-image: linear-gradient(#674584 0%, #a54324  51%, #674584  100%);
	background-size: auto 200%;
	font-weight: bold;
        transition: all 0.3s ease;
}
.btn-primary.btn-v-gradient:hover {
	background-position: center bottom;
        transition: all 0.3s ease;
}
.btn-primary.btn-h-gradient,
.btn-primary.btn-h-gradient:focus,
.btn-primary.btn-h-gradient.focus,
.btn-primary.btn-h-gradient:active,
.btn-primary.btn-h-gradient.active {
	background-image: linear-gradient(to right, #674584 0%, #a54324  51%, #674584  100%);
	background-size: 200% auto;
	font-weight: bold;
        transition: all 0.3s ease;
}
.btn-primary.btn-h-gradient:hover {
	background-position: right center;
        transition: all 0.3s ease;
}

.btn-white,
.btn-white:focus,
.btn-white.focus,
.btn-white:active,
.btn-white.active {
    color: black;
    background-color: white;
    border-radius: 8px;
    font-weight: bold;
    font-size: 16px;
    padding: 15px 20px;
    transition: all 0.3s ease;   
}

.btn-danger,
.btn-danger:focus,
.btn-danger.focus,
.btn-dangerbtn-danger:active,
.btn-primary.active {
    
}

.btn-shadowed {
    box-shadow: 0px 5px 10px 0px rgba(91,76,123,0.3);
}

.btn-white.on-white {
    box-shadow: none;
}
.btn-white:hover {
    box-shadow: 0px 5px 10px 0px rgba(91,76,123,0.5);
}

.btn-white.on-white:hover {
    box-shadow: none;
    background-color: #eee;
    transition: all 0.3s ease;
}

a.btn,
a.btn:focus,
a.btn.focus,
a.btn:active,
a.btn.active {
    border-radius: 10px;
}
.btn-default,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active {
    border-radius: 10px;
    text-transform: uppercase;
}
.btn-border,
.btn-border:focus,
.btn-border.focus,
.btn-border:active,
.btn-border.active {
    border: 1px solid #fb717d;
    border-radius: 10px;
    color: #fb717d;
    background-color: transparent;
    text-transform: uppercase;
}

.btn-border:hover {
    color: white;
    border-color: #444;
    background: #444;
}

.btn-green {
    color: white;
    background: #5bb75b;
    text-transform: uppercase;
}

.btn.btn-xl {
    font-size: 24px;
    padding: 14px 40px;
}

.btn.btn-md {
    font-size: 20px;
    padding: 12px 36px;
}

.btn.btn-sm {
    font-size: 16px;
    padding: 10px 28px;
}

/* BOXES */
.sw .sw-box-size {
    background: white;
    padding: 10px 0px 10px 24px;
    border-radius: 10px;
}

.sw .sw-box {
    background: white;
    padding: 20px;
    border-radius: 10px;
}
.sw .sw-box-shadow {
    box-shadow: 0px 5px 10px 0px rgba(91,76,123,0.3);
}
.sw .sw-box-shadow-dark,
.sw .sw-box-shadow.sw-box-shadow-hover:hover {
    box-shadow: 0px 5px 10px 0px rgba(91,76,123,0.5);
}

.sw .sw-box .sw-box-title {
    font-size: 20px;
    text-transform: uppercase;
    color: black;
    background: linear-gradient(to right, #674584 0%, #a54324 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}

.sw .sw-box .sw-box-title-secondary {
    color:#9d9d9d;
}


.sw .sw-box .sw-box-title.overlay {
    position: absolute;
    top: -10px;

    line-height: 20px;
}

.sw .sw-box .sw-box-title.center {
    width: 100%;
    display: block;
    text-align: center;
}

/* INPUTS STYLES */
.radio,
.checkbox {
    margin-bottom: 20px;
    vertical-align: middle;
    min-height: 40px;
}
span.text-label {
    min-height: 40px;
    display: inline-block;
}
.radio label {
    position: relative;
    cursor: pointer;
    padding-left: 0px;
}
.radio label.radio-block {
    position: relative;
    cursor: pointer;
    padding-left: 10px;
}
.radio label input[type="radio"] {
    position: absolute;
    left: -9001px;
}
.radio .circ {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-block;
    top: 1px;
    position: relative;
    margin-right: 10px;
    background-color: #b6b6b6;
}
.radio .circ .dot {
    width: 8px;
    height: 8px;
    display: block;
    position: absolute;
    border-radius: 50%;
    left: 4px;
    top: 4px;
}
.radio label input[type="radio"]:checked ~ .circ {
    background-color: #009fe3;
}
.radio label input[type="radio"]:checked ~ .circ .dot {
    background-color: #fff;
}

/* Bootstrap dropdown menu */

.bootstrap-select .dropdown-menu li a {
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 300;
}

.bootstrap-select .dropdown-menu li a:hover {
    background-color: #ddd;
    background-image: none;
    color: black;
}

.bootstrap-select .dropdown-toggle:focus, .bootstrap-select .dropdown-toggle::-moz-focus-inner {
    outline: 0 !important;
}

.bootstrap-select .dropdown-menu {
    border-radius: 5px;
    border: none;
}

.dropdown-menu > .active > a {
  color: black;
  text-decoration: none;
  background-color: #eee;
  outline: 0;
}

/* DISPLAY HELPERS */
.p-t-0 {
   padding-top: 0px !important; 
}

.p-a-15 {
   padding: 15px; 
}
.p-a-20 {
   padding: 20px; 
}
.p-a-25 {
   padding: 25px; 
}
.p-a-35 {
   padding: 35px !important; 
}
.p-t-25 {
    padding-top: 25px;
}

.p-t-20 {
    padding-top: 20px;
}

.p-t-10 {
    padding-top: 10px;
}

.p-r-30 {
    padding-right: 30px;
}

.p-r-60 {
    padding-right: 60px !important;
}

.p-r-20 {
    padding-right: 20px;
}

.p-l-60 {
    padding-left: 60px !important;
}

.p-l-20 {
    padding-left: 20px;
}


.m-b-5 {
   margin-bottom: 5px; 
}

.m-b-10 {
   margin-bottom: 10px; 
}

.m-b-15 {
   margin-bottom: 15px; 
}

.m-b-20 {
   margin-bottom: 20px; 
}

.m-b-25 {
   margin-bottom: 25px; 
}

.m-b-30 {
   margin-bottom: 30px; 
}

.m-b-40 {
   margin-bottom: 40px; 
}

.m-b-50 {
   margin-bottom: 50px; 
}
.m-b-60 {
   margin-bottom: 60px; 
}

.m-b-80 {
   margin-bottom: 80px; 
}

.m-b-100 {
   margin-bottom: 100px; 
}

.m-t-0 {
   margin-top: 0px; 
}

.m-t-10 {
   margin-top: 10px; 
}

.m-t-15 {
   margin-top: 15px; 
}

.m-t-25 {
   margin-top: 25px; 
}

.m-t-20 {
   margin-top: 20px; 
}

.m-t-30 {
   margin-top: 30px; 
}

.m-r-10 {
   margin-right: 10px; 
}

.m-r-20 {
   margin-right: 20px; 
}

.t-xs {
    font-size: 10px;
}

.t-sm {
    font-size: 12px;
}

.t-md {
    font-size: 14px;
}

.t-lg {
    font-size: 16px;
    line-height: 160%;
}

.t-xl {
    font-size: 18px;
    line-height: 180%;
}

.t-3xl {
    font-size: 24px;
    line-height: 180%;
}

.t-light {
    font-weight: 300;
}

.t-bold {
    font-weight: bold;
}
/* FLEX HELPERS */
.flex-container {
    display: flex;
}
.flex {
    display:flex;
}
.flex-0 {
    flex: 0;
}
.flex-1 {
    flex: 1;
}
.flex-2 {
    flex: 2;
}

.flex-v-c {
    align-items: center;
}

.flex-h-c {
    justify-content: center;
}

.flex-h-r {
    justify-content: flex-end;
}

/* Box size helpers */
.full-w {
    width: 100%;
}

/* TEXTS */
.text-dark {
    color: #000;
}

.text-gray {
    color: #868686;
}

.text-dark-gray {
    color: #333;
}

.text-sub {
    font-size: 80%;
    
}

.font-light {
    font-weight: 300;
}

.lh-md {
    line-height: 140%;
}

.lh-l {
    line-height: 160%;
}

.btn-icon:hover {
    color: #333;
    cursor: pointer;
}

.text-sm {
    font-size: 12px;
}
.text-n {
    font-size: 14px;
}
.text-md {
    font-size: 16px;
}
.text-l {
    font-size: 18px;
}
.text-xl {
    font-size:20px;
}

/* ALERTS */
.alert {
  border-radius: 10px;
  font-size: 16px;
}
.alert:not(.on-white) {
  background: white;
  border: none;
}

/* FORMS */
.form-control.sw-form-control {
    height: 44px;
    font-size: 16px !important;
}

.control-label.sw-control-label {
    line-height: 44px;
    font-size: 16px !important;
}

/* Cursors */

.c-pointer {
    cursor: pointer;
}

/* dropdown menu */
.dropdown-menu.sw-dropdown {
    border: none;
    border-radius: 10px !important;
    min-width: 200px;
}

.sw-dropdown.dropdown-menu li a:hover {
  background-color: #ddd;
  background-image: none;
  color: black;
}

.sw-dropdown.dropdown-menu li a {
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 300;
}

/* Modal window override*/

.modal-header {
    border-bottom: none;
    padding: 20px;
    padding-top: 25px;
}
.modal-title {
    font-size: 18px;
    color: black;
    font-weight: bold;
}

.modal-title.colored {
    background: linear-gradient(to right, #674584 0%, #a54324 100%);
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.modal-content {
    font-size: 16px;
    color: black;
}

