html, body {
    font-family: 'Roboto', 'Helvetica', sans-serif !important;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #323232;
    background-color: #424242;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

.ID-btn {
    font-size: 13px;
    color: #fff;
    text-transform: none;
    height: 40px;
    padding-left: 15px;
}
.ID-btn > i {
    margin-left: 5px;
    position: relative;
    top: 7px;
}
.page-content {
    text-align:center;
    overflow:hidden;
}
.img-responsive {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}
.img-container {
    margin: 0 auto;
    max-width:calc(100% - 100px);
    display:inline-block;
    background-color: #424242;
    position: relative;
}
.mdl-layout__header-row {
    padding: 0 48px;
}

.fab-icn {
    position: absolute;
    right: 50px;
    top: 95px;
    background: #4bae4f !important;
}
.fab-icn > i {
    color: #fff;
}
.fab-text {
    position: absolute;
    top: 30px;
    right: 50px;
    background-color: #4bae4f !important;
    border: 1px solid #fff;
    padding: 4px 20px 4px 15px;
    height: inherit;
    text-transform: none;
}
.fab-text > i {
    margin-right: 10px;
    position: relative;
    top: 6px;
}

.before-pageload {
    position: fixed;
    overflow: auto;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.6);
    z-index: 9;
    width: 100%;
    height: 100%;
}

