:root {
    --white-color: #fff;
    --black-color: #000;
}

.fw-100 {font-weight: 100;}
.fw-200 {font-weight: 200;}
.fw-300 {font-weight: 300;}
.fw-400 {font-weight: 400;}
.fw-500 {font-weight: 500;}
.fw-600 {font-weight: 600;}
.fw-700 {font-weight: 700;}
.fw-800 {font-weight: 800;}
.fw-900 {font-weight: 900;}


.text-left {text-align: left;}
.text-center {text-align: center;}
.text-right {text-align: right;}
.text-justify {text-align: justify;}

.color-primary {color: var(--primary-color);}
.color-secondary {color: var(--secondary-color);}
.color-success {color: var(--success-color);}
.color-alert {color: var(--alert-color);}
.color-white {color: var(--white-color);}
.color-black {color: var(--black-color);}

.bg-primary {background-color: var(--primary-color);}
.bg-secondary {background-color: var(--secondary-color);}
.bg-success {background-color: var(--success-color);}
.bg-alert {background-color: var(--alert-color);}
.bg-white {background-color: var(--white-color);}
.bg-black {background-color: var(--black-color);}

.border-primary {border-color: var(--primary-color);}
.border-secondary {border-color: var(--secondary-color);}
.border-success {border-color: var(--success-color);}
.border-alert {border-color: var(--alert-color);}
.border-white {border-color: var(--white-color);}
.border-black {border-color: var(--black-color);}

.justify-start {justify-content: flex-start !important;}
.justify-center {justify-content: center !important;}
.justify-end {justify-content: flex-end !important;}
.justify-between {justify-content: space-between !important;}
.justify-around {justify-content: space-around !important;}

.align-start {align-items: flex-start !important;}
.align-center {align-items: center !important;}
.align-end {align-items: flex-end !important;}
.align-stretch {align-items: stretch !important;}
.align-baseline {align-items: baseline !important;}



/* Checkbox Switch */
.checkbox-switch {position:relative;display: block;width: 60px;height: 28px;}
.checkbox-switch input {opacity: 0;width: 0;height: 0;}
.checkbox-switch .switch-slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #ccc;-webkit-transition: .4s;transition: .4s;border-radius:30px}
.checkbox-switch .switch-slider:before {position: absolute;content: "";height: 20px;width: 20px;left: 4px;bottom: 4px;background-color: white;-webkit-transition: .4s;transition: .4s;border-radius:100%}
.checkbox-switch input:checked + .switch-slider {background-color: #2196F3;}
.checkbox-switch input:focus + .switch-slider {box-shadow: 0 0 1px #2196F3;}
.checkbox-switch input:checked + .switch-slider:before {-webkit-transform: translateX(30px);-ms-transform: translateX(30px);transform: translateX(30px);}



.ms-tabs {display: flex;flex-flow: row wrap;}
.ms-tabs .tab-nav {display: flex;width: 100%;}
.ms-tabs .tab-nav.nav-vertical {flex-flow: column;width: 200px;}
.ms-tabs .tab-nav a {text-decoration: none;padding: 10px 30px 10px 20px;display: block;border-bottom: 1px solid #ddd;font-weight:bold;color:#666;}
.ms-tabs .tab-nav a.active{color: #000;background: #fff;}

.ms-tabs .tab-contents {width: 100%;}
.ms-tabs .nav-vertical+.tab-contents {flex: 1;border-left: 1px solid #c6c6c6;padding: 20px;background-color: #fff;}
.ms-tabs .tab-content{display: none;}
.ms-tabs .tab-content.active{display: block;}

.ms-row {display:flex;flex-flow: row wrap;}
.ms-row .col {margin: 0;padding: 0 15px 30px;position: relative;width: 100%;box-sizing: border-box;}
.sm-1 {flex-basis: 8.3333%;max-width: 8.3333%;}
.sm-2 {flex-basis: 16.6667%;max-width: 16.6667%;}
.sm-3 {flex-basis: 25%;max-width: 25%;}
.sm-4 {flex-basis: 33.3333%;max-width: 33.3333%;}
.sm-5 {flex-basis: 41.6667%;max-width: 41.6667%;}
.sm-6 {flex-basis: 50%;max-width: 50%;}
.sm-7 {flex-basis: 58.3333%;max-width: 58.3333%;}
.sm-8 {flex-basis: 66.6667%;max-width: 66.6667%;}
.sm-9 {flex-basis: 75%;max-width: 75%;}
.sm-10 {flex-basis: 83.3333%;max-width: 83.3333%;}
.sm-11 {flex-basis: 91.6667%;max-width: 91.6667%;}
.sm-12 {flex-basis: 100%;max-width: 100%;}
@media (min-width: 550px) {
    .md-1 {flex-basis: 8.3333%;max-width: 8.3333%;}
    .md-2 {flex-basis: 16.6667%;max-width: 16.6667%;}
    .md-3 {flex-basis: 25%;max-width: 25%;}
    .md-4 {flex-basis: 33.3333%;max-width: 33.3333%;}
    .md-5 {flex-basis: 41.6667%;max-width: 41.6667%;}
    .md-6 {flex-basis: 50%;max-width: 50%;}
    .md-7 {flex-basis: 58.3333%;max-width: 58.3333%;}
    .md-8 {flex-basis: 66.6667%;max-width: 66.6667%;}
    .md-9 {flex-basis: 75%;max-width: 75%;}
    .md-10 {flex-basis: 83.3333%;max-width: 83.3333%;}
    .md-11 {flex-basis: 91.6667%;max-width: 91.6667%;}
    .md-12 {flex-basis: 100%;max-width: 100%;}
}
@media (min-width: 850px) {
    .lg-1 {flex-basis: 8.3333%;max-width: 8.3333%;}
    .lg-2 {flex-basis: 16.6667%;max-width: 16.6667%;}
    .lg-3 {flex-basis: 25%;max-width: 25%;}
    .lg-4 {flex-basis: 33.3333%;max-width: 33.3333%;}
    .lg-5 {flex-basis: 41.6667%;max-width: 41.6667%;}
    .lg-6 {flex-basis: 50%;max-width: 50%;}
    .lg-7 {flex-basis: 58.3333%;max-width: 58.3333%;}
    .lg-8 {flex-basis: 66.6667%;max-width: 66.6667%;}
    .lg-9 {flex-basis: 75%;max-width: 75%;}
    .lg-10 {flex-basis: 83.3333%;max-width: 83.3333%;}
    .lg-11 {flex-basis: 91.6667%;max-width: 91.6667%;}
    .lg-12 {flex-basis: 100%;max-width: 100%;}
}