/*Border radius ends here*/
.app-base-component-container {
  font-family: 'Roboto', sans-serif;
  position: relative; }
  .app-base-component-container.transparent input {
    background: transparent !important; }
  .app-base-component-container.rounded input {
    -webkit-border-radius: 100px !important;
    -moz-border-radius: 100px !important;
    border-radius: 100px !important; }
  .app-base-component-container > .ui.input + .app-placeholder-label {
    font-size: 1em;
    font-weight: 400;
    position: absolute;
    top: 21px;
    pointer-events: none;
    left: 20px;
    color: #93a4aa;
    height: auto;
    z-index: 1;
    cursor: text;
    text-align: left;
    display: inline-block;
    -webkit-transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -o-transition: 0.2s ease all;
    transition: 0.2s ease all; }
  .app-base-component-container > .ui.input.huge + .app-placeholder-label {
    font-size: 20px;
    top: 23px; }
  .app-base-component-container > .ui.input.massive + .app-placeholder-label {
    font-size: 27px;
    top: 30px; }
  .app-base-component-container > .ui.input.large + .app-placeholder-label {
    font-size: 15px;
    top: 18px; }
  .app-base-component-container > .ui.input.medium + .app-placeholder-label {
    font-size: 13px;
    top: 16px; }
  .app-base-component-container > .ui.input.small + .app-placeholder-label {
    font-size: 12px;
    top: 14px; }
  .app-base-component-container > .ui.input.selection {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    height: auto;
    padding-left: 18px;
    padding-top: 15px; }
    .app-base-component-container > .ui.input.selection.small {
      font-size: 13px;
      min-height: 40px; }
      .app-base-component-container > .ui.input.selection.small > .ui.label {
        padding: 2px 4px;
        margin: 3px 3px 0 0; }
    .app-base-component-container > .ui.input.selection.medium {
      font-size: 14px;
      min-height: 43px; }
      .app-base-component-container > .ui.input.selection.medium > .ui.label {
        padding: 2px 4px;
        margin: 3px 3px 0 0; }
    .app-base-component-container > .ui.input.selection.large {
      font-size: 17px;
      min-height: 49px; }
      .app-base-component-container > .ui.input.selection.large > .ui.label {
        padding: 2px 4px;
        margin: 3px 3px 0 0; }
    .app-base-component-container > .ui.input.selection.big {
      min-height: 54px !important; }
      .app-base-component-container > .ui.input.selection.big > input.search {
        font-size: 15px; }
      .app-base-component-container > .ui.input.selection.big > .text {
        top: 4px !important; }
    .app-base-component-container > .ui.input.selection.massive {
      min-height: 72px !important; }
      .app-base-component-container > .ui.input.selection.massive > .text {
        top: 6px !important; }
    .app-base-component-container > .ui.input.selection.multiple {
      padding-bottom: 5px; }
    .app-base-component-container > .ui.input.selection:not(.multiple) {
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap; }
      .app-base-component-container > .ui.input.selection:not(.multiple) > .text {
        top: 1px; }
      .app-base-component-container > .ui.input.selection:not(.multiple) > input.search {
        width: 100% !important;
        height: 100%;
        padding: .67857143em 2.1em .67857143em 1em !important;
        padding-left: 18px !important; }
    .app-base-component-container > .ui.input.selection > .ui.label {
      font-size: 11px;
      margin: 4px 3px 0 0;
      padding: 4px 4px;
      border-radius: 1px;
      font-weight: 400;
      border: none !important;
      box-shadow: none;
      background: #eee;
      flex-shrink: 0; }
      .app-base-component-container > .ui.input.selection > .ui.label i {
        font-size: 11px; }
    .app-base-component-container > .ui.input.selection > input.search {
      align-self: center; }
    .app-base-component-container > .ui.input.selection > .menu div {
      font-size: 13px; }
      .app-base-component-container > .ui.input.selection > .menu div.header {
        font-size: 15px; }
    .app-base-component-container > .ui.input.selection > input {
      margin: 0 !important;
      padding: 0 !important;
      padding-left: 5px !important;
      flex-grow: 1;
      flex-shrink: 1;
      left: 0 !important;
      width: 0 !important; }
  .app-base-component-container > .ui.input.labeled .label.label {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #606470; }
  .app-base-component-container > .ui.input.labeled:not(.right) + .app-placeholder-label {
    display: none; }
  .app-base-component-container > .ui.input > input {
    padding-left: 18px !important; }
    .app-base-component-container > .ui.input > input + i {
      display: flex;
      align-items: center;
      justify-content: center; }
  .app-base-component-container.data-active > .ui.input + .app-placeholder-label {
    font-size: 10px;
    letter-spacing: .5px;
    top: 5px; }
  .app-base-component-container.data-active.small + .app-placeholder-label {
    top: 2px !important; }
  .app-base-component-container.line > .ui.input + .app-placeholder-label {
    left: 0px; }
  .app-base-component-container.line > .ui.input input {
    padding-left: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    background: transparent; }
    .app-base-component-container.line > .ui.input input:focus {
      background: transparent; }
  .app-base-component-container.line.data-active > .ui.input + .app-placeholder-label {
    font-size: 10px;
    letter-spacing: .5px;
    top: 0px; }
  .app-base-component-container.error-label > .app-form-error-container {
    font-size: 11px;
    color: #db2828;
    margin-top: 2px;
    margin-left: 18px;
    position: absolute;
    top: 100%; }
    .app-base-component-container.error-label > .app-form-error-container svg {
      font-size: 10px;
      margin-right: 5px; }
  .app-base-component-container.error-label input, .app-base-component-container.error-label .selection {
    border: 1px solid #db2828 !important;
    background: #fefafa !important; }

/*
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&subset=latin-ext');
@import '~react-datepicker/dist/react-datepicker.css';

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend, input, select, textarea, button,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {
    margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
a {text-decoration: none;}img {border: 0;}:focus {outline: 0;}
.clear {clear: both;}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    outline: none !important;
}
.input-group {position: relative;display: table;border-collapse: separate;}
.input-group[class*="col-"] {float: none;padding-right: 0;padding-left: 0;}
.input-group-addon,.input-group-btn,.input-group .form-control {display: table-cell;}
.input-group-addon:not(:first-child):not(:last-child),.input-group-btn:not(:first-child):not(:last-child),.input-group .form-control:not(:first-child):not(:last-child) {border-radius: 0;}
.input-group-addon,.input-group-btn {width: 1%;white-space: nowrap;vertical-align: middle;}
.input-group-addon {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: normal;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.input-group-addon.input-sm {
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 3px;
}
.input-group-addon.input-lg {
    padding: 10px 16px;
    font-size: 18px;
    border-radius: 6px;
}
.input-group-addon input[type="radio"],
.input-group-addon input[type="checkbox"] {
    margin-top: 0;
}
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group-addon:first-child {
    border-right: 0;
}



.app-base-component-container {
    font-family: 'Roboto', sans-serif;
    position: relative;

    fieldset {
        width: 100%;
    }

    &.is-title-left {

        padding-left: 200px;

        &:before {
            content: attr(data-title);
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            height: 100%;
            width: 200px;
            display: flex;
            align-items: center;
            font-size: 11px;
            line-height: 13px;
            color: #717E83;
            display: none;
        }



        .app-component-form-title {
            display: none;
        }
    }

    &.is-title-top {

        padding-top: 23px;

        &:before {
            content: attr(data-title);
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            height: 23px;
            width: 100%;
            display: flex;
            align-items: center;
            font-size: 11px;
            line-height: 11px;
            font-weight: 600;
            letter-spacing: .5px;
            color: #1D2229
        }

        .app-component-form-title {
            display: none;
        }
    }

    &.is-title-left {
        > .app-component-form-title {
            //display: none;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            height: 100%;
            width: 200px;
            display: flex;
            align-items: center;
            font-size: 11px;
            line-height: 13px;
            color: #717E83;

            &.required {
                &:after {
                    content: '*';
                    color: red;
                    top: 0;
                    left: auto;
                    margin-left: 5px;
                }
            }

            & ~ .app-form-edit-container {
                //width: calc(100% - 0px);
                //display: inline-block;
                //padding-left: 100px;
                //right: 0;
                //left: 100px;


            }
        }
    }

    > .app-component-form-title {
        font-size: 11px;
        line-height: 13px;
        font-weight: 600;
        height: 25px;
        letter-spacing: .5px;
        display: flex;
        align-items: center;
        color: #1D2229
    }

    > .app-form-edit-container {
        position: relative;

        label {
            &.app-placeholder-label {
                font-size: 13px;
                line-height: 13px;
                font-weight: 400;
                position: absolute;
                top: 19px;
                width: calc(100% - 22px);
                pointer-events: none;
                left: 11px;
                color: #93a4aa;
                height: auto;
                transition: 0.2s ease all;
                -moz-transition: 0.2s ease all;
                -webkit-transition: 0.2s ease all;
                z-index: 1;
                cursor: text;
                text-align: left;

                &.active {
                    color: #39495B;
                    font-weight: 500;
                }
            }
        }

        .app-helper-icon{
            font-size: 22px;
            line-height: 22px;
            font-weight: 400;
            position: absolute;
            top: 15px;
            right: 15px;
            color: #93a4aa;
            height: auto;
            transition:0.2s ease all;
            -moz-transition:0.2s ease all;
            -webkit-transition:0.2s ease all;
            z-index: 1;
            cursor: pointer;

            &.no-click {
                cursor: default;
            }

            & ~ fieldset {
                input {
                    padding-right: 50px !important;
                }
            }

            !*&:hover {
                font-size: 25px;
                right: 13px;
                top: 13px;
            }*!
        }

        .input-group {
            width: 100%;

            & > fieldset {
                position: relative;
            }

            .select-arrow {
                position: absolute;
                height: calc(100% - 2px);
                width: 50px;
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                right: 0;
                z-index: 2;
                top:1px;
                //border-left:1px solid #B4BBD0 ;
                cursor: pointer;

            }

            .input-group-addon {
                background: rgba(180, 187, 208, .05);
                font-weight: 500;
                font-size: 12px;
                padding-top: 8px;
                border: 1px solid #c5c5c5;

                &.left {
                    @include border-radius-right(0);
                    border-right: 0;
                }

                &.right {
                    @include border-radius-left(0);
                    border-left: 0;
                }
            }

            &.data-active {
                label {
                    &.app-placeholder-label {
                        font-size: 10px;
                        letter-spacing: 0px;
                        top: 5px;
                        color: #93a4aa;
                        font-weight: normal;
                    }
                }
            }

            &.addon-left {
                fieldset {
                    input {
                        @include border-radius-left(0);
                    }
                }
            }

            &.addon-right {
                fieldset {
                    input {
                        @include border-radius-right(0);
                    }
                }
            }

            .input-group-btn {
                button {
                    font-size: 14px;
                    font-weight: 700;
                    line-height: 1;
                    color: #555;
                    text-align: center;
                    background-color: rgba(180, 187, 208, .2);
                    border: 1px solid #c5c5c5;
                    @include border-radius(4px);
                    @include border-radius-left(0);
                    border-left: 0;
                    height: 50px;

                    &:hover, &:focus {
                        background-color: rgba(180, 187, 208, .3) !important;
                        border-color: #0091D4;
                    }
                }

                &.open {
                    button {
                        background-color: rgba(180, 187, 208, .3) !important;
                        border-color: #0091D4 !important;
                        border-left: solid 1px;
                    }
                }
            }

            &.error {
                input {
                    border-color: #F2405D;
                    &:focus {
                        border-color: #F2405D;
                    }
                }
            }

        }
    }

    &.md {

        label {
            &.app-placeholder-label {
                font-size: 13px;
                line-height: 13px;
                font-weight: 400;
                position: absolute;
                top: 12px;
            }
        }

        .app-helper-icon{
            font-size: 16px;
            line-height: 16px;
            top: 10px;
            right: 10px;

            &:hover {
                font-size: 16px;
                line-height: 16px;
                top: 10px;
                right: 10px;
            }
        }

        .input-group {
            width: 100%;

            & > fieldset {
                position: relative;
            }

            .input-group-addon {
                background: rgba(180, 187, 208, .05);
                font-weight: 500;
                font-size: 12px;
                padding-top: 8px;
                border: 1px solid #B4BBD0;

                &.left {
                    @include border-radius-right(0);
                    border-right: 0;
                }

                &.right {
                    @include border-radius-left(0);
                    border-left: 0;
                }
            }

            &.data-active {
                label {
                    &.app-placeholder-label {
                        font-size: 9px;
                        letter-spacing: 0px;
                        top: 2px;
                    }
                }
            }


        }

        input[type="text"], input[type="password"] {
            height: 35px;
            font-size: 13px;
            line-height: 13px;

            &:focus {
                & ~ label {
                    &.app-placeholder-label {
                        font-size: 9px;
                        letter-spacing: 0px;
                        top: 2px;
                    }
                }
            }
        }

        .app-form-error-container {
            padding: 0px 5px;
            top: 29px;
        }
    }

    &.sm {

        label {
            display: none;
        }

        .app-helper-icon{
            font-size: 16px;
            line-height: 16px;
            top: 5px;
            right: 5px;

            &:hover {
                font-size: 16px;
                line-height: 16px;
                top: 5px;
                right: 5px;
            }
        }

        .input-group {
            width: 100%;

            & > fieldset {
                position: relative;
            }

            .input-group-addon {
                background: rgba(180, 187, 208, .05);
                font-weight: 500;
                font-size: 12px;
                padding-top: 8px;
                border: 1px solid #B4BBD0;

                &.left {
                    @include border-radius-right(0);
                    border-right: 0;
                }

                &.right {
                    @include border-radius-left(0);
                    @include border-radius-right(3px !important);
                    border-left: 0;
                }
            }

            &.data-active {
                label {
                    &.app-placeholder-label {
                        font-size: 9px;
                        letter-spacing: 0px;
                        top: 2px;
                    }
                }
            }


        }

        input[type="text"], input[type="password"] {
            height: 28px;
            font-size: 12px;
            line-height: 12px;
            padding: 0 10px;

            &:focus {
                & ~ label {
                    &.app-placeholder-label {
                        font-size: 9px;
                        letter-spacing: 0px;
                        top: 2px;
                    }
                }
            }
        }

        .app-form-error-container {
            padding: 0px 5px;
            top: 19px;
        }
    }

    &.rounded {

        label {
            &.app-placeholder-label {
                left: 20px
            }
        }

        input[type="text"], input[type="password"] {
            padding-left: 20px;
            @include border-radius(100px);
        }
    }

    input[type="text"], input[type="password"] {
        width: 100%;
        //background: white;
        @include border-radius(1px);
        cursor: text;
        letter-spacing: normal;
        text-align: start;
        text-indent: 0;
        text-rendering: optimizelegibility;
        text-shadow: none;
        text-transform: none;
        word-spacing: normal;
        box-sizing: border-box;
        border: 1px solid #c5c5c5;
        transition: border 0.25s linear 0s, color 0.25s linear 0s, background-color 0.25s linear 0s;
        font-size: 15px;
        line-height: 13px;
        color: #39495B;
        position: relative;
        height: 50px;
        padding: 10px 10px 0 10px;
        font-weight: 500;
        display: flex;
        align-items: center;
        z-index: 0;

        &.no-label {
            padding: 0 10px !important;
        }

        &:hover {
            outline: 0 none;
            border-color: #9399AC;
            //box-shadow: 0 5px 6px -5px rgba(0, 0, 0, 0.2), 0 7px 5px -7px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(255, 255, 255, 0.2);
        }
        &:focus {
            outline: 0 none;
            border-color: #0091D4;
            //box-shadow: 0 5px 6px -5px rgba(0, 0, 0, 0.2), 0 7px 5px -7px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(255, 255, 255, 0.2);
            z-index: 0;

            & ~ label {
                &.app-placeholder-label {
                    font-size: 10px;
                    letter-spacing: 0px;
                    top: 5px;
                }
            }
        }

        &:disabled {
            //background: lighten(#E9EDF1, 20%);
            background: bottom;
            box-shadow: none;
            cursor: not-allowed;
            pointer-events: none;
            color: #B4BBD0;

            &:focus {
                border-color: #E9EDF1;
                box-shadow: none;
            }
        }
        &:read-only {
            box-shadow: none;
            cursor: not-allowed;
            pointer-events: none;

            &:focus {
                border-color: #E9EDF1;
                box-shadow: none;
            }
        }
    }

    .app-form-error-container {
        font-size: 10px;
        line-height: 12px;
        position: absolute;
        background: #F2405D;
        color: #fff;
        -webkit-transition: 0.3s ease all;
        -o-transition: 0.3s ease all;
        transition: 0.3s ease all;
        height: auto;
        padding: 0 5px;
        z-index: 1;
        !* width: 100%; *!
        text-align: right;
        top: 43px;
        right: 10px;
        border-radius: 2px;
        left: auto;
    }

    .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        display: none;
        float: left;
        min-width: 160px;
        padding: 5px 0;
        margin: 2px 0 0;
        font-size: 14px;
        text-align: left;
        list-style: none;
        background-color: #fff;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        border: 1px solid #ccc;
        border: 1px solid rgba(0, 0, 0, .15);
        border-radius: 4px;
        -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
        box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    }

    .op-soft {
        opacity: .1;
    }

    .dropdown-menu {
        margin: 1px 0 0;
        padding: 0;
        width: 100%;
        font-size: 12px;
        text-align: left;
        list-style: none;
        background-color: #fff;
        border: 1px solid $blue;
        @include border-radius(2px);
        //@_bootstrap box-shadow(0px 0px 4px rgba(0, 0, 0, 0.05));

        &.small {
            position: relative;
        }

        &.block {
            display: block;
        }

        &.dropdown-menu-right {
            right: 0;
            left: auto;
        }



        &:after {
            content: '';
            border-bottom: 5px solid $blue;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            position: absolute;
            font-size: 9px;
            color: $blue;
            top: -6px;
            right: 8px;
            @include border-radius(4px !important);
        }

        &.dropdown-select {
            &:after {
                content: '';
                border:none
            }
        }

        li {

            &.only-li {
                height: 40px;
                display: flex;
                align-items: center;
                border-bottom: 1px solid #eee;
                padding: 0 15px 0 40px;
                cursor: pointer;

                &.no-icon {
                    padding: 0 15px;
                }

                i, svg {
                    font-size: 13px;
                    position: absolute;
                    left: 15px;
                    font-weight: bold;
                    opacity: .1;
                }
            }

            &.dd-search {
                padding: 10px 15px;
                border-bottom: 1px solid #ddd;
                cursor: pointer;
                color: #ccc;

                input[type="text"], input[type="password"] {
                    padding: 0 10px;
                    background: #FBFBFB;
                }

                svg {
                    margin-right: 15px;
                }

                &:hover {
                    background: transparent;
                    text-decoration: underline;
                    color: black;
                }

                &.dd-warning {
                    background: #f67280;
                    color: white;
                    cursor: default;

                    &:hover {
                        text-decoration: none;
                    }

                    svg {
                        color: white;
                    }
                }
            }

            &:hover{
                background: #F5F5F5;
            }

            &.active{
                svg {
                    opacity: 1;
                }
            }

            &.activeHover{
                background: #F5F5F5;
            }

            a {

                height: 40px;
                display: flex;
                align-items: center;
                border-bottom: 1px solid #eee;
                padding: 0 15px 0 40px;
                cursor: pointer;


                i, svg {
                    font-size: 13px;
                    position: absolute;
                    left: 15px;
                    font-weight: bold;
                }
            }

            &:first-child {
                @include border-radius-top(4px);
                a {
                    @include border-radius-top(4px)
                }
            }

            &:last-child {
                @include border-radius-bottom(4px);
                a {
                    @include border-radius-bottom(4px)
                }
            }


        }

        .scrollbar-container {
            width: 5px !important;

            .scrollbar {
                width: 5px !important;
                @include border-radius(10px);
            }
        }
    }
}

.react-datepicker-popper[data-placement^="bottom"] {
    margin-top: 1px !important;
}

.react-datepicker-popper {
    z-index: 3 !important;
    margin-top: 1px;
    width: 100%;

    .react-datepicker__current-month {
        font-weight: 500;
        font-size: 20px;
    }



    .react-datepicker__navigation.react-datepicker__navigation--next.react-datepicker__navigation--next--with-today-button {
        &:hover {
            border-left-color: $blue
        }
    }

    .react-datepicker__navigation.react-datepicker__navigation--previous {
        &:hover {
            border-right-color: $blue
        }
    }

    .react-datepicker {
        width: 100%;
        border: 1px solid $blue;
        @include box-shadow(0 6px 12px rgba(0,0,0,.175));

        .react-datepicker__month-container {
            width: 100%;

            .react-datepicker__header {
                background: white;

                .react-datepicker__day-names {
                    font-weight: bold;
                }
            }
        }

        .react-datepicker__triangle {
            display: none;
            &::before {
                border-bottom-color: $blue !important;
            }
        }
    }



    .react-datepicker__day--highlighted {
        background: $red;
    }

    .react-datepicker__header {
        //background: $blue;
    }

    .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {
        width: 35px;
        line-height: 35px;
    }

    .react-datepicker__day.react-datepicker__day--sat.react-datepicker__day--selected.react-datepicker__day--today.react-datepicker__day--weekend {
        background: $blue;
        color: white;
    }

    .react-datepicker__day--outside-month {
        color: #ccc
    }

    .react-datepicker__day--keyboard-selected {
        @include border-radius(4px);
        background: $blue;
    }


}

.react-datepicker-wrapper {
    width: 100%;
    .react-datepicker__input-container {
        width: 100%;
    }
}

.react-datepicker__today-button {
    @include border-radius-bottom(4px);
    padding: 15px;
    background: white;
    color: $blue;
    border-top-color: $blue;

    &:hover {
        color: $red
    }
}



.scroll-area-conrainer {
    max-height: 240px;
}

.scroll-container {
    height: auto;
}

.app-base-component-checkbox-layer {

    & > label {
        display: inline-block;
        position: relative;
        padding-left: 30px;
        padding-right: 15px;
        cursor: pointer;
        font-size: 13px;
        font-family: 'Roboto', sans-serif;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        height: 20px;
        padding-top: 3px;
        font-weight: 500;
        width: 100%;
    }

    &.error > .app-form-error-container {
        font-size: 10px;
        font-weight: normal;
        position: absolute;
        background: transparent;
        color: #F2405D;
        -webkit-transition: 0.3s ease all;
        -o-transition: 0.3s ease all;
        transition: 0.3s ease all;
        padding: 5px 30px;
    }

    &:hover {
        input[type="checkbox"] {
            & ~ .checkmark {
                background-color: #2196F3;
                border:none;
            }
        }
    }

    &.disabled {
        & > label {
            cursor: not-allowed;
            pointer-events: none;
            color: lighten(#000, 50%)

        }

        &:hover {
            input[type="checkbox"] {
                & ~ .checkmark {
                    border: 1px solid #B4BBD0;
                }
            }
        }

        input[type="checkbox"] {
            position: absolute;
            opacity: 0;
            cursor: pointer;

            & ~ .checkmark {
                background-color: transparent;
                //border: none;
            }

            &:checked {
                & ~ .checkmark {
                    background-color: lighten(#2196F3, 20%);
                    border: none;
                }
            }
        }
    }

    input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        cursor: pointer;

        &:checked {
            & ~ .checkmark {
                background-color: #2196F3;
                border: none;
                &:after {
                    display: block;
                }
            }
        }

    }

    .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 20px;
        width: 20px;
        border: 1px solid #B4BBD0;
        @include border-radius(3px);

        &:after {
            content: "";
            position: absolute;
            display: none;
            left: 10px;
            top: 2px;
            width: 7px;
            height: 13px;
            border: solid white;
            border-width: 0 2px 2px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        &.error-checkmark {
            border-color: $red
        }
    }


}

.app-base-component-radio-layer {
    margin-bottom: 10px;

    & > label {
        display: inline-block;
        position: relative;
        padding-left: 30px;
        padding-right: 15px;
        cursor: pointer;
        font-size: 13px;
        font-family: 'Roboto', sans-serif;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        height: 20px;
        padding-top: 3px;
        font-weight: 500;
        width: 100%;
    }

    &.error > .app-form-error-container {
        font-size: 10px;
        font-weight: normal;
        position: absolute;
        background: transparent;
        color: #F2405D;
        -webkit-transition: 0.3s ease all;
        -o-transition: 0.3s ease all;
        transition: 0.3s ease all;
        padding: 5px 30px;
    }

    &:hover {
        input[type="radio"] {
            & ~ .checkmark {
                background-color: #2196F3;
                border:none;
            }
        }
    }

    &.disabled {
        & > label {
            cursor: not-allowed;
            pointer-events: none;
            color: lighten(#000, 50%)

        }

        &:hover {
            input[type="radio"] {
                & ~ .checkmark {
                    border: 1px solid #B4BBD0;
                }
            }
        }

        input[type="radio"] {
            position: absolute;
            opacity: 0;
            cursor: pointer;

            & ~ .checkmark {
                background-color: transparent;
            }

            &:checked {
                & ~ .checkmark {
                    background-color: lighten(#2196F3, 20%);
                    border: none;
                }
            }
        }
    }

    input[type="radio"] {
        position: absolute;
        opacity: 0;
        cursor: pointer;

        &:checked {
            & ~ .checkmark {
                background-color: #2196F3;
                border: none;
                &:after {
                    display: block;
                }
            }
        }

    }

    .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 20px;
        width: 20px;
        border: 1px solid #B4BBD0;
        @include border-radius(100%);

        &:after {
            content: "";
            position: absolute;
            display: none;
            left: 5px;
            top: 5px;
            width: 10px;
            height: 10px;
            background: white;
            @include border-radius(100%);

        }

        &.error-checkmark {
            border-color: $red
        }
    }


}

.app-check-container-class {
    width: 100%;
    position: relative;
    //display: flex;
    //align-items: flex-start;
    //justify-content: flex-start;
    padding-top: 40px;

    & > .app-check-title {
        position: absolute;
        left: 0;
        top: 0;
        height: 40px;
        width: 100%;
        display: flex;
        align-items: center;
        font-size: 11px;
        line-height: 11px;
        font-weight: 600;
        letter-spacing: .5px;
        color: #1D2229;
    }

    & > .app-check-error-container {
        position: absolute;
        left: 0;
        top: 30px;
        width: 100%;
        display: flex;
        align-items: center;
        font-size: 10px;
        font-weight: normal;
        background: transparent;
        color: #F2405D;
        -webkit-transition: 0.3s ease all;
        -o-transition: 0.3s ease all;
        transition: 0.3s ease all;
        margin-top: -20px;

        & + .app-check-title {
            position: absolute;
            left: 0;
            top: 0;
            display: flex;
            align-items: flex-start;
        }
    }


}

button.app-base-component-button {
    font-size:14px;
    display:inline-flex;
    text-align:center;
    width:auto;
    height: 50px;
    position:relative;
    @include transition(0.2s all ease);
    @include border-radius(4px);
    background: white;
    color:#738BA0;
    font-family: 'Roboto', sans-serif;
    border:1px solid $light;
    padding: 0 10px;
    align-items: center !important;
    justify-content: center;
    cursor: pointer;

    &:focus {
        box-shadow: none !important;
    }

    &:disabled {
        background: darken(#FFF, 3%);
        border:1px solid lighten(#c5c5c5, 5%);
        pointer-events: none;
        cursor: none;
        color: darken(#738BA0, 5%);

        &:hover, &:focus {
            box-shadow: none;
            background: inherit;
        }
    }

    i {
        font-size: 20px !important;
        position: relative;
        margin-right: 10px;
        margin-left: 10px;
    }

    &:hover, &:focus {
        //box-shadow: 0 2px 10px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.1);
        background: white;
    }

    &:focus {
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
    }

    &.bold {
        font-weight: bold;
    }

    &.uppercase {
        text-transform:uppercase;
    }

    &.small {
        height: 30px;
        font-size: 12px;
    }


    &.blue {
        background: $blue-gradient;
        color:white;
        border:1px solid $blue;

        &:hover, &:focus {
            box-shadow: 0 0px 17px rgba(25,33,255,.5);
        }

        &:focus {
            box-shadow: 0 0px 17px rgba(25,33,255,.5);
        }

        &:disabled {
            background: lighten($blue, 20);
            border:1px solid lighten($blue, 20);
            pointer-events: none;
            cursor: none;

            &:hover, &:focus {
                box-shadow: none;
                background: inherit;
            }
        }

    }

    &.blue-line {
        background: white;
        color:$blue;
        border:1px solid $blue;

        &:hover, &:focus {
            background: white;
        }

        &:focus {
            box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
        }

        &:disabled {
            background: lighten(white, 20);
            border:1px solid lighten($blue, 20);
            pointer-events: none;
            cursor: none;

            &:hover, &:focus {
                box-shadow: none;
                background: inherit;
            }
        }

    }

    &.danger {
        background: $red;
        color:white;
        border:1px solid $red;

        &:hover, &:focus {
            background: $red;
        }

        &:focus {
            box-shadow: 0 0 0 0.2rem rgba(245,29,108,.25);
        }

        &:disabled {
            background: lighten($red, 20);
            border:1px solid lighten($red, 20);
            pointer-events: none;
            cursor: none;

            &:hover, &:focus {
                box-shadow: none;
                background: inherit;
            }
        }

    }

    &.danger-line {
        background: white;
        color:$red;
        border:1px solid $red;

        &:hover, &:focus {
            background: white;
        }

        &:focus {
            box-shadow: 0 0 0 0.2rem rgba(245,29,108,.25);
        }

        &:disabled {
            background: lighten(white, 20);
            border:1px solid lighten($red, 20);
            pointer-events: none;
            cursor: none;

            &:hover, &:focus {
                box-shadow: none;
                background: inherit;
            }
        }

    }

    &.black {
        background: black;
        color:white;
        border:1px solid black;

        &:hover, &:focus {
            background: black;
        }

        &:focus {
            box-shadow: 0 0 0 0.2rem rgba(0,0,0,.25);
        }

        &:disabled {
            background: lighten(black, 20);
            border:1px solid lighten(black, 20);
            pointer-events: none;
            cursor: none;

            &:hover, &:focus {
                box-shadow: none;
                background: inherit;
            }
        }

    }

    &.black-line {
        background: white;
        color:black;
        border:1px solid black;

        &:hover, &:focus {
            background: white;
        }

        &:focus {
            box-shadow: 0 0 0 0.2rem rgba(0,0,0,.25);
        }

        &:disabled {
            background: lighten(white, 20);
            color:lighten(black, 50);
            border:1px solid lighten(black, 80);
            pointer-events: none;
            cursor: none;

            &:hover, &:focus {
                box-shadow: none;
                background: inherit;
            }
        }

    }

    &.custom {
        background: #375a7f;
        color:white;
        border:1px solid #375a7f;

        &:hover, &:focus {
            background: #375a7f;
        }

        &:focus {
            box-shadow: none;
        }

        &:disabled {
            background: lighten(#375a7f, 20);
            border:1px solid lighten(#375a7f, 20);
            pointer-events: none;
            cursor: none;

            &:hover, &:focus {
                box-shadow: none;
                background: inherit;
            }
        }

    }

    &.custom-line {
        background: white;
        color:#375a7f;
        border:1px solid #375a7f;

        &:hover, &:focus {
            background: white;
        }

        &:focus {
            box-shadow: none;
        }

        &:disabled {
            background: lighten(white, 30%);
            border:1px solid lighten(#375a7f, 30%);
            color: lighten(#375a7f, 30%);
            pointer-events: none;
            cursor: none;

            &:hover, &:focus {
                box-shadow: none;
                background: inherit;
            }
        }

    }

    &.sap {
        background: #F8F8F8;
        color:#719FCA;
        border:1px solid #c5c5c5;

        &:hover, &:focus {
            background: #F8F8F8;
            @include box-shadow(none);
            color: black
        }

        &:focus {
            box-shadow: none;
        }

        &:disabled {
            background: lighten(#F8F8F8, 20);
            border:1px solid lighten(#F8F8F8, 20);
            pointer-events: none;
            cursor: none;

            &:hover, &:focus {
                box-shadow: none;
                background: inherit;
            }
        }

    }

}

.btn.btn-default {
    display:inline-flex;
    text-align:center;
    width:auto;
    position:relative;
    @include transition(0.2s all ease);
    @include border-radius(4px);
    background: white;
    color:#738BA0;
    font-family: 'Roboto', sans-serif;
    border:1px solid #c5c5c5;
    padding: 0 10px;
    align-items: center !important;
    justify-content: center;
    cursor: pointer;
    height: 24px;
    font-size: 12px;
    padding-top: 2px;

    .caret {
        transform: rotate(-45deg);
        margin-left: 4px;
        position: absolute;
        right: 2px;
        bottom: 3px;
    }

    &:focus {
        box-shadow: none !important;
    }

    &:disabled {
        background: darken(#FFF, 3%);
        border:1px solid lighten(#c5c5c5, 5%);
        pointer-events: none;
        cursor: none;
        color: darken(#738BA0, 5%);

        &:hover, &:focus {
            box-shadow: none;
            background: inherit;
        }
    }

    i {
        font-size: 20px !important;
        position: relative;
        margin-right: 10px;
        margin-left: 10px;
    }

    &:hover, &:focus {
        //box-shadow: 0 2px 10px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.1);
        background: white;
    }

    &:focus {
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
    }

    &.bold {
        font-weight: bold;
    }

    &.uppercase {
        text-transform:uppercase;
    }

}

.upload-btn-wrapper {
    border: 1px solid #B4BBD0;
    color: #B4BBD0;
    background-color: white;
    padding: 8px 20px;
    @include border-radius(3px);
    font-size: 20px;
    font-weight: bold;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    position: relative;

    svg {
        font-size: 60px;
    }

    .select-type {
        display: none;
        position: absolute;
        left: 0;
        top: 0;
        background: rgba(255,255,255,.7);
        width: 100%;
        height: 100%;
        //display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        flex-direction: column;
        padding: 20px;

        svg {
            font-size: 40px;
            color: $red;
            margin: 0 15px;
        }
    }

    &:hover {
        .select-type {
            display: flex;
        }
    }

    label.photo-label, button.camera-photo{
        font-size:14px;
        display:inline-flex;
        text-align:center;
        width:100%;
        height: 50px;
        position:relative;
        @include transition(0.2s all ease);
        @include border-radius(4px);
        background: white;
        color:$blue;
        font-family: 'Roboto', sans-serif;
        border:1px solid $blue;
        padding: 0 10px;
        align-items: center !important;
        justify-content: center;
        cursor: pointer;
        margin: 10px;

        &:hover {
            color: white;
            background: $blue;
        }
    }



    input[type="file"] {
        display: none;
    }


}

.camera-back {
    position: fixed;
    left:0;
    top: 0;
    z-index: 20;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.8);
    display: flex;
    align-items: center;
    justify-content: center;

    .camera-wrapper {
        position: relative;
        background: white;
        width: 610px;
        height: 460px;
        padding: 5px;
        @include border-radius(3px);

        .shot-button {
            position: absolute;
            bottom: 20px;
            border: 2px solid white;
            width: 60px;
            height: 60px;
            left: 50%;
            margin-left: -30px;
            @include border-radius(100%);
            cursor: pointer;
            z-index: 3;

            &:after {
                content: '';
                width: 50px;
                height: 50px;
                position: absolute;
                left: 3px;
                top: 3px;
                background: white;
                @include border-radius(100%);
            }
        }
    }
}

.select-photo-wrapper {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
        width: 100%;
        max-width: 100%;
        max-height: 100%;
    }

    .select-type {
        display: none;
        position: absolute;
        left: 0;
        top: 0;
        background: rgba(255,255,255,.7);
        width: 100%;
        height: 100%;
        //display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        flex-direction: column;
        padding: 20px;

        svg {
            font-size: 40px;
            color: $red;
            margin: 0 15px;
        }
    }

    &:hover {
        .select-type {
            display: flex;
        }
    }
}*/