html, body,
.container {
    position: relative;
    width: 100%;
    height: 100%;
}

body {
    overflow-y: scroll;
    background: #333;
}

.splitlayout {
    position: relative;
    overflow-x: hidden;
    min-height: 100%;
    width: 100%;
}

/* Intro sides */
.side {
    position: fixed;
    top: 0;
    z-index: 100;
    width: 50%;
    height: 100%;
    -webkit-backface-visibility: hidden;
}

.open-left .side,
.open-right .side {
    cursor: default;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 499;
    visibility: hidden;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.side-left .overlay {
    background: rgba(0,0,0,0.7);
}

.side-right .overlay {
    background: rgba(0,0,0,0.3);
}

.side-left {
    left: 0;
    background: url("/bundles/app/img/login_photo.jpg");
    color: #fff;
    outline: 1px solid #47a3da; /* avoid gap */
    background-size: cover;
    text-align: center;
}

.side-right {
    right: 0;
    background: #fff;
    outline: 1px solid #fff; /* avoid gap */
}

/* Intro content, profile image and name, back button */
.intro-content {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0 1em;
    width: 60%;
    cursor: pointer;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
}

.profile {
    margin: 0 auto;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: #47a3da;
}

.intro-content h1 > span {
    display: block;
    white-space: nowrap;
}

.intro-content h1 > span:first-child {
    font-weight: 300;
    font-size: 2em;
}

.intro-content h1 > span:nth-child(2) {
    position: relative;
    margin-top: 0.5em;
    padding: 0.8em;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8em;
}

.intro-content h1 > span:nth-child(2):before {
    position: absolute;
    top: 0;
    left: 25%;
    width: 50%;
    height: 2px;
    background: #fff;
    content: '';
}

.side-right .intro-content h1 > span:nth-child(2):before {
    background: #47a3da;
}

.back {
    position: fixed;
    top: 2.6em;
    z-index: 500;
    display: block;
    visibility: hidden;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #47a3da;
    text-align: center;
    font-size: 22px;
    line-height: 44px;
    opacity: 0;
    pointer-events: none;
}

.mobile-layout .back { /* fixed positioning will make this not clickable after scrolling on some mobile devices */
    position: absolute;
}

.back-left {
    left: 12.5%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.back-right {
    right: 12.5%;
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
    color: #fff;
}

.open-right .back-left,
.open-left .back-right {
    visibility: visible;
    opacity: 1;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
    pointer-events: auto;
}

.back:hover {
    color: #ddd;
}

/* Pages */
.page {
    position: relative;
    top: 0;
    overflow: auto;
    min-height: 100%;
    width: 75%;
    height: auto;
    font-size: 1.4em;
    -webkit-backface-visibility: hidden;
}

.page-right {
    left: 25%;
    outline: 5px solid #ecf0f1; /* avoid rounding gaps */
    background: #ecf0f1;
    color: #97a8b2;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

.splitlayout.open-right {
    background: #ecf0f1;
}

.page-left {
    left: 0;
    outline: 5px solid #34495e; /* avoid rounding gaps */
    background: #34495e;
    color: #fff;
    text-align: right;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

.splitlayout.open-left {
    background: #34495e;
}

/* Inner page content */
.page-inner {
    padding: 2em;
}

.page-inner section {
    padding-bottom: 1em;
}

.page-inner h2 {
    margin: 0 0 1em 0;
    font-weight: 300;
    font-size: 2.4em;
}

.page-inner p {
    font-weight: 300;
    font-size: 1.2em;
}

/* All transitions */
.side,
.page {
    -webkit-transition: -webkit-transform 0.6s;
    transition: transform 0.6s;
}

.overlay {
    -webkit-transition: opacity 0.6s, visibility 0.1s 0.6s;
    transition: opacity 0.6s, visibility 0.1s 0.6s;
}

.intro-content {
    -webkit-transition: -webkit-transform 0.6s, top 0.6s;
    transition: transform 0.6s, top 0.6s;
}

.intro-content h1,
.back {
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

/* Open and close */

/* We need to set the position and overflow for the respective page scroll */
.reset-layout .page,
.splitlayout.open-right .page-left,
.splitlayout.open-left .page-right,
.splitlayout.close-right .page-left,
.splitlayout.close-left .page-right {
    position: absolute;
    overflow: hidden;
    height: 100%;
}

.splitlayout.open-right .page-right,
.splitlayout.open-left .page-left {
    position: relative;
    overflow: auto;
    height: auto;
}

.open-right .side-left .overlay,
.open-left .side-right .overlay {
    visibility: visible;
    opacity: 1;
    -webkit-transition: opacity 0.6s;
    transition: opacity 0.6s;
}

/* Right side open */
.open-right .side-left {
    -webkit-transform: translateX(-60%);
    transform: translateX(-60%);
}

.open-right .side-right {
    z-index: 200;
    -webkit-transform: translateX(-150%);
    transform: translateX(-150%);
}

.close-right .side-right {
    z-index: 200;
}

.open-right .side-right .intro-content {
    -webkit-transform: translateY(-50%) translateX(0%) scale(0.6);
    transform: translateY(-50%) translateX(0%) scale(0.6);
}

.open-right .page-right {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
}

/* Left side open */
.open-left .side-right {
    -webkit-transform: translateX(60%);
    transform: translateX(60%);
}

.open-left .side-left {
    z-index: 200;
    -webkit-transform: translateX(150%);
    transform: translateX(150%);
}

.close-left .side-left {
    z-index: 200;
}

.open-left .side-left .intro-content {
    -webkit-transform: translateY(-50%) translateX(-100%) scale(0.6);
    transform: translateY(-50%) translateX(-100%) scale(0.6);
}

.open-left .codropsheader {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.3s, visibility 0.1s 0.3s;
    transition: opacity 0.3s, visibility 0.1s 0.3s;
}

.open-left .page-left {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
}

/* Media Queries */
@media screen and (max-width: 83em) {
    .intro-content { font-size: 80%; }
}

@media screen and (max-width: 58em) {
    body { font-size: 90%; }
}

@media screen and (max-width: 49.4375em) {
    .open-right .side-right {
        -webkit-transform: translateX(-175%);
        transform: translateX(-175%);
    }

    .open-right .side-left {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }

    .open-left .side-right {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }

    .open-left .side-left {
        -webkit-transform: translateX(175%);
        transform: translateX(175%);
    }

    .page {
        width: 100%;
    }

    .page-right {
        left: 0;
        padding-left: 15%;
    }

    .page-left {
        padding-right: 15%;
    }

    .intro-content {
        width: 100%;
    }

    .open-right .side-right .intro-content {
        top: 100%;
        -webkit-transform: translateY(-150px) translateX(-12.5%) scale(0.5);
        transform: translateY(-150px) translateX(-12.5%) scale(0.5);
    }

    .open-left .side-left .intro-content {
        top: 100%;
        -webkit-transform: translateY(-150px) translateX(-87.5%) scale(0.5);
        transform: translateY(-150px) translateX(-87.5%) scale(0.5);
    }

    .open-right .intro-content h1,
    .open-left .intro-content h1 {
        opacity: 0;
    }

    .back-left {
        left: 6.25%;
    }

    .back-right {
        right: 6.25%;
    }
}

@media screen and (max-width: 42.5em) {
    body { font-size: 80%; }
    .intro-content { font-size: 80%; }
}

@media screen and (max-height: 41.125em) {
    .intro-content {
        -webkit-transform: translateY(-25%) translateX(-50%);
        transform: translateY(-25%) translateX(-50%);
    }
}

@media screen and (max-width: 39.375em) {
    .intro-content .profile { -webkit-transform: scale(0.5); transform: scale(0.5); }
}

@media screen and (max-width: 320px) {
    body { font-size: 70%; }
}

label,
input,
button,
select,
textarea {
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
}
input[type="radio"],
input[type="checkbox"] {
    margin-top: 1px 0 0;
    line-height: normal;
    cursor: pointer;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
select[multiple],
select[size] {
    height: auto !important;
}
input:focus,
select:focus,
textarea:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
form legend {
    margin: 15px 0px 10px 0px;
}
.form-control {
    background-color: #fff;
    background-image: none;
    border: 1px solid rgba(0, 0, 0, 0.07);
    -webkit-appearance: none;
    color: #2c2c2c;
    outline: 0;
    height: 35px;
    padding: 9px 12px;
    line-height: normal;
    font-size: 14px;
    font-weight: normal;
    vertical-align: middle;
    min-height: 35px;
    -webkit-transition: all 0.12s ease;
    transition: all 0.12s ease;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-transition: background 0.2s linear 0s;
    transition: background 0.2s linear 0s;
}
.form-control:focus {
    border-color: rgba(0, 0, 0, 0.1);
    background-color: #f0f0f0;
    outline: 0 !important;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.form-control:focus::-moz-placeholder {
    color: inherit;
    opacity: 0.7;
}
.form-control:focus:-ms-input-placeholder {
    color: inherit;
    opacity: 0.7;
}
.form-control:focus::-webkit-input-placeholder {
    color: inherit;
    opacity: 0.7;
}
.form-control::-moz-placeholder {
    color: inherit;
    opacity: 0.33;
}
.form-control:-ms-input-placeholder {
    color: inherit;
    opacity: 0.33;
}
.form-control::-webkit-input-placeholder {
    color: inherit;
    opacity: 0.33;
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    background: #f8f8f8;
    color: rgba(98, 98, 98, 0.23);
}
.form-control.transparent {
    background-color: transparent;
    border-color: transparent;
}
.form-control.transparent:focus {
    background-color: transparent;
    border-color: transparent;
}
/* Input Sizes
--------------------------------------------------
*/
.input-sm,
.form-horizontal .form-group-sm .form-control {
    font-size: 13px;
    min-height: 32px;
    height: 32px;
    padding: 8px 9px;
}
.input-lg,
.form-horizontal .form-group-lg .form-control {
    border-radius: 3px;
    font-size: 18px;
    height: 45px;
    padding: 11px 13px;
}
.input-xlg {
    height: 51px;
    font-size: 18px;
    line-height: 22px;
}

.form-horizontal .form-group {
    border-bottom: 1px solid #e6e6e6;
    padding-top: 19px;
    padding-bottom: 19px;
    margin-bottom: 0;
}
.form-horizontal .form-group:last-child {
    border-bottom: none;
}
.form-horizontal .form-group:hover .control-label {
    opacity: .6;
}
.form-horizontal .form-group.focused .control-label {
    opacity: 1;
}
.form-horizontal .form-group .control-label {
    text-align: left;
    opacity: .42;
    -webkit-transition: opacity ease 0.3s;
    transition: opacity ease 0.3s;
}
.form-horizontal .radio {
    padding-top: 7px;
    margin-top: 0;
    margin-bottom: 0;
}
.form-horizontal .control-label {
    padding-top: 7px;
    margin-bottom: 0;
}
/* Form layouts  : Attached
--------------------------------------------------
*/
.form-group-attached .form-group.form-group-default {
    border-radius: 0;
    margin-bottom: 0;
}
.form-group-attached > div {
    margin: 0;
}
.form-group-attached > div:first-child.row > [class*='col-']:first-child .form-group-default {
    -webkit-border-top-left-radius: 2px;
    -moz-border-radius-topleft: 2px;
    border-top-left-radius: 2px;
}
.form-group-attached > div:first-child.row > [class*='col-']:last-child .form-group-default {
    -webkit-border-top-right-radius: 2px;
    -moz-border-radius-topright: 2px;
    border-top-right-radius: 2px;
}
.form-group-attached > div:first-child.form-group-default {
    -webkit-border-top-left-radius: 2px;
    -moz-border-radius-topleft: 2px;
    border-top-left-radius: 2px;
    -webkit-border-top-right-radius: 2px;
    -moz-border-radius-topright: 2px;
    border-top-right-radius: 2px;
}
.form-group-attached > div:last-child.row > [class*='col-']:first-child .form-group-default {
    -webkit-border-bottom-left-radius: 2px;
    -moz-border-radius-bottomleft: 2px;
    border-bottom-left-radius: 2px;
}
.form-group-attached > div:last-child.row > [class*='col-']:last-child .form-group-default {
    -webkit-border-bottom-right-radius: 2px;
    -moz-border-radius-bottomright: 2px;
    border-bottom-right-radius: 2px;
}
.form-group-attached > div:last-child.form-group-default {
    -webkit-border-bottom-left-radius: 2px;
    -moz-border-radius-bottomleft: 2px;
    border-bottom-left-radius: 2px;
    -webkit-border-bottom-right-radius: 2px;
    -moz-border-radius-bottomright: 2px;
    border-bottom-right-radius: 2px;
}
.form-group-attached > div.row > [class*='col-'] {
    padding-right: 0 !important;
    padding-left: 0 !important;
}
.form-group-attached > div.row > [class*='col-']:not(:only-child):not(:last-child) > .form-group-default {
    border-right-color: transparent;
}
.form-group-attached > div:not(:last-child) .form-group-default,
.form-group-attached > div:not(:last-child).form-group-default {
    border-bottom-color: transparent;
}
/* Form layouts  : Responsive Handlers
--------------------------------------------------
*/
@media (max-width: 767px) {
    .form-group-attached .form-group-default {
        border-right-color: rgba(0, 0, 0, 0.07) !important;
    }
}
@media only screen and (min-width: 768px) {
    .form-group-attached > div.row > [class*='col-'] .form-group {
        height: 100%;
        width: 100%;
    }
}
/* Form Groups
--------------------------------------------------
*/
.form-group {
    margin-bottom: 10px;
}
.form-group label:not(.error) {
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 500;
}
.form-group label .help {
    margin-left: 8px;
}
.form-group .help {
    font-size: 12px;
    color: rgba(98, 98, 98, 0.55);
}
.form-group-default {
    background-color: #fff;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 2px;
    padding-top: 7px;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 4px;
    overflow: hidden;
    width: 100%;
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
}
.form-group-default.required:after {
    color: #f55753;
    content: "*";
    font-size: 20px;
    position: absolute;
    right: 12px;
    top: 6px;
}
.form-group-default.disabled {
    background: #f8f8f8;
    color: rgba(98, 98, 98, 0.23);
}
.form-group-default.disabled input {
    opacity: .6;
}
.form-group-default.disabled.focused {
    background: #f8f8f8;
}
.form-group-default.disabled.focused label {
    opacity: 1;
}
.form-group-default.focused {
    border-color: rgba(0, 0, 0, 0.1) !important;
    background-color: #f0f0f0;
}
.form-group-default.focused label {
    opacity: .4;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}
.form-group-default.has-error {
    background-color: rgba(245, 87, 83, 0.1);
}
.form-group-default.has-success .form-control-feedback,
.form-group-default.has-error .form-control-feedback {
    display: none !important;
}
.form-group-default.has-success .form-control,
.form-group-default.has-success .form-control:focus,
.form-group-default.has-error .form-control,
.form-group-default.has-error .form-control:focus {
    border: none;
    box-shadow: none;
}
.form-group-default.input-group {
    padding: 0;
}
.form-group-default.input-group > label {
    margin-top: 6px;
    padding-left: 12px;
}
.form-group-default.input-group > label.inline {
    margin-top: 6px;
    float: left;
}
.form-group-default.input-group > .form-control {
    margin-top: -2px;
    margin-bottom: 3px;
    padding-left: 12px;
}
.form-group-default.input-group .input-group-addon {
    height: calc(50px);
    border-radius: 0;
    border: none;
}
.form-group-default.input-group.focused .input-group-addon {
    border-color: rgba(0, 0, 0, 0.1);
}
.form-group-default .form-control {
    border: none;
    height: 25px;
    min-height: 25px;
    padding: 0;
    margin-top: -4px;
    background: none;
}
.form-group-default .form-control.error {
    color: #2c2c2c;
}
.form-group-default .form-control:focus {
    background: none;
}
.form-group-default textarea.form-control {
    padding-top: 5px;
}
.form-group-default label {
    margin: 0;
    display: block;
    opacity: 1;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
}
.form-group-default label.label-lg {
    font-size: 13px;
    left: 13px;
    top: 9px;
}
.form-group-default label.label-sm {
    font-size: 11px;
    left: 11px;
    top: 6px;
}
.form-group-default label.highlight {
    opacity: 1;
}
.form-group-default label.fade {
    opacity: .5;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}
.form-group-default > .input-lg {
    height: 29px;
    min-height: 29px;
    padding-left: 1px;
}
.form-group-default > .input-sm {
    min-height: 18px;
    height: 18px;
}
.form-group-default.form-group-default-select {
    overflow: visible;
}
.form-group-default.form-group-default-select .ui-select-container.ui-select-bootstrap.dropdown .ui-select-match {
    padding-top: 6px;
    height: 23px;
}
.form-group-default.form-group-default-select .ui-select-container .select2-choices {
    border: 0px;
}
.form-group-default.form-group-default-select2 {
    padding: 0;
}
.form-group-default.form-group-default-select2 > label {
    position: absolute;
    z-index: 10;
    padding: 7px 12px 0 12px;
}
.form-group-default.form-group-default-select2 > label.label-lg {
    left: 0;
    top: 0;
}
.form-group-default.form-group-default-select2 > label.label-sm {
    left: 0;
    top: 0;
}
.form-group-default.form-group-default-select2 .select2-container .select2-selection--single {
    padding-top: 20px;
    height: 52px;
    border: 0 !important;
}
.form-group-default.form-group-default-select2 .select2-container .select2-selection--single .select2-arrow b:before {
    top: 20px;
}
.form-group-default.form-group-default-select2 .select2-container .select2-selection--single .select2-chosen {
    padding-left: 3px;
    padding-top: 1px;
}
.form-group-default.form-group-default-select2 .select2-container .select2-selection--multiple {
    padding-top: 20px;
    height: 52px;
    border: 0px !important;
}
.form-group-default.form-group-default-select2 .select2-container .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    margin-top: 4px;
}
.form-group-default.form-group-default-select2 > .input-lg {
    height: auto;
    padding: 0;
}
.form-group-default.form-group-default-select2 > .input-lg .select2-choice {
    padding-top: 20px;
    height: 56px;
}
.form-group-default.form-group-default-select2 > .input-sm {
    height: auto;
    padding: 0;
}
.form-group-default.form-group-default-select2 > .input-sm .select2-choice {
    padding-top: 20px;
    height: 46px;
}
.form-group-default.form-group-default-selectFx {
    padding: 0;
}
.form-group-default.form-group-default-selectFx > label {
    position: absolute;
    z-index: 10;
    padding: 7px 12px 0 12px;
}
.form-group-default.form-group-default-selectFx > label.label-lg {
    left: 0;
    top: 0;
}
.form-group-default.form-group-default-selectFx > label.label-sm {
    left: 0;
    top: 0;
}
.form-group-default.form-group-default-selectFx .cs-wrapper .cs-placeholder {
    padding-top: 28px;
    height: 52px;
    padding-left: 12px;
}
.form-group-default.form-group-default-selectFx .cs-wrapper .cs-select {
    height: auto;
}
.form-group-default.form-group-default-selectFx .cs-wrapper .cs-select > span:after,
.form-group-default.form-group-default-selectFx .cs-wrapper .cs-select .cs-selected span:after {
    top: 39px;
}
.form-group-default.form-group-default-selectFx .cs-wrapper .cs-select.input-lg .cs-placeholder {
    height: 60px;
}
.form-group-default.form-group-default-selectFx .cs-wrapper .cs-select.input-sm .cs-placeholder {
    height: 50px;
}
.form-group-default.form-group-default-selectFx .cs-wrapper .dropdown-placeholder {
    vertical-align: top;
}
/* Form validation
--------------------------------------------------
*/
.has-success .help-block,
.has-success .control-label,
.has-success .radio,
.has-success .checkbox,
.has-success .radio-inline,
.has-success .checkbox-inline {
    color: #0da899;
}
.has-success .form-control {
    border-color: #0da899;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.has-success .form-control:focus {
    border-color: #09786e;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.has-success .input-group-addon {
    background: #f0f0f0;
    border: 1px solid rgba(0, 0, 0, 0.07);
    color: rgba(98, 98, 98, 0.47);
}
.has-success .form-control-feedback {
    color: #0da899;
}
.has-warning .help-block,
.has-warning .control-label,
.has-warning .radio,
.has-warning .checkbox,
.has-warning .radio-inline,
.has-warning .checkbox-inline {
    color: #c9a843;
}
.has-warning .form-control {
    border-color: #c9a843;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.has-warning .form-control:focus {
    border-color: #a98b31;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.has-warning .input-group-addon {
    background: #f0f0f0;
    border: 1px solid rgba(0, 0, 0, 0.07);
    color: rgba(98, 98, 98, 0.47);
}
.has-warning .form-control-feedback {
    color: #c9a843;
}
.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline {
    color: #f55753;
}
.has-error .form-control {
    border-color: #f55753;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.has-error .form-control:focus {
    border-color: #f22823;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.has-error .input-group-addon {
    background: #f0f0f0;
    border: 1px solid rgba(0, 0, 0, 0.07);
    color: rgba(98, 98, 98, 0.47);
}
.has-error .form-control-feedback {
    color: #f55753;
}
.error {
    font-size: 12px;
    color: #f55753;
    display: block;
}
/* Addon inputs
--------------------------------------------------
*/
.input-group-addon {
    background: #f0f0f0;
    border: 1px solid rgba(0, 0, 0, 0.07);
    color: rgba(98, 98, 98, 0.47);
    font-size: 14px;
    padding: 6px 10px;
    border-radius: 3px;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s, color 0.2s linear 0s, box-shadow 0.2s linear 0s, background 0.2s linear 0s;
}
.input-group-addon i {
    position: relative;
    top: 1px;
}
.input-group-addon.primary {
    background-color: #6d5cae;
    border: 1px solid #6d5cae;
    color: #fff;
}
.input-group-addon.primary .arrow {
    color: #6d5cae;
}
.input-group-addon.success {
    background-color: #0090d9;
    color: #fff;
}
.input-group-addon.success .arrow {
    color: #0090d9;
}
.input-group-addon.info {
    background-color: #1f3853;
    color: #fff;
}
.input-group-addon.info .arrow {
    color: #1f3853;
}
.input-group-addon.warning {
    background-color: #fbb05e;
    color: #fff;
}
.input-group-addon.warning .arrow {
    color: #fbb05e;
}
.input-group-addon.danger {
    background-color: #f35958;
    color: #fff;
}
.input-group-addon.danger .arrow {
    color: #f35958;
}
.input-group-addon .arrow {
    position: relative;
    right: -6px;
    color: #D1DADE;
    z-index: 100;
}
.input-group-addon .arrow:before {
    font-family: 'FontAwesome';
    content: "\f0da";
    font-size: 23px;
    position: absolute;
    left: 17px;
    top: -2px;
}
.input-group-addon:last-child .arrow:before {
    font-family: 'FontAwesome';
    content: "\f0d9";
    font-size: 23px;
    position: absolute;
    left: -23px;
    top: -2px;
}
.input-group-addon:last-child input {
    border-left: 0px;
}
@media (max-width: 1200px) {
    .left-hide-sm {
        display:none;
    }
    .side {
        width: 100%;
    }
}