.page-loader {
    background: #f2f2f2;
    position: relative;
    z-index: 10;
    color: #fff;
    border-radius: 4px;
    min-height: 200px;
    max-width: 600px;
    width: 100%;
    margin: 50px auto;
}
.cycles_help-outer {
    max-width: 800px;
    margin: 50px auto;
}
.cycles_password {
    padding: 30px 50px;
    border-radius: 5px;
    background-color: #f2f2f2;
    text-align: left;
}
.cycles_password > h5 {
    color: #323232;
}
.cycles_step01 .loader-p1,  .cycles_step01 .loader-p3{
    padding-top: 70px;
    padding-bottom: 10px;
}
.loader-p1 {
    min-height: 170px;
    background-color: #f2f2f2;
    text-align: center;
    position: relative;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.loader-p1 > h3 {
    color: #323232;
    font-weight: 700;
}

.loader-p1 > h5 {
    font-weight: 400;
    margin-top: 10px;
    color: #323232;
}

.loader-p3 {
    min-height: 170px;
    background-color: #f2f2f2;
    text-align: center;
    position: relative;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.loader-p3 > h3 {
    color: #323232;
    font-weight: 700;
}

.loader-p3 > h5 {
    font-weight: 400;
    margin-top: 10px;
    color: #323232;
}

.loader-p3 .material-icons{
    font-size: 60px;
    color: rgb(33, 150, 243);
}


.loader-dismiss01 {
    position: absolute;
    top: 8px;
    right: 8px;
    color: #323232;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
}
.loader-dismiss01:hover {
    filter: alpha(opacity=50);
    opacity: .5;
}
.cycles_notes {
    text-align: left;
    padding: 5px 30px 15px 15px;
}
.cycles_notes > a {
    right: -19px;
}
.cycles_notes > h4 {
    color: #323232;
    font-weight: 700;
}
.cycles_notes > h6 {
    color: #323232;
    font-weight: 700;
    margin-bottom: 0;
}
.cycles_notes > p {
    color: #323232;
    margin-bottom: 0;
}
.cycles_notes > ul {
    color: #323232;
    margin-bottom: 40px;
    margin-top: 0;
}
.loader-dismiss02 {
    /*background-color: #1973CE !important;*/
    color: #fff !important;
    /* margin-top: 50px; */
}

.cycles_help {
    text-align: left;
    padding: 5px 30px 15px 15px;
}
.cycles_help > a {
    right: -19px;
}
.cycles_help > h4 {
    color: #323232;
    font-weight: 700;
}
.cycles_help > p {
    color: #323232;
    margin-bottom: 0;
}

.loader-p2 {
    min-height: 100px;
    background-color: #4CAF50;
    padding: 5px 30px 30px;
    text-align: center;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
.loader-p2 > h4 {
    font-weight: 700;
    margin-bottom: 0;
}
.loader-p2 > h5 {
    font-weight: 400;
    margin-top: 10px;
}
.loader-p2 > h6 {
    margin-top: 10px;
    font-weight: 400;
    line-height: 20px;
}

.loader-img {
    margin: 0 auto;
}

.mdl-cell > h6 {
    color: #323232;
    font-weight: 700;
    margin-bottom: 0;
    margin-top: 0;
    padding-right: 20px;
}
.mdl-cell > p {
    color: #323232;
    padding-right: 20px;
}
.mdl-cell > p > a {
    color: rgb(33,150,243);
    font-weight: 700;
}
.one-edge-shadow {
    -webkit-box-shadow: 0 11px 11px -6px rgba(0,0,0,.2);
    -moz-box-shadow: 0 11px 11px -6px rgba(0,0,0,.2);
    box-shadow: 0 11px 11px -6px rgba(0,0,0,.2);
}
.cycles_feedback {
    text-align: left;
    padding: 5px 30px 15px 15px;
}
.cycles_feedback > a {
    right: -19px;
}
.cycles_feedback > h4 {
    color: #323232;
    font-weight: 700;
}
.cycles_feedback > h6 {
    color: #323232;
    font-weight: 700;
    margin-bottom: 10px;
}
.cycles_feedback > p {
    color: #323232;
}
.loader-dismiss03 {
    margin-top: 20px;
}

.mdl-checkbox__label {
    color: #323232;
    font-size: 14px;
}

.error {
    color: #F44336 !important;
}
.error-border {
    border-color: #F44336 !important;
}
.error-text {
    font-size: 12px !important;
    margin-bottom: 0 !important;
    margin-top: -2px;
    position: absolute;
    left: 0;
}
.cycles_approve, .cycles_approve_confirm {
    text-align: left;
    padding: 5px 30px 15px 15px;
}
.cycles_approve > a, .cycles_approve_confirm > a {
    right: -19px;
}
.cycles_approve > h4{
    color: #323232;
    font-weight: 700;
}
.cycles_approve > h6 {
    color: #323232;
    font-weight: 700;
    margin-bottom: 10px;
}
.cycles_approve > ul {
    color: #323232;
}

.cycles_approve_confirm {
    text-align: center;
}

.cycles_approve_confirm  h4 {
    color: #323232;
    font-weight: 700;
}

.mdl-textfield__input {
    color: #323232;
}
.cycles_approve > p {
    color: #323232;
}
.cycles_approve > form > button {
    color: #fff !important;
    margin-top: 20px;
}
.approve-border {
    border-bottom: 1px solid #323232;
}

.cycles_feedbackform {
    position: absolute;
}

.feedback-bullet {
    height: 40px !important;
    min-width: 40px !important;
    width: 40px !important;
    line-height: 38px;
    font-size: 18px;
    border: 2px solid #fff;
    text-align: center;
    box-shadow: 0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.2) !important;
    z-index: 50;
}

/*.dot .material-icons{
    visibility: hidden;
    opacity: 0;

}  */

/*.dot .material-icons.active{
   visibility: visible;
   opacity: 1;
}  */

.dot {
    -webkit-transition: all 300ms bouncify;
    -moz-transition: all 300ms bouncify;
    -o-transition: all 300ms bouncify;
    transition: all 300ms bouncify;

    transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
    transition-duration: 2.9s;
}

.dot_content {
    width:auto !important;
    height:auto !important;
}
.dot_content .cycle_box {
    position:absolute;
    text-align:left;
    top:-20px;
}
.dot_content.invert-horizontal .cycle_box {
    left:-360px;
}

.dot_content.invert-horizontal .cycle_box .arrow-left {
    left:auto;
    right:-8px;

    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0 8px 8px;
    border-color: transparent transparent transparent #ffffff;

}

.dot_content.invert-vertical-top .cycle_box {
    top:0;
}

.dot_content.invert-vertical-top .cycle_box .arrow-left {
    top:13px;
}

.dot_content.invert-vertical-bottom .cycle_box {
    top:auto;
    bottom:0;
}

.dot_content.invert-vertical-bottom .cycle_box .arrow-left {
    top:auto;
    bottom:13px;
}

/*.dot_content.ui-draggable-dragging .cycle_box {
    opacity:0;
}*/

.cycle_box {
    max-width: 320px;
    min-width: 320px;
    padding: 16px 15px 15px;
    position: relative;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.2);
    top: -63px;
    left: 50px;
    z-index:100;

    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}

.cycle_box .action-btns {
    position: absolute;
    right: 10px;
    top: 10px;
}
.action-btns .feedback-edit {
    visibility: hidden;
}
.action-btns .feedback-delete {
    visibility: hidden;
}
.cycle_box:hover .feedback-edit {
    visibility: visible;
}
.cycle_box:hover .feedback-delete {
    visibility: visible;
}
.action-btns button {
    color: #323232;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
}
.action-btns button:hover {
    filter: alpha(opacity=50);
    opacity: .5;
}
.name {
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    float: left;
    word-break: break-all;
    margin-right: 20px;
}
.date {
    font-weight: 300;
    font-size: 16px;
    line-height: 22px;
    color: #989898;
}
.feedback {
    line-height: 1.3;
    color: #727272;
    margin-bottom: 0;
}
.feedback-confirm {
    padding-top: 20px;
}
.feedback-cancel {
    color: #b1b1b1;
    text-decoration: none;
    text-transform: uppercase;
}
.arrow-left {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #fff;
    position: absolute;
    left: -8px;
    top: 35px;

    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
.counter {
    font-size: 12px;
    position: absolute;
    right: 115px;
    color: #b1b1b1;
    bottom: -2px;
}

.counter01 {
    position: absolute;
    font-size: 12px;
    right: 0;
    color: #b1b1b1;
    bottom: -2px;
}

.feedback-confirm-box {
    background-color: #fff;
    padding: 30px 45px 0;
    position: relative;
    z-index: 9;
    top: -15px;
}
.feedback-confirm-box > h5 {
    color: #424242;
    text-align: center;
    font-weight: 400;
    margin-bottom: 20px;
    margin-top: 25px;
    line-height: 24px;
    font-size: 18px;
}
.feedback-confirm-box > button {
    position: absolute;
    right: -6px;
    top: 8px;
    color: #323232;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
}
.feedback-confirm-box > button:hover {
    filter: alpha(opacity=50);
    opacity: .5;
}

.mdl-button--red {
    background: #F44336;
}

.mdl-button--raised.mdl-button--colored.mdl-button--green {
    background-color: #4bae4f;
}
.mdl-button--green-disabled {
    background-color: #ddd !important;
    color: #a4a4a4 !important;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12) !important;
    cursor: not-allowed;
}
.mdl-layout__header-row > i {
    color: #a9a9a9;
    margin: 0 15px;
}
.help {
    margin-left: 10px;
}
.r21 {
    right: -21px;
}
.mdl-spinner {
    height: 50px;
    width: 50px;
}

.dot_spinner{
    height: 44px;
    left: -2px;
    position: absolute;
    top: -2px;
    width: 44px;
    z-index: 20;
}

.margin-l15 {
    margin-left: 15px;
}

.mdl-textfield {
    max-width: 380px;
    width: 100%;
}
.textfield-autogrow {
    padding: 20px 0 16px;
}

._error-boxAP span.mdl-checkbox__box-outline{
    border-color: #F44336;
}
.mdl-layout__drawer-button {
    display: none;
}
.mdl-layout__header {
    background-color: #424242;
    box-shadow: none;
}
@media screen and (max-width: 850px){
    .mdl-layout__drawer-button {
        display: block;
    }
}

.feedback-complete-box, .approve-complete-box {
    position: absolute;
    background-color: #424242;
    padding: 10px;
    border-radius: 4px;
    font-size: 12px;
    color: #fff;
    right: 78px;
    top: 67px;
    max-width: 125px;
    text-align: center;
}

.feedback-text-new {
    color: #4bae4f;
    padding-top: 16px;
    font-size: 16px;
    font-weight: 500;
}
.mdl-menu__item a {
    color: #424242;
    text-decoration: none;
}

.feed-line01 {
    max-width: 250px;
}

.feedback-delete01 {
    color: #323232;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
    float: right;
}
.feedback-delete01:hover {
    filter: alpha(opacity=50);
    opacity: .5;
}

.cycles-help_button {
    margin-right: 40px;
}

.cycles-feedback_button {
    margin-right: 30px;
}
.fab-01 {
    padding: 0 15px;
}
.cycles-feedback_button button, .cycles-help_button button {
    color: #fff;
    text-transform: capitalize;
    /*border: 1px solid #424242;*/
    padding: 0 10px;
    position: relative;
    top: 2px;
}
.cycles-feedback_button span, .cycles-help_button span {
    position: relative;
    top: -3px;
}
.cycles-feedback_button button:hover, .cycles-help_button button:hover {
    background-color: transparent;
    /*border: 1px solid #fff;*/
    color: #fff;
}

.cycles-feedback_button i, .cycles-help_button i {
    position: relative;
    top: 5px;
    margin-right: 4px;
}

.comments-counter {
    position: absolute;
    color: #424242;
    top: -2px;
    left: 13px;
    width: 18px;
    text-align: center;
    font-size: 10px;
}

.in-progress-btn i{
    color: #2196f3;
    position: relative;
    top: 6px;
    margin-right: 6px;
}
.in-progress-btn {
    text-transform: capitalize;
    color: #fff;
    padding: 0;
    position: relative;
    top: -4px;
}
.in-progress-btn:hover {
    cursor: default;
    background-color: transparent;
}
.approved-btn i {
    color: #4bae4f;
}

/* select field mdl */

.mdl-selectfield {
    position: relative;
    font-size: 16px;
    display: inline-block;
    box-sizing: border-box;
    width: 300px;
    max-width: 100%;
    margin: 0;
    padding: 20px 0
}
.mdl-selectfield .mdl-button {
    position: absolute;
    bottom: 20px
}
.mdl-selectfield--align-right {
    text-align: right
}
.mdl-selectfield--full-width {
    width: 100%
}
.mdl-selectfield__select {
    display: block;
    width: 100%;
    padding: 4px 0;
    margin: 0;
    color: inherit;
    background: 0 0;
    font-size: 16px;
    text-align: left;
    color: inherit;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}
.mdl-selectfield.is-focused .mdl-selectfield__select {
    outline: none
}
.mdl-selectfield.is-invalid .mdl-selectfield__select {
    border-color: rgb(222, 50, 38);
    box-shadow: none
}
fieldset[disabled] .mdl-selectfield .mdl-selectfield__select,
.mdl-selectfield.is-disabled .mdl-selectfield__select {
    background-color: transparent;
    border-bottom: 1px dotted rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.26)
}
.mdl-selectfield__label {
    bottom: 0;
    color: rgba(0, 0, 0, 0.26);
    font-size: 16px;
    left: 0;
    right: 0;
    pointer-events: none;
    position: absolute;
    display: block;
    top: 24px;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-align: left
}
.mdl-selectfield.is-dirty .mdl-selectfield__label {
    visibility: hidden
}
.mdl-selectfield--floating-label .mdl-selectfield__label {
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}
fieldset[disabled] .mdl-selectfield .mdl-selectfield__label,
.mdl-selectfield.is-disabled.is-disabled .mdl-selectfield__label {
    color: rgba(0, 0, 0, 0.26)
}
.mdl-selectfield--floating-label.is-focused .mdl-selectfield__label,
.mdl-selectfield--floating-label.is-dirty .mdl-selectfield__label {
    color: rgb(33, 150, 243);
    font-size: 12px;
    top: 4px;
    visibility: visible
}
.mdl-selectfield--floating-label.is-focused .mdl-selectfield__expandable-holder .mdl-selectfield__label,
.mdl-selectfield--floating-label.is-dirty .mdl-selectfield__expandable-holder .mdl-selectfield__label {
    top: -16px
}
.mdl-selectfield--floating-label.is-invalid .mdl-selectfield__label {
    color: rgb(222, 50, 38);
    font-size: 12px
}
.mdl-selectfield__label:after {
    background-color: rgb(33, 150, 243);
    bottom: 20px;
    content: '';
    height: 2px;
    left: 45%;
    position: absolute;
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    visibility: hidden;
    width: 10px
}
.mdl-selectfield.is-focused .mdl-selectfield__label:after {
    left: 0;
    visibility: visible;
    width: 100%
}
.mdl-selectfield.is-invalid .mdl-selectfield__label:after {
    background-color: rgb(222, 50, 38)
}
.mdl-selectfield__error {
    color: rgb(222, 50, 38);
    position: absolute;
    font-size: 12px;
    margin-top: 3px;
    visibility: hidden;
    display: block
}
.mdl-selectfield.is-invalid .mdl-selectfield__error {
    visibility: visible
}