/*=== SS BUTTON ===*/
.ss-button, .ss-button.ss-button--primary
{
    padding: 6px 24px;
    text-decoration: none;
    border: 0px;
    display:inline-block;
    transition: background-color 0.2s ease-in-out;
    outline: 0;
    border: solid 1px transparent;
    text-align: center;
    font-weight: 500;
    border-radius: 3px;
    background-color: #00AEEF;
    color: #FFF;
    line-height: 1.8rem;
    font-size: 1rem;
}

/* Sizes */
.ss-button.ss-button--small
{
    padding: 0px 24px;
    font-size: 0.8rem;
    line-height: 1.8rem;
}

.ss-button.ss-button--large
{
    padding: 12px 32px;
    font-size: 1.2rem;
    line-height: 1.5rem;
}

/* Colors */
.ss-button:hover, .ss-button--primary:hover
{
    cursor: pointer;
    background-color: #0080ae;
}

.ss-button.ss-button--secondary
{
    background-color: transparent;
    color: #00AEEF;
    border: solid 1px #00AEEF;
}

.ss-button.ss-button--secondary:hover
{
    color: #0080ae;
    border: solid 1px #0080ae;
}

.ss-button.ss-button--red
{
    background-color: #FF6D4A;
    color: #FFF;
}

.ss-button.ss-button--red:hover
{
    background-color: #DA5131;
    color: #FFF;
}

.ss-button.ss-button--green
{
    background-color: #83D791;
    color: #FFF;
}

.ss-button.ss-button--green:hover
{
    background-color: #DEFAE3;
    color: #FFF;
}

.ss-button.ss-button--disabled, .ss-button[disabled]
{
    background-color: #D0D7DD;
    color: #828C94;
}

.ss-button.ss-button--disabled, .ss-button[disabled]:hover
{
    background-color: #D0D7DD;
    color: #828C94;
    cursor: not-allowed;
}

/*== SS TEXT INPUT ==*/
.ss-text-input
{
    position: relative;
    display: block;
    margin: 10px 0px;
}

.ss-text-input .top-label
{
    font-weight: 600;
    display: block;
    margin: 5px 0px;
    font-size: 0.87rem;
    color: #60646d;
    user-select: none;
}

.ss-text-input > input, .ss-text-input > textarea
{
    padding: 12px 8px;
    border-radius: 2px;
    width: 100%;
    border: solid 1px #D0D7DD;
    font-size: 14px;
    border-radius: 2px;
    outline: 0px;
}

.ss-text-input > .left-icon
{
    position: absolute;
    bottom: 14px;
    left: 10px;
    color: #60646d;
    font-size: 14px;
}

.ss-text-input > .right-icon
{
    position: absolute;
    bottom: 14px;
    right: 10px;
    color: #60646d;
    font-size: 14px;
}

.ss-text-input > .left-icon ~ input
{
    padding-left: 25px;
}

.ss-text-input > .right-icon ~ input
{
    padding-right: 25px;
}

/* Error State */
.ss-text-input.ss-text-input--error .top-label { color: #FF6D4A; }
.ss-text-input.ss-text-input--error input, .ss-text-input.ss-text-input--error textarea { outline: solid 1px #FF6D4A; }
.ss-text-input .error-message { display: none; }
.ss-text-input.ss-text-input--error .error-message
{
    display: block;
    color: #FF6D4A;
    font-size: 0.8rem;
}

/* Accepted State */
.ss-text-input.ss-text-input--accepted input, .ss-text-input.ss-text-input--accepted textarea {
    outline: solid 1px #83D791;
}

/* Disabled State */
.ss-text-input.ss-text-input--disabled .top-label { color: #D0D7DD; }
.ss-text-input.ss-text-input--disabled input, .ss-text-input.ss-text-input--disabled input:focus, .ss-text-input.ss-text-input--disabled textarea, .ss-text-input.ss-text-input--disabled textarea:focus
{
    color: #D0D7DD;
    cursor: not-allowed;
}

/*== SS DROPDOWN TEXT ==*/
.ss-dropdown-input
{
    display: block;
    margin: 10px 0px;
}

.ss-dropdown-input .top-label
{
    font-weight: 600;
    display: block;
    margin: 5px 0px;
    font-size: 0.87rem;
    color: #60646d;
    user-select: none;
}

.ss-dropdown-input .wrapper
{
    position: relative;
    border: 1px solid #D0D7DD;
    padding-right: 10px;
    background-color: #fff;
}

.ss-dropdown-input .wrapper > select, .ss-dropdown-input .wrapper > select:active
{
    -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

    border: 0;
    border-radius: 0px;
    padding: 12px 24px 12px 8px;
    background: #fff;
    font-weight: 400;
    font-size: 14px;
    outline: 0px;
}

.ss-dropdown-input .wrapper:after
{
    position: absolute;
    top: 8px;
    right: 10px;
    font-family: 'FontAwesome';
    content: '\f0d7';
    color: #00AEEF;
}

/* Error State */
.ss-dropdown-input.ss-dropdown-input--error .top-label { color: #FF6D4A; }
.ss-dropdown-input.ss-dropdown-input--error .wrapper { outline: solid 1px #FF6D4A; }
.ss-dropdown-input .error-message { display: none; }
.ss-dropdown-input.ss-dropdown-input--error .error-message
{
    display: block;
    color: #FF6D4A;
    font-size: 0.8rem;
}

/* Accepted State */
.ss-dropdown-input.ss-dropdown-input--accepted .wrapper { outline: solid 1px #83D791; }

/* Disabled State */
.ss-dropdown-input.ss-dropdown-input--disabled .top-label, .ss-dropdown-input.ss-dropdown-input--disabled select { color: #D0D7DD; }
.ss-dropdown-input.ss-dropdown-input--disabled .wrapper
{
    border: solid 1px #D0D7DD;
    color: #D0D7DD;
    outline: solid 1px #D0D7DD;
    cursor: not-allowed;
}

.ss-dropdown-input.ss-dropdown-input--disabled select, .ss-dropdown-input.ss-dropdown-input--disabled select:focus { outline: solid 1px #D0D7DD; }
.ss-dropdown-input.ss-dropdown-input--disabled .wrapper:after { content: ''; }

/* Dark */
.ss-dropdown-input.ss-dropdown-input--dark .wrapper > select { background: #e7ecee; }

/*== SS DROPDOWN MENU ==*/
.ss-dropdown-menu
{
    display: block;
    position: relative;
    text-align: left;
}

.ss-dropdown-menu .top-label
{
    font-weight: 600;
    display: block;
    margin: 5px 0px;
    font-size: 0.875rem;
    color: #60646b;
    user-select: none;
}

.ss-dropdown-menu .title
{
    background-color: #fff;
    border: 1px solid #e7ecee;
    padding: 9px;
    font-weight: 600;
    font-size: 14px;
    position: relative;
}

.ss-dropdown-menu .title:hover { cursor: pointer; }
.ss-dropdown-menu .title:after
{
    position: absolute;
    top: 10px;
    right: 10px;
    font-family: 'FontAwesome';
    content: '\f0d7';
}

.ss-dropdown-menu .menu
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    position: absolute;
    top: 40px;
    left: 0px;
    right: 0px;
    background-color: #fff;
    z-index: 999;
    border: 1px solid #e7ecee;
}

.ss-dropdown-menu .menu li { padding: 10px; }
.ss-dropdown-menu .menu li:hover
{
    cursor:pointer;
    background-color: #f8f8f8;
}

.ss-dropdown-menu .error-message { display: none; }

/* Dark */
.ss-dropdown-menu.ss-dropdown-menu--dark .title { background-color: #e7ecee; }

/* Error State */
.ss-dropdown-menu.ss-dropdown-menu--error .top-label { color: #FF6D4A; }
.ss-dropdown-menu.ss-dropdown-menu--error .title { outline: solid 1px #FF6D4A; }
.ss-dropdown-menu.ss-dropdown-menu--error .error-message
{
    display: block;
    color: #FF6D4A;
    font-size: 0.8rem;
}

/* Accepted State */
.ss-dropdown-menu.ss-dropdown-menu--accepted .title { outline: solid 1px #83D791; }

/* Disabled State */
.ss-dropdown-menu.ss-dropdown-menu--disabled .top-label, .ss-dropdown-menu.ss-dropdown-menu--disabled select { color: #D0D7DD; }
.ss-dropdown-menu.ss-dropdown-menu--disabled .title
{
    border: solid 1px #D0D7DD;
    color: #D0D7DD;
    outline: solid 1px #D0D7DD;
    cursor: not-allowed;
}

.ss-dropdown-menu.ss-dropdown-menu--disabled select, .ss-dropdown-menu.ss-dropdown-menu--disabled select:focus { outline: solid 1px #D0D7DD; }
.ss-dropdown-menu.ss-dropdown-menu--disabled .title:after { content: ''; }


/*=== SS SWITCH ===*/

.ss-switch
{
    position: relative;
    display: inline-block;
    top: 2px;
    width: 68px;
    height: 30px;
}

.ss-switch input { display:none; }
.ss-switch .slider
{
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #828C94;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 30px;
}

.ss-switch .slider:before
{
    position: absolute;
    content: '';
    height: 26px;
    width: 26px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}

.ss-switch .slider:after
{
    position: absolute;
    top: 6px;
    right: 12px;
    font-weight: 400;
    font-size: 12px;
    color: #fff;
    content: 'OFF';
}

.ss-switch input:checked + .slider { background-color: #83D791; }
.ss-switch input:focus + .slider { box-shadow: 0 0 1px #83D791; }

.ss-switch input:checked + .slider:before
{
    -webkit-transform: translateX(38px);
    -ms-transform: translateX(38px);
    transform: translateX(38px);
}

.ss-switch input:checked + .slider:after
{
    left: 12px;
    right: auto;
    content: 'ON';
}

/*=== SS Radio Button ===*/
.ss-radio
{
    display:inline-block;
    font-weight: 600;
    font-size: 0.8rem;
}

.ss-radio > input
{
    display:none;
}

.ss-radio > input + .display
{
    width: 22px;
    height: 22px;
    border-radius: 12px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -2px;
    border: 2px solid #D0D7DD;
    background-color: #FFF;
}

.ss-radio > input + .display:after
{
    position: absolute;
    top: 5px;
    left: 5px;
    border-radius: 4px;
    width: 8px;
    height: 8px;
    content: '';
    background-color: #D0D7DD;
}

.ss-radio.ss-radio--multiline .display
{
    vertical-align: top;
    margin-top: 5px;
}

/* Error State */
.ss-radio.ss-radio--error { color: #FF6D4A; }
.ss-radio.ss-radio--error > input + .display { border: 2px solid #FF6D4A; }
.ss-radio.ss-radio--error > input + .display:after { background-color: #FF6D4A; }

/* Accepted State */
.ss-radio.ss-radio--accepted { color: #83D791; }
.ss-radio.ss-radio--accepted > input + .display { border: 2px solid #83D791; }
.ss-radio.ss-radio--accepted > input + .display:after { background-color: #83D791; }

/* Disabled State */
.ss-radio.ss-radio--disabled { color: #D0D7DD; }
.ss-radio.ss-radio--disabled > input + .display { border: 2px solid #D0D7DD; }
.ss-radio.ss-radio--disabled > input + .display:after { background-color: #D0D7DD; }

/* Checked State */
.ss-radio > input:checked + .display { border: 2px solid #00AEEF; }
.ss-radio > input:checked + .display:after { background-color: #00AEEF; }


/*=== SS Checkbox ===*/
.ss-checkbox
{
    display:inline-block;
    font-weight: 600;
    font-size: 0.8rem;
    outline: 0px;
}

.ss-checkbox .top-label
{
    font-weight: 600;
    display: block;
    margin: 5px 0px;
    font-size: 0.87rem;
    color: #60646d;
    user-select: none;
}

.ss-checkbox > input
{
    display:none;
}

.ss-checkbox > input + .display
{
    width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -2px;
    border: 2px solid #D0D7DD;
    background-color: #FFF;
}

/* Error State */
.ss-checkbox.ss-checkbox--error { color: #FF6D4A; }
.ss-checkbox.ss-checkbox--error > input + .display { border: 2px solid #FF6D4A; }

/* Disabled State */
.ss-checkbox.ss-checkbox--disabled { color: #D0D7DD; }
.ss-checkbox.ss-checkbox--disabled > input + .display { border: 2px solid #D0D7DD; }

/* Checked */
.ss-checkbox > input:checked + .display { border: 2px solid #00AEEF; }
.ss-checkbox > input:checked + .display:after
{
    position: absolute;
    top: 4px;
    left: 3px;
    font-family: 'FontAwesome';
    content: '\f00c';
    color: #00AEEF;
    line-height: 12px;
}

/* Accepted State */
.ss-checkbox.ss-checkbox--accepted { color: #83D791; }
.ss-checkbox.ss-checkbox--accepted > input + .display { border: 2px solid #83D791; }
.ss-checkbox.ss-checkbox--accepted > input:checked + .display:after { color: #83D791; }


/*== Horizontal Tabs ==*/
.ss-horizontal-tabs
{
    padding: 0;
    margin: 0;
    width: 100%;
    border-bottom: solid 1px #e7ecee;
    display: block;
}

.ss-horizontal-tabs li
{
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: inline-block;
    border-bottom: 3px solid transparent;
    text-align: center;
    padding: 8px 30px;
    border: 0;
    color: #90949b;
    font-size: 14px;
}

.ss-horizontal-tabs li:hover
{
    cursor: pointer;
}

.ss-horizontal-tabs li.selected
{
    color: #14202d;
    border-bottom: 3px solid #00a6e1;
    font-weight: 600;
}

/*=== SS RADIO TOGGLE ===*/
.ss-radio-toggle .toggle
{
    font-weight: 600;
    font-size: 0.8rem;
    color: #00AEEF;
    border: solid 1px #00AEEF;
    border-radius: 4px;
    display: inline-block;
    background-color: #00AEEF;
}

.ss-radio-toggle input { display: none; }
.ss-radio-toggle label:first-child input:checked + span { border-radius: 4px 0px 0px 4px; }
.ss-radio-toggle label:last-child input:checked + span { border-radius: 0px 4px 4px 0px; }

.ss-radio-toggle input + span
{
    background-color: #00AEEF;
    color: #FFF;
    display: inline-block;
    padding: 2px 12px;
}

.ss-radio-toggle input:checked + span
{
    background-color: #FFF;
    color: #00AEEF;
}

.ss-radio-toggle .error-message
{
    display: hidden;
}

/* Error State */
.ss-radio-toggle.ss-radio-toggle--error .toggle {
    background-color: #FF6D4A;
    color: #FF6D4A;
    border: solid 1px #FF6D4A;
}

.ss-radio-toggle.ss-radio-toggle--error input + span
{
    background-color: #FF6D4A;
}

.ss-radio-toggle.ss-radio-toggle--error input:checked + span
{
    background-color: #FFF;
    color: #FF6D4A;
}

.ss-radio-toggle.ss-radio-toggle--error .error-message
{
    display: block;
    color: #FF6D4A;
    font-size: 0.8rem;
}

/*=== SS TOOLTIP ===*/
.ss-tooltip
{
    position: relative;
    display: inline-block;
}

.ss-tooltip .tooltip-content
{
    position: absolute;
    top: -20px;
    left: 20px;
    right: auto;
    background-color: #828C94;
    color: #FFF;
    display: none;
    font-size: 0.7rem;
    font-weight: 600;
    min-width: 150px;
    padding: 6px;
    line-height: 1rem;
    z-index: 10000;
}

.ss-tooltip .trigger:hover + .tooltip-content { display:block; }
.ss-tooltip.ss-tooltip--left .tooltip-content
{
    left: auto;
    right: 16px;
}

.ss-tooltip.ss-tooltip--right .tooltip-content
{
    left: 16px;
    right: auto;
}

/*== SS PLAIN INPUT ==*/
.ss-plain-input
{
    vertical-align: top;
    margin: 10px 0px;
}

.ss-plain-input .top-label
{
    font-weight: 600;
    display: block;
    margin: 5px 0px;
    font-size: 0.87rem;
    color: #60646d;
    user-select: none;
}

/* Error State */
.ss-plain-input.ss-plain-input--error .top-label { color: #FF6D4A; }

/*== SS ALERT BAR ==*/
.ss-alert-bar
{
    width: 100%;
    padding: 10px 20px;
    margin: 10px 0px;
    font-weight: 500;
    background-color: #828C94;
    color: #fff;
    opacity: 1;
    transition: opacity .2s ease-in-out;
}

.ss-alert-bar--warning { background-color: #F6A623; }
.ss-alert-bar--error { background-color: #FF6D4A; }
.ss-alert-bar--success { background-color: #83D791; }

.ss-alert-bar-dismiss-cta
{
    float: right;
    border-bottom: 0;
}

.ss-alert-bar-dismiss-cta:after
{
    font-family: "FontAwesome";
    content: '\f00d';
    color: #fff;
}

/*== Tag Label ==*/
.ss-tag-label
{
    font-weight: 600;
    font-size: 0.875rem;
    padding: 6px;
    border-radius: 4px;
    background-color: #828C94;
    color: #fff;
}

.ss-tag-label--blue
{
    background-color: #00AEEF;
    color: #fff;
}

.ss-tag-label--green
{
    background-color: #83D791;
    color: #fff;
}

.ss-tag-label--red
{
    background-color: #FF6D4A;
    color: #fff;
}

.ss-tag-label--orange
{
    background-color: #F6A623;
    color: #fff;
}