@font-face {
    font-family: 'Josefin Sans';
    src: local('Josefin Sans'), url('https://saskteladvisorygroup.insightrix.com/fonts/JosefinSans-VariableFont_wght.ttf') format('truetype');
}

@font-face {
    font-family: 'Outfit';
    src: local('Outfit'), url('https://saskteladvisorygroup.insightrix.com/fonts/Outfit-VariableFont_wght.ttf') format('truetype');
}
@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans'), url('https://saskteladvisorygroup.insightrix.com/fonts/OpenSans-VariableFont_wdth,wght.ttf') format('truetype');
}
@font-face {
    font-family: 'Inter';
    src: local('Inter'), url('https://saskteladvisorygroup.insightrix.com/fonts/Inter-VariableFont_slnt,wght.ttf') format('truetype');
}
@font-face {
    font-family: 'Raleway';
    src: local('Raleway'), url('https://saskteladvisorygroup.insightrix.com/fonts/Raleway-VariableFont_wght.ttf') format('truetype');
}
@font-face {
    font-family: 'Comic Neue';
    src: local('Comic Neue'), url('https://saskteladvisorygroup.insightrix.com/fonts/ComicNeue-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Lato';
    src: local('Lato'), url('https://saskteladvisorygroup.insightrix.com/fonts/Lato-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Alice';
    src: local('Alice'), url('https://saskteladvisorygroup.insightrix.com/fonts/Alice-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Roboto';
    src: local('Roboto'), url('https://saskteladvisorygroup.insightrix.com/fonts/Roboto-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Arimo';
    src: local('Arimo'), url('https://saskteladvisorygroup.insightrix.com/fonts/Arimo-VariableFont_wght.ttf') format('truetype');
}
@font-face {
    font-family: 'Ahamono';
    src: local('Ahamono'), url('https://saskteladvisorygroup.insightrix.com/fonts/Ahamono.otf') format('truetype');
}



:root {
    --color-0: #007ac2;
    --color-1: #333333;
    --color-2: #007ac2;
    --color-3: #ffffff;
    --color-4: #001a29;
    --color-5: #29b0ff;
    --color-mainTheme: #007ac2;
    --color-7: #333333;
    --color-buttons: #007ac2;
    --color-9: #ffffff;
    --color-10: #001a29;
    --color-11: #29b0ff;
    --color-primary: #2aa9e0;
    --color-primary-hover: #2797c8;

    --color-secondary: #707070;
    --color-secondary-hover: #313131;

    --color-error: #BD243D;
    --color-error-hover: #951D31;

    --color-warning: #F2A252;
    --color-warning-hover: #CC8A47;

    --color-success: #5CB85C;
    --color-success-hover: #48A248;
    --color-border: #DEDEDF;
    --color-background-outline-hover: #F9F9F9;
    --font-family: Roboto;
    --font-size:14;
}

.tileDiv {
    background: #fff;
    background-size: cover;
    background-position: center;
    color: black;
    height: 310px;
    text-align: left;
}

.tileDiv img {
    margin-top: 5px;
    display: inline-block;
    max-width: 50%;
    height: 125px;
}

.tileTitleDiv {
    background: rgba(0, 0, 0, 0.8);
    padding: 0px 5px;
    height: 60px;
    display: flex;
    margin-top: 252px;
    color: white;
    text-align: left;
}

.tileTitleDiv h4 {
    margin: auto;
    font-size: 16px;
}

.eyeSlashWidth {
    width: calc(100% - 55px);
}

#tileSection .slick-prev:before, #tileSection .slick-next:before {
    font-size: 50px;
    line-height: 1.35;
    color: #F03B39;
    opacity: 1;
}

#tileSection .slick-prev, #tileSection .slick-next {
    z-index: 1;
    width: 50px;
    height: 60px;
    cursor: pointer;
}

#tileSection .slick-prev {
    left: 0px;
}

#tileSection .slick-dots li button:before {
    font-size: 7px;
}

.slick-dots li.slick-active button:before {
    opacity: 1;
    color: black;
}

#tileSection .slick-next {
    right: 0px;
}

#tileSection .slick-dots li {
    margin: 0 3px;
}

#quickSelectDiv {
    display: flex;
}

#quickSelectDiv #quickSelectUI {
    width: calc(100% - 130px);
    display: inline-block;
}

#quickSelectDiv .ui-select-bootstrap > .ui-select-choices, #quickSelectDiv .ui-select-bootstrap > .ui-select-no-choice {
    top: auto !important;
    z-index: 10;
}

.tileDiv .tooltip-inner {
    white-space: pre-line;
}

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 600;
    src: local('Raleway SemiBold'), local('Raleway-SemiBold'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptrg8zYS_SKggPNwPIsWqZPAA.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 900;
    src: local('Raleway Black'), local('Raleway-Black'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptrg8zYS_SKggPNwK4vWqZPAA.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Special instance of the angularjs-loader class for splash screens.
* This overrides angularjs-loader when called after.
*/
.angularjs-loader-splash {
    background-color: #ffffff;
    color: #000000;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 100000 !important;
    text-align: center !important;
    font-size: 35px !important;
    overflow: hidden !important;
    padding: 15% 0% !important;
    pointer-events: none !important;
}

/* spinkit loader */
.angularjs-loader {
    background-color: #007ac2;
    color: #ffffff;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 100000 !important;
    text-align: center !important;
    font-size: 35px !important;
    overflow: hidden !important;
    padding: 15% 0% !important;
    pointer-events: none !important;
}

a.surveylinks:hover {
    color: #f2f2f2;
    cursor: pointer;
}

a:hover, .wizardHeader h2.handCurson:hover {
    color: #007ac2;
    cursor: pointer;
}

.bigAndBold {
    font-size: 24px;
    font-weight: bold;
}

.discussions.cropArea {
    height: 500px;
}

.cropArea {
    background: #E4E4E4;
    overflow: hidden;
}

.newsContent {
    position: relative;
    height: 0;
    overflow: hidden;
}

/* 16x9 Aspect Ratio */
.newsContent-16x9 {
    padding-bottom: 56.25%;
}

/* 4x3 Aspect Ratio */
.newsContent-4x3 {
    padding-bottom: 75%;
}

.newsContent iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #e4e4e4;
}

html.no-js.SiteClient {
    min-height: 100%;
    position: relative;
}

html.no-js.Site {
    min-height: 100%;
    height: 100%;
    position: relative;
}
html.no-js {
overflow: hidden;
}
body {
    min-height: 100%;
    height: 100%;
    min-width: 100%;
    width: 100%;
    padding-right: 0px !important;
    font-family: 'Roboto';
    font-size: 14px;
}

.Site a:focus, Site a:hover {
    text-decoration: none !important;
}

.Site .collapsing {
    transition: height 0.6s;
}

body.Site {
    background: white;
    -webkit-font-smoothing: antialiased;
    color: black;
    line-height: 1.5;
    font-family: 'Roboto';
    font-size: 14;
}

.loginDiv {
    height: 100vh;
    width: 100%;
}

.Site .full {
    color: white;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.addpointer[disabled]:hover {
    cursor: not-allowed;
}

.btn-link:focus, .btn-link:hover {
    color: #007ac2;
    text-decoration: underline;
    background-color: transparent;
}

.btn-link {
    font-weight: 400;
    color: #007ac2;
    border-radius: 0;
}

.timepicker .btn-link {
    color: black !important;
}

.btn-main {
    color: #ffffff !important;
    background-color: #007ac2 !important;
    border-color: #007ac2 !important;
}

.btn-mroc {
    color: #ffffff !important;
    background-color: #007ac2 !important;
    border-color: #007ac2 !important;
}

.btn-disabled {
    color: black;
    background-color: #b3dfff;
    border-color: #b3dfff;
    pointer-events: none;
}

.btn-holder {
    background: #ddd;
    text-align: right;
}

.btn-contrast {
    color: #007ac2 !important;
    background-color: #ffffff !important;
    border-color: #ffffff !important;
}

.btn-archive {
    color: white;
    background-color: #191919;
}

.btn-archive:hover, .btn-archive:active, .btn-archive:focus {
    color: white;
    background-color: black;
}

.btn-mroc:focus,
.btn-mroc:active,
.btn-mroc.active,
.open .dropdown-toggle.btn-mroc {
    color: #ffffff;
    background-color: #ffffff;
    border-color: #ffffff;
    outline: none;
}

.btn-mroc:hover {
    opacity: 0.8;
}

.btn-mroc:active,
.btn-mroc.active,
.open .dropdown-toggle.btn-mroc {
    background-image: none;
}

.btn-mroc.disabled,
.btn-mroc[disabled],
fieldset[disabled] .btn-mroc,
.btn-mroc.disabled:hover,
.btn-mroc[disabled]:hover,
fieldset[disabled] .btn-mroc:hover,
.btn-mroc.disabled:focus,
.btn-mroc[disabled]:focus,
fieldset[disabled] .btn-mroc:focus,
.btn-mroc.disabled:active,
.btn-mroc[disabled]:active,
fieldset[disabled] .btn-mroc:active,
.btn-mroc.disabled.active,
.btn-mroc[disabled].active,
fieldset[disabled] .btn-mroc.active {
    background-color: #ffffff;
}

.btn-mroc .badge {
    color: #ffffff;
    background-color: #007ac2;
}

#collapse-surveys ul li,
#collapse-discussions ul li,
#collapse-news ul li,
#collapse-rewards ul li,
#collapse-invite ul li {
    width: 100% !important;
}

a.postedby {
    color: #007ac2;
    font-size: 14px;
    text-decoration: underline;
}

i.fa.fa-comment.fa-commentdg {
    color: #007ac2;
    padding-bottom: 15px;
}

li.commentnumber {
    color: #007ac2;
}

li.timeposted {
    font-size: 12px;
}

.panel.panel-noborders .panel-footer {
    border: none;
    background-color: white;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.panel-plain {
    border: none !important;
    border-radius: 0;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.panel.panel-noborders {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.list-group .panel-body {
    display: inline-block;
    padding: 0;
}

.zeropadding {
    padding: 0 !important;
}

.zeromargin {
    margin: 0 !important;
}

ul.dropdown-menu.user-dropdown a {
    color: #ffffff;
}

ul.dropdown-menu.user-dropdown a:hover {
    color: black;
}

.navbar-nav .dropdown-menu,
{
    background-color: #292D30 !important;
    color: #ffffff;
}

img.navbar-logo {
    width: auto; /* you can use % */
    height: 42px;
    object-fit: contain;
}

.textareareply {
    background-color: white;
}

.form-control {
    color: black;
}

.row.flex {
    display: flex;
}

img {
    max-width: 100%;
    pointer-events: none
}

/* switches */
/* ============================================================
COMMON
============================================================ */
.cmn-toggle {
    position: absolute;
    margin-left: -9999px;
    visibility: hidden;
}

.cmn-toggle + label {
    display: block;
    position: relative;
    cursor: pointer;
    outline: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* ============================================================
SWITCH 3 - ROUND FLAT SMALL
============================================================ */
input.cmn-toggle-round-flat-small + label {
    padding: 2px;
    width: 90px;
    height: 45px;
    background-color: #dddddd;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    -o-border-radius: 60px;
    border-radius: 60px;
    -webkit-transition: background 0.4s;
    -moz-transition: background 0.4s;
    -o-transition: background 0.4s;
    transition: background 0.4s;
}

input.cmn-toggle-round-flat-small + label:before, input.cmn-toggle-round-flat-small + label:after {
    display: block;
    position: absolute;
    content: "";
}

input.cmn-toggle-round-flat-small + label:before {
    top: 2px;
    left: 2px;
    bottom: 2px;
    right: 2px;
    background-color: white;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    -o-border-radius: 60px;
    border-radius: 60px;
    -webkit-transition: background 0.4s;
    -moz-transition: background 0.4s;
    -o-transition: background 0.4s;
    transition: background 0.4s;
}

input.cmn-toggle-round-flat-small + label:after {
    top: 4px;
    left: 4px;
    bottom: 4px;
    width: 52px;
    background-color: #dddddd;
    -webkit-border-radius: 52px;
    -moz-border-radius: 52px;
    -ms-border-radius: 52px;
    -o-border-radius: 52px;
    border-radius: 52px;
    -webkit-transition: margin 0.4s, background 0.4s;
    -moz-transition: margin 0.4s, background 0.4s;
    -o-transition: margin 0.4s, background 0.4s;
    transition: margin 0.4s, background 0.4s;
}

input.cmn-toggle-round-flat-small:checked + label {
    background-color: #007ac2;
}

input.cmn-toggle-round-flat-small:checked + label:after {
    margin-left: 30px;
    background-color: #007ac2;
}


/* ============================================================
SWITCH 2 - ROUND FLAT
============================================================ */
input.cmn-toggle-round-flat + label {
    padding: 2px;
    width: 120px;
    height: 60px;
    background-color: #dddddd;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    -o-border-radius: 60px;
    border-radius: 60px;
    -webkit-transition: background 0.4s;
    -moz-transition: background 0.4s;
    -o-transition: background 0.4s;
    transition: background 0.4s;
}

input.cmn-toggle-round-flat + label:before, input.cmn-toggle-round-flat + label:after {
    display: block;
    position: absolute;
    content: "";
}

input.cmn-toggle-round-flat + label:before {
    top: 2px;
    left: 2px;
    bottom: 2px;
    right: 2px;
    background-color: white;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    -o-border-radius: 60px;
    border-radius: 60px;
    -webkit-transition: background 0.4s;
    -moz-transition: background 0.4s;
    -o-transition: background 0.4s;
    transition: background 0.4s;
}

input.cmn-toggle-round-flat + label:after {
    top: 4px;
    left: 4px;
    bottom: 4px;
    width: 52px;
    background-color: #dddddd;
    -webkit-border-radius: 52px;
    -moz-border-radius: 52px;
    -ms-border-radius: 52px;
    -o-border-radius: 52px;
    border-radius: 52px;
    -webkit-transition: margin 0.4s, background 0.4s;
    -moz-transition: margin 0.4s, background 0.4s;
    -o-transition: margin 0.4s, background 0.4s;
    transition: margin 0.4s, background 0.4s;
}

input.cmn-toggle-round-flat:checked + label {
    background-color: #007ac2;
}

input.cmn-toggle-round-flat:checked + label:after {
    margin-left: 60px;
    background-color: #007ac2;
}

/* ============================================================
SWITCH - ROUND
============================================================ */
input.cmn-toggle-round + label {
    padding: 2px;
    width: 120px;
    height: 60px;
    background-color: #dddddd;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    -o-border-radius: 60px;
    border-radius: 60px;
}

input.cmn-toggle-round + label:before, input.cmn-toggle-round + label:after {
    display: block;
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    content: "";
}

input.cmn-toggle-round + label:before {
    right: 1px;
    background-color: #f1f1f1;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    -o-border-radius: 60px;
    border-radius: 60px;
    -webkit-transition: background 0.4s;
    -moz-transition: background 0.4s;
    -o-transition: background 0.4s;
    transition: background 0.4s;
}

input.cmn-toggle-round + label:after {
    width: 58px;
    background-color: white;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    -webkit-transition: margin 0.4s;
    -moz-transition: margin 0.4s;
    -o-transition: margin 0.4s;
    transition: margin 0.4s;
}

input.cmn-toggle-round:checked + label:before {
    background-color: #007ac2;
}

input.cmn-toggle-round:checked + label:after {
    margin-left: 60px;
}


/* Round xs small toggle swith*/
input.cmn-toggle-round-flat-xs + label {
    padding: 2px;
    width: 30px;
    height: 15px;
    background-color: #dddddd;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    -o-border-radius: 60px;
    border-radius: 60px;
    -webkit-transition: background 0.4s;
    -moz-transition: background 0.4s;
    -o-transition: background 0.4s;
    transition: background 0.4s;
}

input.cmn-toggle-round-flat-xs + label:before, input.cmn-toggle-round-flat-xs + label:after {
    display: block;
    position: absolute;
    content: "";
}

input.cmn-toggle-round-flat-xs + label:before {
    top: 2px;
    left: 2px;
    bottom: 2px;
    right: 2px;
    background-color: white;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    -o-border-radius: 60px;
    border-radius: 60px;
    -webkit-transition: background 0.4s;
    -moz-transition: background 0.4s;
    -o-transition: background 0.4s;
    transition: background 0.4s;
}

input.cmn-toggle-round-flat-xs + label:after {
    top: 4px;
    left: 4px;
    bottom: 4px;
    width: 10px;
    background-color: #dddddd;
    -webkit-border-radius: 52px;
    -moz-border-radius: 52px;
    -ms-border-radius: 52px;
    -o-border-radius: 52px;
    border-radius: 52px;
    -webkit-transition: margin 0.4s, background 0.4s;
    -moz-transition: margin 0.4s, background 0.4s;
    -o-transition: margin 0.4s, background 0.4s;
    transition: margin 0.4s, background 0.4s;
}

input.cmn-toggle-round-flat-xs:checked + label {
    background-color: #2aa9e0;
}

input.cmn-toggle-round-flat-xs:checked + label:after {
    margin-left: 11px;
    background-color: #2aa9e0;
}


/* End of round xs small toggle swith*/
.inline-border-top {
    border-top: 1px solid #ccc;
    padding-top: 15px;
}

/* settings switches */
.col-md-12.switch-holder {
    margin-bottom: 20px;
}

.col-md-12.switch-holder .row {
    display: table-row;
}

.col-md-12.switch-holder .row {
    display: table-row;
}

.col-md-12.switch-holder .question, .col-xs-12.col-sm-12.col-md-12.switch-holder.switch {
    display: table-cell;
    vertical-align: middle;
}

.col-md-12.switch-holder .question {
    width: 80%;
    color: black;
    font-weight: 600;
}

.full-width {
    width: 100%;
}

/*######################### cards and modals #####################*/
.card .card-height-indicator {
    margin-top: 100%;
}

.card .card-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.card .card-image {
    height: 60%;
    position: relative;
    overflow: hidden;
}

.card .card-image img {
    width: 100%;
    height: 100%;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    pointer-events: none;
}

.card .card-image .card-image-headline {
    position: absolute;
    bottom: 16px;
    left: 18px;
    color: white;
    font-size: 2em;
}

.card .card-body {
    height: 30%;
    padding: 18px;
}

.card .card-footer {
    height: 10%;
    padding: 18px;
}

.card .card-footer button {
    margin: 0 !important;
    position: relative;
    bottom: 25px;
    width: auto;
}

.card .card-footer button:first-child {
    left: -15px;
}

.modal-content {
    -webkit-box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
    box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
    border-radius: 0;
    border: 3px solid white;
}

.modal-content .modal-header {
    border-bottom: none;
    padding-top: 24px;
    padding-right: 24px;
    padding-bottom: 0;
    padding-left: 24px;
}

.modal-content .modal-body {
    padding-top: 24px;
    padding-right: 24px;
    padding-bottom: 16px;
    padding-left: 24px;
}

.modal-content .modal-footer {
    border-top: none;
    padding: 7px;
}

.modal-content .modal-footer button {
    margin: 0;
    padding-left: 16px;
    padding-right: 16px;
    width: auto;
}

.modal-content .modal-footer button.pull-left {
    padding-left: 5px;
    padding-right: 5px;
    position: relative;
    left: -5px;
}

.modal-content .modal-footer button + button {
    margin-bottom: 16px;
}

.modal-content .modal-body + .modal-footer {
    padding-top: 0;
}

/* login modal */

.login-title {
    margin: 10px;
    text-align: center;
    font-size: 24px;
}

.login-modal-client-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.login-modal-client-logo img {
    width: 100%;
    max-width: 250px;
}

.modal-body.inline.mroc-primary-background.clearfix {
    padding-top: 0px;
}

/*######################### blockquote #####################*/
.blockquote-box {
    border-right: 5px solid #E6E6E6;
    margin-bottom: 25px;
    -moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    padding-left: 5px;
    background-color: white;
}

.blockquote-box .square {
    width: 100px;
    min-height: 50px;
    margin-right: 22px;
    text-align: center !important;
    background-color: #E6E6E6;
    padding: 20px 0;
}

.blockquote-box.blockquote-primary {
    border-color: #357EBD;
}

.blockquote-box.blockquote-primary .square {
    background-color: #428BCA;
    color: white;
}

.blockquote-box.blockquote-success {
    border-color: #4CAE4C;
}

.blockquote-box.blockquote-success .square {
    background-color: #5CB85C;
    color: white;
}

.blockquote-box.blockquote-info {
    border-color: #46B8DA;
}

.blockquote-box.blockquote-info .square {
    background-color: #5BC0DE;
    color: white;
}

.blockquote-box.blockquote-warning {
    border-color: #EEA236;
}

.blockquote-box.blockquote-warning .square {
    background-color: #F0AD4E;
    color: white;
}

.blockquote-box.blockquote-danger {
    border-color: #D43F3A;
}

.blockquote-box.blockquote-danger .square {
    background-color: #D9534F;
    color: white;
}

.blockquote-box.blockquote-referral {
    border-color: #3276B1;
}

.blockquote-box.blockquote-referral .square {
    background-color: #3276B1;
    color: white;
}

.blockquote-box.blockquote-facebook {
    border-color: #3b5999;
}

.blockquote-box.blockquote-facebook .square {
    background-color: #3b5999;
    color: white;
}

.blockquote-box.blockquote-twitter {
    border-color: #55ACEE;
}

.blockquote-box.blockquote-twitter .square {
    background-color: #55ACEE;
    color: white;
}

.whiteborder {
    border: 1px solid white;
}

.about-padding {
    height: 10px;
}

.about-holder, .privacy-holder, .faq-holder, .terms-holder, .parents-holder {
    background-color: white;
    padding: 10px 20px 20px 20px;
    border: 1px solid #DDD;
    border-bottom-width: 2px;
}

.terms.pageholder h2 {
    line-height: 1.3;
    font-weight: 600;
    font-kerning: auto;
    text-rendering: optimizeLegibility;
}

h3.responsiveheading {
    line-height: 1.3;
    font-weight: 600;
    font-kerning: auto;
    text-rendering: optimizeLegibility;
}

/* privacy page */
ol.simple-list {
    list-style-type: none;
    margin: 0;
    margin-left: 3em;
    padding: 0;
    counter-reset: li-counter;
}

ol.simple-list > li {
    position: relative;
    margin-bottom: 20px;
    padding-left: 0.5em;
    min-height: 3em;
    border-left: 2px solid #CCCCCC;
}

ol.simple-list > li:before {
    position: absolute;
    top: 0;
    left: -1.3em;
    width: 0.8em;
    font-size: 3em;
    line-height: 1;
    font-weight: bold;
    text-align: right;
    color: black;
    content: counter(li-counter);
    counter-increment: li-counter;
}

/************************************************************************************************************************************************************/
/************************************************************************************************************************************************************/
/*************************************************************************Header*****************************************************************************/
/************************************************************************************************************************************************************/
i.indicator.glyphicon {
    color: black;
}

.Site .navbar {
    min-height: 80px;
}

.Site .navbar-main {
    background-color: white;
    border-width: 0;
    border-bottom: 1px solid #DADADA;
}

.Site .navbar-nav {
    background-color: white;
    border-width: 0;
    z-index: 5;
}

.Site .navbar-inverse .navbar-nav > li > a:focus, .Site .navbar-inverse .navbar-nav > li > a:hover {
    color: black;
    background-color: transparent;
}

.Site .navbar-inverse .navbar-toggle .icon-bar {
    background-color: white !important;
}

.Site .navbar-side-collapse {
    min-height: 60px;
}

.Site button.navbar-toggle {
    z-index: 100;
}

a#dropdownMainmenu {
    color: #007ac2;
}

a#dropdownMainmenu:hover,
a#dropdownMainmenu:focus {
    color: #54C56F;
}

.Site .navbar-brand {
    height: 62px;
}

.Site .navbar-nav .dropdown-menu {
    min-width: 180px;
}

.Site .navbar-nav .dropdown-menu {
    background-color: white;
    color: black;
}

.Site ul.nav.navbar-nav.navbar-right.usermenu {
    margin: 10px 0 0 0;
}

.Site span.cash-rewards.hidden-xs, .Site span.cash-rewards-amount.hidden-xs {
    display: inline-block !important;
}

.Site span.cash-rewards.hidden-xs:hover, .Site span.cash-rewards-amount.hidden-xs:hover {
/ / color: #007ac2;
}

.Site .list-group-item.sidebarlist-collapse.fullwidth > span.cash-rewards-amount.hidden-xs {
    color: white !important;
    border: 1px solid white !important;
}

.Site .cash-rewards-amount {
    border: 1px solid #C8C9CA;
    height: 25px;
    padding: 0px 5px 0px 5px;
    margin-left: 5px;
}

.Site .nav-tabs > li > a {
    margin-right: 0 !important;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    border-color: #f0f0f0;
    border-radius: 5px;
}

.Site i.indicator.glyphicon.glyphicon-chevron-down.visible-lg-inline-block.visible-md-inline-block {
    color: #808080;
}

ul.dropdown-menu.user-dropdown {
    width: 235px;
}

.Site .nav-user-photo {
    display: block;
    margin-right: auto;
    margin-left: auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-border-radius: 99em;
    -moz-border-radius: 99em;
    border-radius: 99em;
    border: 2px solid #eee;
    box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
    height: 40px;
    width: 40px;
}

.Site .nav-user-photo-discussion {
    width: auto;
    max-height: 115px;
    max-width: 100%;
}

.Site .btn.btn-mroc.post-discussion.look-disabled {
    opacity: .5;
}

.Site .replybuttongroup {
    padding: 5px;
    border-radius: 4px;
    background-color: #f1f1f1;
}

.Site .replybuttongroup .btn:not(.btn-modtool) {
    padding: 5px;
}

.replyToPostDiv {
    height: 21px;
    margin: 0 5px 5px 0;
    font-size: 14px;
    text-align: right;
}

.Site .nav-user-photo-profile {
    display: block;
    margin: 1em auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-border-radius: 99em;
    -moz-border-radius: 99em;
    border-radius: 99em;
    border: 5px solid #eee;
    box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
    height: 250px;
    width: 250px;
}

.Site .nav-user-photo-phone {
    margin: -4px 0 0 0;
    border-radius: 100%;
    border: 2px solid white;
    height: 25px;
    width: 25px;
    position: relative;
    top: 10px;
    left: 4px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
}

.Site .navbar-default {
    padding-right: 8px;
}

.Site .navbar .navbar-toggle {
    border: none;
}

.Site .navbar .navbar-toggle:hover, .Site .navbar .navbar-toggle:focus {
    background-color: #f5f5f5;
}

.Site .navbar-header .navbar-toggle .icon-bar, .Site .navbar-header .navbar-toggle .icon-bar:hover {
    background-color: #000000;
}

#arrowDownUserNav {
    color: #000000;
    height: 30px;
    width: 30px;
}

.Site .list-group-item, .SiteClient .surveyclass .list-group-item {
    border: none;
    color: black;
    font-weight: 600;
}

.Site .list-group-item.active, .SiteClient .surveyclass .list-group-item.active {
    background-color: #007ac2;
    border-color: white;
    color: #ffffff;
}

a.list-group-item, button.list-group-item {
    color: black;
}

.Site li.user-cash-rewards {
    border-right: 1px solid #e8e8e8;
    border-left: 1px solid #e8e8e8;
    padding-right: 10px;
    padding-left: 10px;
    margin-bottom: auto;
}

.Site .header-container {
    height: 64px;
    z-index: 16;
    position: fixed;
    width: 100%;
}

.Site .header-container .header-wrapper {
    width: 100%;
    height: 100%;
    border-radius: 0;
    z-index: 16;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    background: white;
}

.Site .header-container .header-wrapper #header-toolbar {
    height: 100%;
    background: #ffffff;
    -webkit-flex: 1 1 auto;
    -moz-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    -moz-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
    -moz-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    -ms-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    -o-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-bottom: 1px solid #e8e8e8;
}

.Site .header-container .header-wrapper #header-toolbar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.Site .header-container .header-wrapper #header-toolbar ul.toolbar {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
}

.Site .header-container .header-wrapper #header-toolbar ul.toolbar > li > a {
    color: #000000;
    text-decoration: none;
    min-height: 64px;
    min-width: 64px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -webkit-align-content: center;
    -moz-align-content: center;
    -ms-align-content: center;
    align-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
}

.Site .header-container .header-wrapper #header-toolbar #header-middle {
    position: relative;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -webkit-flex: 1 1 auto;
    -moz-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
}

.Site .header-container .header-wrapper #header-toolbar #header-middle input#search-input:focus {
    background-color: rgba(255, 255, 255, 0.5);
}

.Site .header-container .header-wrapper #header-toolbar #user-profile a {
    padding-left: 15px;
    padding-right: 15px;
}

.Site .header-container .header-wrapper #header-toolbar #user-profile a .avatar {
    margin-right: 16px;
}

.Site .header-container .header-wrapper #header-toolbar #user-profile a .avatar img {
    max-width: 40px;
    max-height: 40px;
}

.header-container .header-wrapper #header-toolbar #user-profile.dropdown.open .dropdown-menu.dropdown-menu-right {
    top: 64px;
    width: 200px;
    visibility: visible;
}

.Site .loginTableCell {
    vertical-align: middle;
    text-align: center;
    font-family: Roboto;
}

.Site .loginTableHeader {
    background-color: #007ac2;
}

.Site .loginTableHeaderText {
    color: #ffffff;
}

.open > .dropdown-menu {
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    visibility: visible;
}

ul.dropdown-menu.dropdown-menu-profile {
    width: 100%;
    border: none;
    border-radius: 0;
}

span.user-info {
    color: #000000;
    padding: 0 5px;
}

span.user-info:hover {
    color: #000;
}

a.other-settings {
    color: #ffffff !important;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #007ac2 !important;
}

.Site .dropdown-menu > li > a.other-settings:hover,
.Site .dropdown-submenu > li > a.other-settings:hover,
{
    background-color: #009af5 !important;
    color: #FFF !important;
}

ul.dropdown-menu.dropdown-menu-right,
ul.dropdown-submenu.dropdown-menu-right,
{
    background-color: #007ac2;
}

ul.dropdown-menu.dropdown-menu-right.tag-menu {
    background-color: white;
}

.Site .dropdown-menu > li > a.nav-settings {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    color: black;
}

.Site a.nav-settings:focus, a.nav-settings:hover,
.Site .other-settings:focus, .other-settings:hover {
    color: #ffffff !important;
    background-color: #007ac2 !important;
}

.Site .header-container .header-wrapper #header-toolbar #sidebar-toggle {
    position: relative;
}

.Site .header-container .header-wrapper #header-toolbar #sidebar-toggle.SidebarClose:after {
    content: "\f0da";
    right: 8px;
    left: initial;
}

.Site .header-container .header-wrapper #header-toolbar #sidebar-toggle:after {
    content: "\f0d9";
    font-family: "FontAwesome";
    font-size: 14px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 8px;
}

/********************************************************************************************************/
/********************************************************************************************************/
/********************************************submenu*****************************************************/
/********************************************************************************************************/
/********************************************************************************************************/
.Site span.submenu-icon {
    margin-right: 30px;
    position: relative;
    top: 2px;
    font-size: 22px;
}

/********************************************************************************************************/
/********************************************************************************************************/
/********************************************surveys tab*************************************************/
/********************************************************************************************************/
/********************************************************************************************************/
.Site .col-md-12.panelsurvey-header {
    font-size: 18px;
    background-color: #007ac2;
    color: #ffffff;
    padding: 6px;
    text-align: center;
    width: 100%;
}

.Site .tileDiv .surveylinks {
    padding: 0;
}

.Site .surveylinks {
    margin: 0px;
    display: block;
    width: 100%;
    height: 100%;
    padding: 30px 0;
}

.Site .surveylinks > span:not(:last-child):after {
    content: "|";
}

.Site .surveytitles {
    padding: 0 10px;
    color: #333;
    font-size: 16px;
}

.Site .surveyslabel {
    position: absolute;
    top: 20px;
    right: 13px;
    padding: 5px 8px;
    border-radius: 4px;
}

.Site span#surveysTabBadge {
    color: white;
}

.Site .theme a {
    margin: 0px;
    display: block;
    width: 100%;
    height: 100%;
    padding: 30px 0;
    color: black;
    font-weight: 600;
    font-size: 14px;
}

.Site h3.surveys-title {
    margin-bottom: 0;
    color: black;
    font-weight: 600;
    margin-left: 20px;
}

.Site .profilesurveytitles {
    color: #696969;
    font-size: 18px;
}

.Site .profilesurveys-text {
    margin: 10px 40px 10px 0;
    font-size: 16px;
}

.Site a.surveylinks {
    color: white;
    display: inline;
    font-weight: 600;
}

.Site div.nosurveywaiting {
    display: block;
    border: 4px solid#007ac2;
    text-align: center;
    margin-top: 5px;
    padding: 10px;
}

/****************************************************/
/****************************************************/
/*********************accordion tabs*****************/
/****************************************************/
/****************************************************/
.Site div.thumbnail.text-center {
    font-size: 24px;
    color: #696969;
    height: 75px;
    width: 75px;
    padding: 18px 0 0 0;
    border: 2px solid#007ac2;
}

.Site .categorytitle {
    border: 0 solid #EFEFEF;
    border-bottom-width: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
    margin-top: 1px;
    color: #565656;
    font-size: 16px;
}

.Site .category-select {
    margin-bottom: 10px;
    Font-size: 18px;
    padding: 0 12px;
}

.Site div#preview.tab-pane.fade.active.in {
    display: inline-block !important;
    width: 100%;
}

.Site .category-select-container {
    margin-bottom: 10px;
    padding: 10px;
    background-color: white;
    border: 1px solid #e8e8e8;
}

.Site .category-select-label {
    font-weight: 600;
    color: black;
}

.Site a.newslinks {
    color: black;
    font-size: 18px;
    font-weight: 600;
    word-break: break-all;
}

.Site .rectangle-listul {
    padding-left: 10px;
}

.Site .rectangle-listul li {
    list-style: circle;
    margin: 0 40px 10px;
    line-height: 24px;
}

.Site .rectangle-listul p {
    background-color: #007ac2;
    padding: 5px 20px;
    margin-top: 10px;
    color: #ffffff;
}

/****************************************************/
/****************************************************/
/************** discussion tab **********************/
/****************************************************/
/****************************************************/
.Site a.newcategory {
    color: #007ac2;
}

.Site .discussion-postcount {
    float: left;
}

.Site ul.nav.navbar-nav.navbar-left.navlinks li a i {
    font-size: 17px;
    top: 0px !important;
    right: 7px;
    position: relative;
    top: 1px;
    display: inline-block;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.Site .tagpill {
    border-radius: 0;
    padding: 8px;
    color: #ffffff !important;
    background-color: #007ac2;
    max-width: 200px;
    font-size: 12px;
}

.Site .nav-tabs {
    border-bottom: none !important;
}

.Site ul#myTab li {
    min-height: 70px;
    border-right: 1px solid #e8e8e8;
    display: inline-block;
    width: auto;
}

.Site ul#myTab li a:active {
    padding-top: 20px;
    color: #FFF;
}

.Site .discussion-listings {
    line-height: 2.5;
}

.Site .discussion-editor-group .toolbar-group {
    padding-top: 11px;
}

.Site .discussionitem {
    display: inline-block;
    border-top: 1px solid #E8E8E8;
    padding-top: 20px;
}

.Site ul.list-inline.font-size-xs li {
    margin-top: 10px;
}

/****************************************************/
/****************************************************/
/*************************news tab*******************/
/****************************************************/
.Site .newsitems {
    padding-bottom: 30px;
}

.Site .mainitems {
    padding-top: 20px;
}

.Site span#newsTabBadge {
    color: white;
}

/****************************************************/
/****************************************************/
/*************************Main***********************/
/****************************************************/

.Site .welcome-text {
    font-weight: 600;
    color: black
}

.Site .abouttext {
    background-color: white;
    border: 1px solid #e8e8e8;
    padding: 30px;
}

.Site .abouttext > p {
    margin-bottom: 20px;
    line-height: 1.5;
}

.Site .alert-callout p {
    line-height: 1.7;
}

.Site .about-text-margin {
    margin-top: 20px;
}

.Site .alert-callout {
    border: 4px solid#007ac2;
    text-align: center;
    margin-top: 20px;
    padding: 30px;
}

.Site .col-sm-12.funfacts.alert.alert-callout {
    background-color: white;
}

.Site .col-sm-12.funfacts.alert.alert-callout img {
    max-width: 100%;
    height: auto;
}

.Site .indextablist {
    border: 1px solid #e8e8e8;
}

.Site nav.navbar.navbar-inverse.navbar-fixed-top.animate.bottom-menu {
    position: relative;
}

.Site .navbar-default {
    background-color: white;
    border-color: #EFEFEF;
    padding-right: 8px;
    min-height: 60px;
}

.Site #logo .navbar-brand {
    padding: 0px 23px;
    display: block;
    line-height: 80px;
    float: none;
}

.Site .navbar > .container .navbar-brand, .Site .navbar > .container-fluid .navbar-brand {
    margin-left: -15px;
}

.Site .navbar-brand {
    height: auto;
    font-weight: 900;
}

.Site .navbar-brand {
    float: left;
    height: 50px;
    padding: 15px 15px;
    font-size: 18px;
    line-height: 20px;
}

.Site .nav > li > a:focus, .Site .nav > li > a:hover {
    text-decoration: none;
    background-color: #007ac2;
    color: #ffffff !important;
}

.Site ul#myTab li a {
    color: black;
    padding: 20px 47px 27px 50px;
    font-weight: 600;
    border: none;
    border-radius: 0px;
}

.Site .surveyitems {
    display: flex;
}

.Site span.news-posted-on {
    font-size: 12px;
}

.Site .surveyitems {
    display: flex;
}

.Site .newsitem {
    min-height: 75px;
    border-top: 1px solid #E8E8E8;
    background-color: white;
}

.Site #navigation a.list-group-item.collapseable.collapsed:after {
    font-family: FontAwesome;
    content: "\f054";
    /* float: right; */
    color: #007ac2 !important;
    margin: 5px 5px 0 0;
}

.Site #navigation a.list-group-item.collapseable:after {
    font-family: FontAwesome;
    content: "\f078";
    float: right;
    margin-left: 8px;
    color: #007ac2 !important;
}

.Site #navigation a.list-group-item.side-menu-list.bottom-menu-collapse.collapsed:after {
    font-family: FontAwesome;
    content: "\f077";
    position: absolute;
    top: 0;
    right: 0;
    color: white !important;
}

.Site #navigation a.list-group-item.side-menu-list.bottom-menu-collapse:after {
    font-family: FontAwesome;
    content: "\f078";
    position: absolute;
    top: 0;
    right: 0;
    color: white !important;
}

/* Have to set height explicity on ui-view
to prevent collapsing during animation*/
.Site .ui-view-container {
    position: relative;
    height: 65px;
}

.Site a.accordion-toggle.faq-toggle.collapsed:after {
    font-family: FontAwesome;
    content: "\f054";
    float: right;
    color: #007ac2 !important;
    margin: 0;
}

.Site a.accordion-toggle.faq-toggle:after {
    font-family: FontAwesome;
    content: "\f078";
    float: right;
    margin-left: 15px;
    color: #007ac2 !important;
}

.Site a.accordion-toggle.faq-toggle {
    display: block;
}

.Site .panel-body.faq-body {
    display: block;
}

.Site .panel-heading.zeropadding {
    min-height: 60px;
}

.Site .col-sm-9.sm-padding-remover.ng-leave {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.Site .col-sm-9.sm-padding-remover.ng-leave-active {
    opacity: 0;
    -webkit-transform: translate3d(100px, 0, 0);
    -moz-transform: translate3d(100px, 0, 0);
    transform: translate3d(100px, 0, 0);
}

/****************************************************/
/****************************************************/
/*********************side-menu***********************/
/****************************************************/
.Site .md-button-toggle .md-toggle-icon.toggled {
    transform: rotateZ(180deg);
    -webkit-transform: rotateZ(180deg);
}


.Site #menu {
    list-style: none;
    -ms-box-orient: horizontal;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-align-items: stretch;
    align-items: stretch;
}

.Site #menu > li {
    -webkit-flex-grow: 1;
    flex-grow: 1;
    text-align: center;
}

.Site #menu > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
}

.Site #menuli > a {
    position: relative;
    display: block;
    padding: 10px 15px;
}

.Site .side-collapse-container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.Site menu-toggle a.list-group-item.sidebarlist-collapse, menu-toggle-hamburger > ul > li > menu-link-hamburger > a, menu-toggle-surveys > ul > li > a {
    margin-left: 10px;
    font-size: 14px;
    font-weight: 600;
}

.menu-toggle-list {
    padding-left: 0px;
    list-style: none;
}

.Site menu-toggle a.list-group-item.sidebarlist i {
    color: #007ac2 !important;
    font-weight: 600;
    font-size: 20px;
    margin-right: 6px;
}

.Site menu-link a i {
    font-size: 20px !important;
}

/****************************************************/
/****************************************************/
/******************** footer ************************/
/****************************************************/
/****************************************************/
.Site .Footer {
    padding: 10px;
    background: #333333;
    color: #ffffff;
    font-size: .85em;
    text-align: center;
    z-index: 15;
}

.Site #footer {
    background-color: #333333;
}

.Site .btn-circle {
    min-width: 50px;
    min-height: 50px;
    border-radius: 50%;
}

.Site .btn-square {
    border-radius: 0px;
}

.Site .Footer a {
    padding: 10px;
    border: 0;
    color: #ffffff;
}

.Site .Footer a:focus, .Site .Footer a:active, .Site .Footer a:hover {
    color: #ffffff;
    text-decoration: underline;
    opacity: 0.8;
}

.Site .Footer-credits {
    margin: 0;
    padding: 0;
}

.Site .Footer-credit {
    display: block;
    color: #ffffff;
}

.Site .Footer-creditSeparator {
    display: none;
}

.Site .Footer-social a, .Site .Footer-social iframe {
    display: inline-block;
    margin: 0 0 1em;
    vertical-align: top;
}

.Site span.side-menu-icon {
    display: block;
    font-size: 1.8em;
    color: white;
}

/****************************************************/
/****************************************************/
/***************** sticky footer ********************/
/****************************************************/
/****************************************************/
.Site {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.Site-footer {
    z-index: 15;
}

.Site-header {
    flex: none;
}

.Site-content {
    flex: 1 0 auto;
    padding: 85px 1.5em 1.5em 1.5em;
}

.Site-content::after {
    content: '\00a0';
    display: block;
    height: 0px;
    visibility: hidden;
}

/* Discussions page*/
.discussions .Site-content.clearfix {
    margin-left: auto;
    margin-right: auto;
    max-width: 1440px;
}

.discussions .pageheader {
    background-color: white;
    border: 1px solid #e8e8e8;
    padding: 15px 10px;
    margin: 0 0 10px 0;
}

.discussion-list-header {
    background-color: white;
    border: 1px solid #e8e8e8;
    padding: 15px 50px 30px 50px;
    margin: 0 0 25px 0;
    box-shadow: inset 0 -1px 0px 0 #E0E0E0;
    width: 100%;
}

span.changetag-list {
    display: block;
}

.tag-switch, .tag-label {
    display: table-cell;
    vertical-align: middle;
    padding: 10px;
}

.tag-label {
    width: 60%;
    color: black;
    font-weight: 600;
}

.tag-menu span, .changetag span {
    display: block;
    padding: 3px 5px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
    cursor: pointer;
}

.tag-menu span:hover, .changetag span:hover {
    background-color: #f7f7f7;
}

.moderator-forum-tools li span i, .changetag span i, .moderator-forum-tools i {
    font-size: 22px;
}

ul.dropdown-menu.dropdown-menu-right {
    transform-origin: right top 0;
    right: -150px;
    left: inherit;
}

.itemsperpage {
    width: 30px;
    height: auto;
    margin: 3px;
    text-align: center;
}

.backto-holder {
    margin-bottom: 10px;
    padding: 10px 0px 0px 0px;
}

.moderator-forum-tools {
    position: absolute;
    bottom: 5px;
    left: 5px;
}

.moderator-forum-tools-replies {
    position: absolute;
    top: 5px;
    right: 5px;
    color: #337ab7;
}

.users-forum-tools-replies {
    position: absolute;
    top: 5px;
    right: 5px;
    color: #000;
}

.btn-group.open .dropdown-toggle {
    -webkit-box-shadow: 0;
    box-shadow: 0;
}

.btn-nested:hover {
    background: #ccc;
}

button.btn.btn-modtool.dropdown-toggle {
    height: 32px;
    width: 35px;
}

span.caret.black {
    display: none;
}

.changetag span i.fa-check-square-o, .changetag i.fa-check-square-o {
#007ac2}

div#discussionsmain {
    box-shadow: inset 0 -1px 0px 0 #E0E0E0;
}

.repliedto {
    font-size: 12px;
    position: relative;
    float: right;
    top: 12px;
    font-family: Roboto;
}

a.but-dropdown-reply {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}

a.but-dropdown-reply:focus, a.but-dropdown-reply:hover {
    color: #262626;
    text-decoration: none;
    background-color: #f5f5f5;
}

ul.dropdown-menu.dropdown-menu-right.tag-menu > li > a {
    color: #333;
}

.pageheader {
    background-color: white;
    border: 1px solid #e8e8e8;
    padding: 30px 30px 20px 30px;
    margin: 0 0 10px 0;
}

h2.aboutthis-title {
    line-height: 1.3;
    font-weight: 600;
    font-kerning: auto;
    text-rendering: optimizeLegibility;
}

.h3-message-holder {
    background-color: white;
    border: 1px solid #e8e8e8;
    padding: 15px;
    margin: 0 0 25px 0;
}

.pageheader-forumgroup {
    background-color: white;
    /*min-height: 120px;*/
    padding: 0px 50px 30px 15px;
    margin: 0 0 25px 0;
    box-shadow: inset 0 -1px 0px 0 #E0E0E0;
}

.pageholder {
    background-color: white;
    border: 1px solid #e8e8e8;
    padding: 20px 30px;
    margin: 0 0 10px 0;
}

.forumcategory {
    border: 1px solid #ececec;
}

.btn-modtool {
    font-size: 17px;
    padding: 2px 0 0 0;
    margin: 0 1px 0 0;
    border: 0;
    background: transparent;
}

#featherdiv {
    z-index: 999999;
}

.btn-discussionbuttons {
    color: black;
    background-color: white;
    border-radius: 0px;
    border: 1px solid#007ac2;
}

.btn-discussionbuttons:hover {
    color: black;
    opacity: .8;
}

.btn-sm.btn-discussionbuttons .fa-reply {
    color: #007ac2;
}

.btn-sm.btn-discussionbuttons i.fa.fa-flag {
    color: #F75337;
}

.btn-reportbuttons.btn-report.btn-mroc .fa-flag {
    color: #F75337;
}

.btn-reply {
    color: #ffffff;
    background-color: #007ac2;
    border-color: #007ac2;
    border-radius: 0px;
}

.btn-edit {
    color: black;
    background-color: #536dfe00;
    border-color: #304ffe00;
    border: 0px;
}

.btn-delete {
    color: white;
    background-color: #607d8b;
    border-color: #607d8b;
    border-radius: 0px;
}

.btn-report {
    color: white;
    background-color: #F75337;
    border-color: #F75337;
    border-radius: 0px;
}

.btn-reply:hover, .btn-like:hover, .btn-dislike:hover, .btn-report:hover, .btn-delete:hover {
    color: white;
    opacity: .8;
}

.btn-reply:focus, .btn-like:focus, .btn-dislike:focus, .btn-report:focus, .btn-delete:focus {
    color: white;
    opacity: .8;
}

.btn-group .btn + .btn, .btn-group .btn + .btn-group, .btn-group .btn-group + .btn, .btn-group .btn-group + .btn-group {
    margin-left: -1px;
    margin-right: 0px;
}

a.showreplies > i {
    font-weight: 600;
}

a.showreplies {
    color: #007ac2;
    font-size: 16px;
}

.Site li.row.msg_container.base_receive.list-group-item {
    margin-bottom: 10px;
    border: 1px solid #E4E4E4;
}

.msg_container.top-reply {
    padding-left: 50px;
}

.date-posted {
    font-size: 12px;
    font-family: Roboto;
    vertical-align: bottom;
    color: black;
}

.clientUserPostContent:hover:not(.noHover) .postcontent {
    color: #ffffff !important;
}

.clientUserPostContent .postcontent {
    font-size: 14px;
}

.postcontent {
    margin: 0 0 10px 0;
    font-size: 16px;
    color: black;
    word-wrap: break-word;
}


div#postContent {
    overflow-y: scroll;
    word-wrap: break-word;
    resize: vertical;
    height: 100px;
}

div#fileContent {
    height: 115px;
    padding: 0;
}

.postreply {
    margin: 0 0 10px 0;
    font-size: 16px;
    color: black;
}

.pageheaderreply {
    margin: 16px 0 0 0;
}

a.backto {
    color: #007ac2;
    font-weight: 600;
    font-size: 16px;
}

.reply-section {
    padding: 40px 0px 0 20px;
}

.Site .list-group-item:first-child, .Site .list-group-item:last-child, .SiteClient .surveyclass .list-group-item:first-child, .SiteClient .surveyclass .list-group-item:last-child {
    border-radius: 0;
}

.borderhelper {
    border-top: 1px solid #E0E0E0 !important;
}

.replybackground {
    background-color: #F4F4F4;
}

.msg_container {
    padding: 10px;
    display: flex;
    background-color: white;
}

.reply_container {
    padding: 10px;
    overflow: hidden;
    display: flex;
    background-color: white;
}

.discussion-post-repeat {
    border: 1px solid#007ac2;
    padding-right: 0;
    background-color: white;
    border-radius: 4px;
}

.discussion-post-reply-repeat {
    border-left: 1px solid #d2d2d2;
    border-top: 1px solid #d2d2d2;
    padding-right: 0;
    border-radius: 5px 0px 0px 0px;
    float: left;
}

.noborder {
    border: 0px;
}

.nav-user-photo-discussion-reply {
    height: 50px;
    width: 50px;
}

.thepostid {
    position: absolute;
    top: 2px;
    right: 2px;
    display: inline-block;
    float: left;
    font-size: 10px;
    color: black;
    font-family: Roboto;
}

.inline {
    display: inline-block !important;
}

.forumlist-holder {
    display: flex;
}

.interaction-pagination {
    background-color: white;
    height: 50px;
    margin-bottom: 10px;
    border: 1px solid #E4E4E4;
    padding: 5px 0;
}

.discussiontopics {
    background-color: white;
    border: 1px solid #e8e8e8;
    padding: 0;
}

.bubble {
    border-radius: 4px;
    padding: 10px;
    min-height: 60px;
    border: 0.5px solid#007ac2;
}

.repliedtoheader {
    background-color: #F9F9F9;
}

.profilecard {
    color: #007ac2;
}

.profilecard:hover {
    color: #007ac2;
}

.fullwidth {
    margin: 0 !important;
    width: 100%;
}

.Site a.list-group-item.sidebarlist-collapse.fullwidth:focus, .Site a.list-group-item.sidebarlist-collapse.fullwidth:hover,
.Site button.list-group-item.sidebarlist-collapse.fullwidth:focus, .Site button.list-group-item.sidebarlist-collapse.fullwidth:hover,
.ranksortLi:hover {
    color: #ffffff !important;
    text-decoration: none;
    background-color: #007ac2;
}

.Site a.list-group-item.sidebarlist-collapse.fullwidth {
    color: white !important;
    text-decoration: none;
    background-color: #3B9E53;
    font-weight: 600;
}

.Site .list-group-item.sidebarlist-collapse.fullwidth:first-child {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.sidebarul {
    margin-bottom: 0px;
}

ul.side-menu.list-group {
    margin-bottom: 0 !important;
}

/* News Page*/
.newspage {
    padding: 0;
    /* border: 1px solid #DDD; */
    border-bottom-width: 2px;
}

.newspost {
    padding: 20px;
    border: 1px solid #e8e8e8;
}

.news-post-link {
    color: black;
    font-size: 20px;
    font-weight: 600;
}

.news-pagination {
    margin-bottom: 10px;
    padding: 5px 0px 0px 0px;
    display: flex;
}

.news-pagination > ul {
    margin: 3px;
}

span.news-date {
    font-weight: 600;
}

.pagination {
    margin: 0;
}

.pagination > li > a, .pagination > li > span {
    margin: 0 5px;
}

.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
    z-index: 3;
    color: #ffffff;
    cursor: default;
    background-color: #007ac2;
    border-color: #007ac2;
}

.pagination > li > a, .pagination > li > span {
    position: relative;
    float: left;
    padding: 6px 9px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #007ac2;
}

.pagination > li > a:focus, .pagination > li > a:hover, .pagination > li > span:focus, .pagination > li > span:hover {
    z-index: 3;
    color: #007ac2;
    background-color: #f7f7f7;
    border-color: #007ac2;
}

md-content#navigation {
    box-shadow: none;
}

form#discussioneditor {
    border: 1px solid #E4E4E4;
}

.discussions-upload-file-label {
    padding: 4px 5px 4px 5px;
    vertical-align: middle;
    font-weight: 400;
    margin: 10px 0;
}

/* quickpoll */
.quickpollinvites {
    background-color: white;
    padding: 10px 50px 20px 50px;
    border: 1px solid #DDD;
    border-bottom-width: 2px;
    margin-top: 10px;
}

div#quickPollDiv {
    margin-bottom: 20px;
    /* margin for quickpoll submit button */
    margin-top: 10px;
}

#quickPollDiv form .row {
    margin: 0;
}

#quickPollDiv form .panel-primary {
    border-color: #007ac2 !important;
}

#quickPollDiv form .panel-primary > .panel-heading {
    color: #ffffff;
    background-color: #007ac2;
    border-color: #007ac2;
}

#quickPollDiv form .panel-primary > .panel-heading > legend > .postcontent {
    color: #ffffff;
}

#quickPollDiv form .panel-body.quickpoll label {
    display: inline;
    font-weight: 600;
}

.questionul {
    list-style: none;
    padding-left: 0;
}

.gridhighlight input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -moz-opacity: 0;
    margin: 0 1rem;
    width: 1em;
    height: 1em;
    background-color: blue;
    -webkit-box-shadow: inset 0 0 0 .5em white, 0 0 0 .25em;
    box-shadow: inset 0px 0px 0px 0.5em white, 0px 0px 0px 0.25em #9e9d9d;
    border-radius: 50%;
    -webkit-transition: .25s;
    transition: .25s;
    cursor: pointer;
    color: #8B8B8B;
    position: relative;
}

@-webkit-keyframes check-me-out {
    25% {
        -webkit-transform: skewY(-8deg);
    }
    50% {
        box-shadow: inset 0 0 0 .3em white, 0 0 0 .25em #50B848, 0 0 0 1em #50B848;
        -webkit-transform: skewY(8deg);
    }
    75% {
        -webkit-transform: skewY(-4deg);
    }
    to {
        box-shadow: inset 0 0 0 .3em white, 0 0 0 .25em #50B848, 0 0 0 0 #50B848;
        -webkit-transform: none;
    }
}

@keyframes check-me-out {
    25% {
        transform: skewY(-8deg);
    }
    50% {
        box-shadow: inset 0 0 0 .3em white, 0 0 0 .25em #50B848, 0 0 0 1em #50B848;
        transform: skewY(8deg);
    }
    75% {
        transform: skewY(-4deg);
    }
    to {
        box-shadow: inset 0 0 0 .3em white, 0 0 0 .25em #50B848, 0 0 0 0 #50B848;
        transform: none;
    }
}

/* Invite Page*/
.invite-list {
    list-style: none;
}

.btn-invites {
    color: #ffffff;
    background-color: #007ac2;
    border-color: #007ac2;
    margin: 0 10px 0 0px;
    padding: 12px 12px;
}

.btn-invites.focus, .btn-invites:focus, .btn-invites:hover {
    color: #ffffff;
    text-decoration: none;
}

.invite-title {
    line-height: 1.3;
    font-weight: 600;
    font-kerning: auto;
    text-rendering: optimizeLegibility;
}

.mobile-invite-link {
    color: black;
    padding: 1px 6px;
}

.mobile-invite-link:hover, .mobile-invite-link:focus, .mobile-invite-link:active {
    text-decoration: none;
    color: black;
}

/* surveys page */
.surveyinvites {
    padding: 0;
    border: 1px solid #DDD;
}

a.surveylink {
    color: black;
    font-weight: 600;
}

a.theme {
    margin: 0px;
    display: block;
    width: 100%;
    height: 100%;
    padding: 30px 0;
    color: black;
    font-weight: 400;
    font-size: 14px;
}

/* Settings page*/
ul#settingsTab li.active {
    box-shadow: inset 0 -5px 0 0#007ac2;
}

ul#settingsTab li {
    min-height: 70px;
    /* padding: 0 40px 0 15px; */
    border: 1px solid #EFEFEF;
    border-bottom: none;
    border-left: none;
    display: inline-block;
}

ul#settingsTab li a:hover {
    border-color: white white white;
    background-color: #007ac2;
    color: #ffffff;
}

ul#settingsTab li a {
    padding-top: 20px;
    color: black;
    padding: 20px 25px 22px 25px;
    background-color: white;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    color: #555;
    cursor: pointer;
    background-color: white;
    border: 0;
}

.Site .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    cursor: pointer;
    color: #FFF !important;
    background-color: #009af5;
    border: 0;
}

form#profilechange {
    padding: 20px 15px;
}

form#formChangePW {
    padding: 20px 15px;
}

.activitytitle {
    background-color: white;
}

.img-avatar {
    margin: 20px auto 10px;
}

.change-image {
    margin-right: auto;
    margin-left: auto;
}

div#updateprofilesurvey {
    margin-top: 20px;
}

.col-md-2.activityblocks {
    margin-top: 20px;
}

/* not ready to remove this yet

input[type=checkbox] {
position: relative;
top: -0.375rem;
margin: 0 1rem 0 0;
cursor: pointer;
}

input[type=checkbox]:before {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
content: "";
position: absolute;
left: 0;
z-index: 1;
width: 1rem;
height: 1rem;
border: 2px solid #f2f2f2;
}

input[type=checkbox]:checked:before {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
height: .5rem;
border-color: #009688;
border-top-style: none;
border-right-style: none;
}*/
.checkbox:after {
    content: "";
    position: absolute;
    top: -0.125rem;
    left: 0;
    width: 1.1rem;
    height: 1.1rem;
    background-color: white;
    cursor: pointer;
}

h3.settings-title {
    color: black;
    font-weight: 600;
}

.col-md-12.activity-holder {
    margin: 10px 0;
}

.settings-tab-list {
    background-color: white;
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
}

/* My rewards page -redirects to myrewardpoints.php
from client side in order to update user*/
.col-sm-12.col-md-12.col-lg-12.viewrewardpoints {
    background-color: white;
    border: 1px solid #e8e8e8;
    padding: 15px;
    box-shadow: inset 0 -1px 0px 0 #E0E0E0;
}

td.posttransaction {
    font-size: 22px;
    padding: 10px 0;
}

.transaction-form-padding tbody tr td {
    margin: 5px 0px 5px 20px;
}

.transaction-form-padding tbody tr td div.form-control-wrapper {
    margin: 5px 0px 5px 20px;
}

.not-allowed {
    cursor: not-allowed;
}

table.transaction-form-padding {
    margin-bottom: 20px;
}

.charity-group-header {
    background-color: #007ac2;
    font-size: 25px;
    line-height: 36px;
    text-align: center;
    margin-top: 20px;
    color: #ffffff !important;
    width: 100%;
}

a.story-img {
    display: flex;
    justify-content: center;
    align-items: center;
}

a.story-img img {
    max-height: 120px;
    max-width: 200px;
}

p.bg-swheader {
    text-align: center;
    background-color: #007ac2;
    color: #ffffff !important;
    padding: 3px 0;
}

.charity-info {
    padding: 0 0 2px 0;
    display: block;
}

.charity-buttons {
    margin-top: 10px;
}

.url-break-word {
    word-break: break-all;
}

.rewards-title {
    line-height: 1.3;
    font-weight: 600;
    font-kerning: auto;
    text-rendering: optimizeLegibility;
}

p.rewards-p {
    line-height: 1.5;
}

.support-charity.rewards-title-margin {
    line-height: 1.3;
    font-weight: 600;
    font-kerning: auto;
    text-rendering: optimizeLegibility;
}

.charityflex {
    flex-flow: row wrap;
    /* Then we define how is distributed the remaining space */
    justify-content: space-around;
}

.charity-input {
    margin-bottom: 20px;
}

.reward-text {
    margin: 25px 0;
}

.rewardslogo {
    filter: grayscale(1);
    /* IE6-9 */
    -webkit-filter: grayscale(1);
    /* Google Chrome, Safari 6+ & Opera 15+ */
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
    cursor: pointer;
}

.rewardslogo:hover {
    filter: none;
    /* IE6-9 */
    -webkit-filter: grayscale(0);
    /* Google Chrome, Safari 6+ & Opera 15+ */
}

.owlcarousel {
    margin: 40px 0 0 0;
}

.myrewards-holder {
    padding: 20px 5px 10px 5px;
    background-color: white;
}

/* new flexing for charity grouping */
.list-content {
    background-color: white;
    display: flex;
    flex-direction: column;
    padding: 5px;
    width: 100%;
}

.charity-name {
    font-size: 18px;
    background-color: #007ac2;
    color: #ffffff;
    padding: 6px;
    text-align: center;
    width: 100%;
}

.error-message {
    background: #fee9ed;
    color: #cb0122;
    padding: 5px;
    border-radius: 5px;
}

.error-message-input {
    border: solid 1px #cb0122
}

h2 {
    margin-top: 0;
    margin-bottom: 0.4em;
}

/*Flex items*/
.list {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    /*border-bottom: 1px solid #ECECEC;*/
}

.list-item {
    display: flex;
    padding: 0.5em;
    width: 100%;
}

@media all and (min-width: 40em) {
    .list-item {
        width: 50%;
    }
}

@media all and (min-width: 60em) {
    .list-item {
        width: 33.33%;
    }
}

/* bs4 cards - currently used for winners can be used as a panel replacement - panel uses flexbox */
.card {
    position: relative;
    display: block;
    margin-bottom: 0.75rem;
    background-color: white;
    border-radius: 0.25rem;
    border: 1px solid rgba(0, 0, 0, 0.125);
}

.card-block {
    padding: 1.25rem;
}

.card-block::after {
    content: "";
    display: table;
    clear: both;
}

.card-title {
    margin-bottom: 0.75rem;
}

.card-subtitle {
    margin-top: -0.375rem;
    margin-bottom: 0;
}

.card-text:last-child {
    margin-bottom: 0;
}

.card-link:hover {
    text-decoration: none;
}

.card-link + .card-link {
    margin-left: 1.25rem;
}

.Site .card > .list-group:first-child .list-group-item:first-child {
    border-top-right-radius: 0.25rem;
    border-top-left-radius: 0.25rem;
}

.Site .card > .list-group:last-child .list-group-item:last-child {
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

.card-header {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid #c6c6c6;
}

.card-header::after {
    content: "";
    display: table;
    clear: both;
}

.card-header:first-child {
    border-radius: 0.25rem 0.25rem 0 0;
}

.card-footer {
    padding: 0.75rem 1.25rem;
    background-color: #f5f5f5;
    border-top: 1px solid rgba(0, 0, 0, 0.125);
}

.card-footer::after {
    content: "";
    display: table;
    clear: both;
}

.card-footer:last-child {
    border-radius: 0 0 0.25rem 0.25rem;
}

.card-header-tabs {
    margin-right: -0.625rem;
    margin-bottom: -0.75rem;
    margin-left: -0.625rem;
    border-bottom: 0;
}

.card-header-pills {
    margin-right: -0.625rem;
    margin-left: -0.625rem;
}

.card-primary {
    background-color: #0275d8;
    border-color: #0275d8;
}

.card-primary .card-header,
.card-primary .card-footer {
    background-color: transparent;
}

.card-success {
    background-color: #5cb85c;
    border-color: #5cb85c;
}

.card-success .card-header,
.card-success .card-footer {
    background-color: transparent;
}

.card-info {
    background-color: #5bc0de;
    border-color: #5bc0de;
}

.card-info .card-header,
.card-info .card-footer {
    background-color: transparent;
}

.card-warning {
    background-color: #f0ad4e;
    border-color: #f0ad4e;
}

.card-warning .card-header,
.card-warning .card-footer {
    background-color: transparent;
}

.card-danger {
    background-color: #d9534f;
    border-color: #d9534f;
}

.card-danger .card-header,
.card-danger .card-footer {
    background-color: transparent;
}

.card-outline-primary {
    background-color: transparent;
    border-color: #0275d8;
}

.card-outline-secondary {
    background-color: transparent;
    border-color: #ccc;
}

.card-outline-info {
    background-color: transparent;
    border-color: #5bc0de;
}

.card-outline-success {
    background-color: transparent;
    border-color: #5cb85c;
}

.card-outline-warning {
    background-color: transparent;
    border-color: #f0ad4e;
}

.card-outline-danger {
    background-color: transparent;
    border-color: #d9534f;
}

.card-inverse .card-header,
.card-inverse .card-footer {
    border-color: rgba(255, 255, 255, 0.2);
}

.card-inverse .card-header,
.card-inverse .card-footer,
.card-inverse .card-title,
.card-inverse .card-blockquote {
    color: white;
}

.card-inverse .card-link,
.card-inverse .card-text,
.card-inverse .card-subtitle,
.card-inverse .card-blockquote .blockquote-footer {
    color: rgba(255, 255, 255, 0.65);
}

.card-inverse .card-link:focus, .card-inverse .card-link:hover {
    color: white;
}

.card-blockquote {
    padding: 0;
    margin-bottom: 0;
    border-left: 0;
}

.card-img {
    border-radius: 0.25rem;
}

.card-img-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1.25rem;
}

.card-img-top {
    border-top-right-radius: 0.25rem;
    border-top-left-radius: 0.25rem;
}

.card-img-bottom {
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

@media (min-width: 544px) {
    .card-deck {
        display: table;
        width: 100%;
        margin-bottom: 0.75rem;
        table-layout: fixed;
        border-spacing: 1.25rem 0;
    }

    .card-deck .card {
        display: table-cell;
        margin-bottom: 0;
        vertical-align: top;
    }

    .card-deck-wrapper {
        margin-right: -1.25rem;
        margin-left: -1.25rem;
    }
}

@media (min-width: 544px) {
    .card-group {
        display: table;
        width: 100%;
        table-layout: fixed;
        margin-bottom: 20px;
    }

    .card-group .card {
        display: table-cell;
        vertical-align: top;
    }

    .card-group .card + .card {
        margin-left: 0;
        border-left: 0;
    }

    .card-group .card:first-child {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
    }

    .card-group .card:first-child .card-img-top {
        border-top-right-radius: 0;
    }

    .card-group .card:first-child .card-img-bottom {
        border-bottom-right-radius: 0;
    }

    .card-group .card:last-child {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
    }

    .card-group .card:last-child .card-img-top {
        border-top-left-radius: 0;
    }

    .card-group .card:last-child .card-img-bottom {
        border-bottom-left-radius: 0;
    }

    .card-group .card:not(:first-child):not(:last-child) {
        border-radius: 0;
    }

    .card-group .card:not(:first-child):not(:last-child) .card-img-top,
    .card-group .card:not(:first-child):not(:last-child) .card-img-bottom {
        border-radius: 0;
    }
}

@media (min-width: 544px) {
    .card-columns {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
        -webkit-column-gap: 1.25rem;
        -moz-column-gap: 1.25rem;
        column-gap: 1.25rem;
    }

    .card-columns .card {
        display: inline-block;
        width: 100%;
    }
}

/* winners */
ul.rectangle-listul.listul-padding {
    padding-left: 30px;
}

.card-header.previouswinners:before {
    font-family: FontAwesome;
    content: "\f078";
    float: right;
    color: #ffffff !important;
}

.card-header.previouswinners.collapsed:before {
    font-family: FontAwesome;
    content: "\f054";
    float: right;
    color: #ffffff !important;
    margin: 5px 5px 0 0;
}

.card-title a {
    font-weight: 600;
    color: #ffffff !important;
}

.card .card-body.previouswinners {
    height: 30%;
    padding: 10px 30px;
}

.winners-accordion {
    margin-top: 20px;
}

.winners-header {
    line-height: 1.3;
    font-weight: 600;
    font-kerning: auto;
    text-rendering: optimizeLegibility;
}

/* Interaction / forumlist / forumgroup*/
div#forumcategories {
    margin-top: 20px;
}

.backlink {
    padding-right: 15px;
    padding-left: 15px;
}

.mod_sprocket.btn-group {
    position: absolute;
    top: -10px;
    right: 0px;
}

.mod_sprocket.btn-group.open > ul li a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: black;
    white-space: nowrap;
    text-decoration: none;
}

.discussiondetails {
    margin-top: 10px;
    float: right;
}

.surveyslabeltop {
    position: absolute;
    right: 20px;
}

.forumgroup-holder {
    padding: 0 20px;
}


/* discussion editor WIP*/
.md-header .nav-links {
    display: flex;
    display: -webkit-flex;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    width: 100%;
}

.nav-links {
    padding: 0;
    margin: 0;
    list-style: none;
    height: auto;
    border-bottom: 1px solid #e5e5e5;
}

.nav-links li {
    display: inline-block;
}

.nav-links li a {
    display: inline-block;
    padding: 10px;
    padding-bottom: 11px;
    margin-bottom: -1px;
    font-size: 15px;
    line-height: 28px;
    color: #959494;
    border-bottom: 2px solid transparent;
}

.nav-links li a:hover, .nav-links li a:active, .nav-links li a:focus {
    text-decoration: none;
    outline: none;
}

.nav-links li.active a {
    border-bottom: 2px solid #4a8bee;
    color: black;
}

.nav-links li .badge {
    font-weight: normal;
    background-color: #eee;
    color: #78a;
}

.nav-links.sub-nav {
    text-align: center;
    background-color: #f5f5f5;
}

.nav-links.sub-nav .container-fluid {
    background-color: #f5f5f5;
    margin-bottom: 0;
}

.nav-links.sub-nav li a {
    margin: 0;
    padding: 11px 10px 9px;
}

.nav-links.sub-nav li.active a {
    border-bottom: none;
    color: #4a8bee;
}

.md-header .nav-links .pull-right, .md-header .nav-links #modal_merge_info .modal-dialog .btn-clipboard, #modal_merge_info .modal-dialog .md-header .nav-links .btn-clipboard {
    margin-left: auto;
}

.note-textarea {
    display: block;
    padding: 10px 0;
    color: #5c5c5c;
    font-family: Roboto;
    border: 0;
}

.markdown-area {
    border-radius: 0;
    background-color: white;
    border: 1px solid #ddd;
    min-height: 140px;
    max-height: 500px;
    padding: 5px;
    box-shadow: none;
    width: 100%;
}

textarea {
    resize: vertical;
}

.new-note {
    display: none;
}

.new-note .note-form-actions, .note-edit-form .note-form-actions {
    margin-top: 16px;
}

.new-note .note-preview-holder > p, .note-edit-form .note-preview-holder > p {
    overflow-x: auto;
}

.new-note img, .note-edit-form img {
    max-width: 100%;
}

.note-textarea {
    display: block;
    padding: 10px 0;
    color: #5c5c5c;
    font-family: Roboto;
    border: 0;
}

.note-textarea:focus {
    outline: 0;
}

.note-image-attach {
    margin-left: 45px;
    float: none
}

#discussioneditor .md-area {
    padding: 10px 16px 10px 16px;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

#discussioneditor .md-area.is-focused .comment-toolbar, #discussioneditor .md-area.is-focused .nav-links {
    border-color: #3aabf0;
}

#discussioneditor .md-area.is-dropzone-hover {
    border-color: #2faa60;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 0 4px rgba(47, 170, 96, 0.4);
}

#discussioneditor .md-area.is-dropzone-hover .comment-toolbar, #discussioneditor .md-area.is-dropzone-hover .nav-links {
    border-color: #2faa60;
}

.post-discussion {
    float: right;
    margin: 10px 0 10px 3px;
}

.md-header .nav-links {
    display: flex;
    display: -webkit-flex;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    width: 100%;
}

.md-header .nav-links .pull-right, .md-header .nav-links #modal_merge_info .modal-dialog .btn-clipboard, #modal_merge_info .modal-dialog .md-header .nav-links .btn-clipboard {
    margin-left: auto;
}

.comment-toolbar {
    padding-top: 10px;
    color: #959494;
}

.toolbar-btn {
    float: left;
    padding: 0 5px;
    color: #959494;
    background-color: transparent;
    border: 0;
    outline: 0;
}

.toolbar-button {
    padding: 0;
    background: none;
    border: 0;
    font-size: 14px;
    line-height: 16px;
}

.toolbar-button:hover, .toolbar-button:focus {
    color: #3084bb;
    outline: 0;
}

.badger {
    width: auto;
    padding: 2px 5px;
    margin: 10px 0 10px 0;
}

.badger-success {
    background-color: #007ac2;
    color: #ffffff;
}

button.btn.btn-mroc.discussions-upload-file {
    padding: 6px 5px 6px 5px;
    vertical-align: middle;
    font-weight: 400;
    margin: 10px 0;
}

.open-feather {
    padding: 6px 5px 6px 5px;
    vertical-align: middle;
    font-weight: 400;
    margin: 10px 0;
}

@media (min-width: 992px) {
    .toolbar-button {
        float: left;
        margin-right: 16px;
    }

    .toolbar-button:last-child {
        float: right;
        margin-right: 0;
    }
}

.toolbar-button-icon {
    position: relative;
    top: 1px;
    margin-right: 3px;
    color: inherit;
    font-size: 16px;
}

.toolbar-text {
    font-size: 14px;
    line-height: 16px;
}

@media (min-width: 992px) {
    .toolbar-text {
        float: left;
    }
}

/* redeem */
p.redeem-p {
    line-height: 1.5;
}

.redeem-title-margin {
    margin-bottom: 20px;
    font-weight: 600;
}

.confirm-redeem {
    border: 4px solid#007ac2;
    text-align: center;
    margin-top: 20px;
    padding: 10px;
}

/* Contact page */
.title {
    font-size: 24px;
    font-weight: 600;
}

.contact {
    background-color: white;
}

.contactrow {
    padding: 20px;
    background-color: white;
}

button#btnContactUs {
    margin-bottom: 20px;
}

.btn-contact-social {
    display: inline-block;
    height: 30px;
    width: 30px;
    line-height: 30px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    background-color: #A7A5A5;
    color: white;
    text-align: center;
    margin-right: 20px;
}

.btn-contact-social:hover, .btn-contact-social:focus {
    color: #ccc;
}

.address {
    margin-top: 30px;
    line-height: 2;
}

.form-group.contactus > label {
    display: none;
}

a.showmap {
    color: #007ac2;
    font-size: 16px;
    font-weight: 600;
}

/* faq */
.faq {
    background-color: white;
    padding-bottom: 20px;
}

.faqlinks {
    padding: 10px 0 10px 0px;
    font-weight: 600;
}

.faq-group {
    padding: 5px 0 0 0;
}

.Site .panel-group .panel-heading + .panel-collapse > .list-group, .Site .panel-group .panel-heading + .panel-collapse > .panel-body {
    border-top: none;
}

.panel-white > .panel-heading {
    border: none;
    -webkit-box-shadow: 0;
    box-shadow: 0;
}

.Site .panel-white > .panel-heading, .Site .panel-body.faq-body {
    border-bottom: 1px solid #ECECEC;
    -webkit-box-shadow: 0;
    box-shadow: 0;
}

.faq-pagination {
    background-color: white;
    height: 50px;
    margin-top: 20px;
    border: 1px solid #E4E4E4;
    padding: 5px 0;
}

.panel-title a {
    color: #ffffff !important;
    text-decoration: underline;
    font-weight: 600;
}

.panel-title {
    line-height: 1.7;
}

.faq-pagination > ul {
    margin: 3px;
}

.faq-header {
    line-height: 1.3;
    font-weight: 600;
    font-kerning: auto;
    text-rendering: optimizeLegibility;
}

.faq-question {
    line-height: 1.3;
    font-weight: 600;
    font-kerning: auto;
    text-rendering: optimizeLegibility;
}

.funfacts h3 {
    margin-top: 0px;
}

/* other */
md-content#navigation ul .reward-menu a {
    font-size: 22px;
}

md-content#navigation ul .reward-menu a:hover {
    background-color: #3B9E53;
}

/* hide file input button*/
#Avatar {
    display: none;
}

div#updateprofilesurvey .help-block {
    display: none;
}

.rc-nav-wizard > li {
    float: left;
    font-size: 18px;
}

.rc-nav-wizard > li + li {
    margin-left: 2px;
}

.rc-nav-wizard > li > a {
    border-radius: 5px;
    cursor: default;
    color: #999;
}

.rc-nav-wizard > li > a,
.rc-nav-wizard > li > a:hover,
.rc-nav-wizard > li > a:focus {
    background-color: transparent;
}

.rc-nav-wizard > li > a > .badge {
    font-size: 18px;
    width: 1.8em;
    height: 1.8em;
    line-height: 1.8em;
    padding: 0px;
    color: #ffffff;
    background-color: #BDBDBD;
    font-weight: 600;
    text-align: center;
    border-radius: .9em;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
    z-index: 1;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

/* active = current wizard step */
.rc-nav-wizard > li.active > a,
.rc-nav-wizard > li.active > a:hover,
.rc-nav-wizard > li.active > a:focus {
    color: #007ac2;
    background-color: transparent;
}

.rc-nav-wizard > .active > a > .badge {
    color: #ffffff;
    background-color: #007ac2;
}

/* success = completed wizard step */
.rc-nav-wizard > li.success > a,
.rc-nav-wizard > li.success > a:hover,
.rc-nav-wizard > li.success > a:focus {
    color: #5cb85c;
    background-color: transparent;
}

.rc-nav-wizard > .success > a > .badge {
    color: white;
    background-color: #5cb85c;
}

.rc-nav-wizard > li.success > a:after {
    content: '\f00c';
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}

/* Error */
.has-error .radio label {
    font-weight: 600 !important;
}

.has-error section.noinitialpadding.list {
    border: #C10000 3px solid;
}

.with-font {
    background-color: pink;
}

input[type=radio].charity-select-radio {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.charityinfo {
    margin-top: auto;
    width: 100%;
    text-align: center;
}

.charity-listing {
    box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.25);
}

.charity-select-label {
    font-weight: normal;
    width: 100%;
    text-align: center;
    margin-bottom: 0px;
    padding: 6px;
}

.list-content {
    align-items: center;
}

.list-content.selected {
    box-shadow: inset 0px 0px 0px 6px #5cb85c;
}

.list-item.charity-listing {
    padding: 0;
}

.charity-select {
    padding: 0px;
}

span.story-img img {
    height: 75px;
}

.update-address-text {
    margin: 0 -15px 10px -15px;
    font-size: 18px;
}

.redeem-points-btn {
    margin-top: 10px;
}

.cheque-form {
    margin-top: 10px;
}

.redeem-points-text {
    margin-bottom: 20px;
}

.cashout-holder {
    margin: 20px 0 0 0;
}

ul.dropdown-menu-provinceselect {
    list-style: none;
    padding: 0;
}

.custom-popup-wrapper {
    z-index: 1002;
    display: none;
    background-color: white;
    -webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.38);
    box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.38);
}

.custom-popup-wrapper > .message {
    padding: 30px 0 0 20px;
    border-bottom: 1px solid #ddd;
    color: #868686;
}

.custom-popup-wrapper > .dropdown-menu {
    position: static;
    float: none;
    display: block;
    min-width: 160px;
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.statMessage.alert.alert-warning {
    /* popup toptext */
    border: 4px solid#007ac2;
    text-align: center;
    background-color: white;
    display: inline-table;
    width: 100%;
}

/* modal padding for popup */
.popup-template .modal-content {
    padding-top: 24px;
    padding-right: 24px;
    padding-bottom: 24px;
    padding-left: 24px;
}

.popup-template .modal-content img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

ul.dropdown-menu-provinceselect li a {
    padding-left: 9px;
    line-height: 30px;
    color: black;
}

ul.dropdown-menu-provinceselect li {
    border: 1px solid #EFEFEF;
    height: 30px;
}

ul.dropdown-menu-provinceselect li:hover {
    border: 1px solid #5CB85C;
}

ul.dropdown-menu-provinceselect li a strong {
    font-weight: 400 !important;
}

.calloutbutton1 .fa, .calloutbutton2 .fa {
    color: white;
    font-size: 25px;
}

.calloutbutton1, .calloutbutton2 {
    display: none;
}

.calloutbutton1 {
    margin: 12px 0 0 7.5%;
}

.calloutbutton2 {
    margin: 10px 7.5% 0 0;
}

/*=============ANIMATION STARTS HERE=============*/
@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0);
    }
    40% {
        -webkit-transform: translateY(-5px);
    }
    60% {
        -webkit-transform: translateY(-2px);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-5px);
    }
    60% {
        transform: translateY(-2px);
    }
}

/* other styles / angular helping styles */
.addpointer {
    cursor: pointer;
}

.col-sm-9.sm-padding-remover {
    /* start 'enter' transition */
    /* end 'enter' transition */
}

.col-sm-9.sm-padding-remover.ng-enter {
    /* transition on enter for .5s */
    transition: .5s;
    /* start with opacity 0 (invisible) */
    opacity: 0;
}

.col-sm-9.sm-padding-remover.ng-enter-active {
    /* end with opacity 1 (fade in) */
    opacity: 1;
}

#loading-bar .bar {
    background-color: #007ac2;
!important;
    height: 4px !important;
}

/* Modern CSS5 Loader animation */

#cssload-loader {
    position: absolute;
    margin: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translate(-50%, -50%);
    width: 400px;
}

#cssload-loader ul {
    margin-top: 43px !important;
    list-style: none;
    width: 85px;
    height: 62px;
    position: absolute;
    padding: 0;
    height: 9px;
}

#cssload-loader ul li {
    position: absolute;
    width: 2px;
    height: 0;
    background-color: rgb(52, 195, 247);
    bottom: 0;
}

#cssload-loader li:nth-child(1) {
    left: 0;
    animation: cssload-sequence1 1.15s ease infinite 0;
    -o-animation: cssload-sequence1 1.15s ease infinite 0;
    -ms-animation: cssload-sequence1 1.15s ease infinite 0;
    -webkit-animation: cssload-sequence1 1.15s ease infinite 0;
    -moz-animation: cssload-sequence1 1.15s ease infinite 0;
}

#cssload-loader li:nth-child(2) {
    left: 14px;
    animation: cssload-sequence2 1.15s ease infinite 0.12s;
    -o-animation: cssload-sequence2 1.15s ease infinite 0.12s;
    -ms-animation: cssload-sequence2 1.15s ease infinite 0.12s;
    -webkit-animation: cssload-sequence2 1.15s ease infinite 0.12s;
    -moz-animation: cssload-sequence2 1.15s ease infinite 0.12s;
}

#cssload-loader li:nth-child(3) {
    left: 28px;
    animation: cssload-sequence1 1.15s ease-in-out infinite 0.23s;
    -o-animation: cssload-sequence1 1.15s ease-in-out infinite 0.23s;
    -ms-animation: cssload-sequence1 1.15s ease-in-out infinite 0.23s;
    -webkit-animation: cssload-sequence1 1.15s ease-in-out infinite 0.23s;
    -moz-animation: cssload-sequence1 1.15s ease-in-out infinite 0.23s;
}

#cssload-loader li:nth-child(4) {
    left: 43px;
    animation: cssload-sequence2 1.15s ease-in infinite 0.35s;
    -o-animation: cssload-sequence2 1.15s ease-in infinite 0.35s;
    -ms-animation: cssload-sequence2 1.15s ease-in infinite 0.35s;
    -webkit-animation: cssload-sequence2 1.15s ease-in infinite 0.35s;
    -moz-animation: cssload-sequence2 1.15s ease-in infinite 0.35s;
}

#cssload-loader li:nth-child(5) {
    left: 57px;
    animation: cssload-sequence1 1.15s ease-in-out infinite 0.46s;
    -o-animation: cssload-sequence1 1.15s ease-in-out infinite 0.46s;
    -ms-animation: cssload-sequence1 1.15s ease-in-out infinite 0.46s;
    -webkit-animation: cssload-sequence1 1.15s ease-in-out infinite 0.46s;
    -moz-animation: cssload-sequence1 1.15s ease-in-out infinite 0.46s;
}

#cssload-loader li:nth-child(6) {
    left: 71px;
    animation: cssload-sequence2 1.15s ease infinite 0.58s;
    -o-animation: cssload-sequence2 1.15s ease infinite 0.58s;
    -ms-animation: cssload-sequence2 1.15s ease infinite 0.58s;
    -webkit-animation: cssload-sequence2 1.15s ease infinite 0.58s;
    -moz-animation: cssload-sequence2 1.15s ease infinite 0.58s;
}

@keyframes cssload-sequence1 {
    0% {
        height: 9px;
    }
    50% {
        height: 47px;
    }
    100% {
        height: 9px;
    }
}

@-o-keyframes cssload-sequence1 {
    0% {
        height: 9px;
    }
    50% {
        height: 47px;
    }
    100% {
        height: 9px;
    }
}

@-ms-keyframes cssload-sequence1 {
    0% {
        height: 9px;
    }
    50% {
        height: 47px;
    }
    100% {
        height: 9px;
    }
}

@-webkit-keyframes cssload-sequence1 {
    0% {
        height: 9px;
    }
    50% {
        height: 47px;
    }
    100% {
        height: 9px;
    }
}

@-moz-keyframes cssload-sequence1 {
    0% {
        height: 9px;
    }
    50% {
        height: 47px;
    }
    100% {
        height: 9px;
    }
}

@keyframes cssload-sequence2 {
    0% {
        height: 19px;
    }
    50% {
        height: 62px;
    }
    100% {
        height: 19px;
    }
}

@-o-keyframes cssload-sequence2 {
    0% {
        height: 19px;
    }
    50% {
        height: 62px;
    }
    100% {
        height: 19px;
    }
}

@-ms-keyframes cssload-sequence2 {
    0% {
        height: 19px;
    }
    50% {
        height: 62px;
    }
    100% {
        height: 19px;
    }
}

@-webkit-keyframes cssload-sequence2 {
    0% {
        height: 19px;
    }
    50% {
        height: 62px;
    }
    100% {
        height: 19px;
    }
}

@-moz-keyframes cssload-sequence2 {
    0% {
        height: 19px;
    }
    50% {
        height: 62px;
    }
    100% {
        height: 19px;
    }
}

/* End Modern CSS5 Loader Animation */

.hide-input {
    /* This method totally works and hides the input */
    opacity: 0;
}

.invitebutton {
    border: none;
    font-family: Roboto;
    font-size: inherit;
    color: inherit;
    background: none;
    display: inline-block;
    font-weight: 700;
    outline: none;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.invitebutton:hover {
    background-color: #eee;
}

.col-sm-9.sm-padding-remover.ng-enter {
    /* transition on enter for .5s */
    transition: .5s;
    /* start with opacity 0 (invisible) */
    opacity: 0;
}

.col-sm-9.sm-padding-remover.ng-enter-active {
    /* end with opacity 1 (fade in) */
    opacity: 1;
}

.file-loader {
    background-color: rgba(255, 255, 255, 0.8) !important;
    color: black !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1009;
    text-align: center;
    font-size: 22px;
    overflow: hidden;
}

.file-loader > .sk-folding-cube {
    margin: 71px auto 0 auto;
}

.sk-folding-cube {
    margin: 20px auto;
    width: 40px;
    height: 40px;
    position: relative;
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}

.sk-folding-cube .sk-cube {
    float: left;
    width: 50%;
    height: 50%;
    position: relative;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    background-color: #FF9800;
}

.sk-folding-cube .sk-cube:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
    animation: sk-foldCubeAngle 2.4s infinite linear both;
    -webkit-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    background-color: #33ff00;
}

.sk-folding-cube .sk-cube2 {
    -webkit-transform: scale(1.1) rotateZ(90deg);
    transform: scale(1.1) rotateZ(90deg);
    background-color: #ff002d;
    /* color: red; */
}

.sk-folding-cube .sk-cube3 {
    -webkit-transform: scale(1.1) rotateZ(180deg);
    transform: scale(1.1) rotateZ(180deg);
    background-color: #00e7ff;
}

.sk-folding-cube .sk-cube4 {
    -webkit-transform: scale(1.1) rotateZ(270deg);
    transform: scale(1.1) rotateZ(270deg);
    background-color: #c002f1;
}

.sk-folding-cube .sk-cube2:before {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    background-color: white;
}

.sk-folding-cube .sk-cube3:before {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
    background-color: #d8ff00;
}

.sk-folding-cube .sk-cube4:before {
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
    background-color: #2700ff;
}

@-webkit-keyframes sk-foldCubeAngle {
    0%, 10% {
        -webkit-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    }
    25%, 75% {
        -webkit-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
    }
    90%, 100% {
        -webkit-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
    }
}

@keyframes sk-foldCubeAngle {
    0%, 10% {
        -webkit-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    }
    25%, 75% {
        -webkit-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
    }
    90%, 100% {
        -webkit-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
    }
}

/* quickpoll */
.quickPollThankYou {
    height: 100px;
    line-height: 100px;
    background-color: #007ac2;
    color: #ffffff;
    text-align: center;
    vertical-align: middle;
    font-size: 20px;
}

/* social */
.btn-footer-social {
    color: #ffffff !important;
    text-decoration: none !important;
    display: inline-table !important;
    padding: 10px !important;
    margin: 0;
}

.btn-footer-social:active {
    box-shadow: none;
}

.btn-footer-social:hover {
            background-color: #666666;
            border-radius: 50%;
        }.fa-2x:not(.surveyEditor.fa-2x) {
    vertical-align: middle !important;
}

/* important styles that need to be close to the main media queries.*/

.sm-padding-remover {
    padding: 0;
}

.panel.panel-white.zeromargin {
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
}

a.nice-link {
    word-break: break-all;
}

.mroc-primary-background {
    background-color: #007ac2;
}

video {
    width: auto;
    height: auto;
    min-width: 105px;
}

.ribbon {
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 40px;
}

.ribbon.active div {
    background-color: #007ac2;
    color: #ffffff;
}

.ribbon div {
    background-color: #c8c8c8;
    color: black;
    padding: 0.5em 0;
    text-align: center;
    height: 42px;
}

/* main media queries */
@media (min-width: 1200px) {
    .charityarticle {
        height: 400px;
    }

    .sidebarlist {
        padding-left: 50px !important;
    }
}

.Site-content--full {
    padding: 0;
}

.Site-content--full::after {
    content: none;
}

@media (max-width: 1100px) {
    .charityarticle {
        height: 400px;
    }

    ul#settingsTab li {
        min-height: 94px;
        width: 20%;
        display: table;
        padding-bottom: 5px !important;
    }

    ul#settingsTab li a {
        min-height: 100%;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
}

@media (min-width: 992px) {
    .col-sm-12.col-md-2.activityblocks {
        width: 20% !important;
    }

    span.submenu-icon {
        margin-right: 20px;
    }

    .sidebarlist {
        padding-top: 0;
        padding-bottom: 0;
        padding-right: 20px;
        padding-left: 20px !important;
    }

    /* header*/
    .header-container .header-wrapper #header-toolbar #user-profile a .avatar {
        margin-right: 16px;
    }

    .header-container .header-wrapper #header-toolbar #user-profile a .user {
        display: initial;
    }

    .header-container .header-wrapper #header-toolbar #user-profile a .expand-ico {
        display: initial;
    }
}

@media (max-width: 991px) {
    ul.dropdown-menu.dropdown-menu-profile {
        width: 160px;
        left: -74px;
    }

    ul#settingsTab li a {
        color: black;
        padding: 20px 6px 22px 6px;
        background-color: white;
    }

    ul.list-inline.font-size-xs li {
        margin-top: 0;
    }

    .mainitems {
        border-top: 1px solid #ddd;
        padding: 10px 0;
    }

    .discussionitem {
        padding-top: 5px;
    }

    .Site a.list-group-item, li.list-group-item {
        font-size: 14px;
    }

    span.submenu-icon {
        font-size: 16px;
    }

    a.list-group-item.sidebarlist-collapse {
        /* margin-left: 5px; */
        /* font-size: 14px; */
    }
}

/* MENU - RESPONSIVE STARTS HERE*/
@media only screen and (max-width: 900px) {

    ul#myTab li a {
        padding: 20px 48px 24px 48px;
    }

    /*=============NAVIGATION STARTS HERE=============*/
    .Site #navigation menu-link a.list-group-item.collapseable.collapsed:after {
        margin: 5px 0px 0 0;
    }

    .side-menu {
        padding: 0;
    }

    .discussion-li {
        width: 110px;
    }

    .Site a.list-group-item.sidebarlist-collapse.fullwidth {
        padding: 10px 0 10px 0 !important;
    }

    .Site a.list-group-item.sidebarlist-collapse.fullwidth {
        padding: 5px 10px !important;
    }


    /*=============LAYOUT STARTS HERE=============*/
    div#logoBox {
        background-color: #E91E63;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
    }

    a#logo {
        width: 150px;
        height: 35px;
        margin: auto;
        position: relative;
        top: 9px;
        float: none;
        padding: 8px 0;
    }

    .padTop {
        padding-top: 10%;
    }

    .padBottom {
        padding-bottom: 10%;
    }
}

@media screen and (max-width: 768px) {
.Site .Footer {
        margin-bottom: 55px;
    }    #quickSelectDiv {
        display: grid;
    }

    #quickSelectDiv #quickSelectUI {
        width: 100%;
    }

    .Site ul#myTab li {
        width: 100%;
        border-bottom: 1px solid #ddd;
        border-right: none;
    }

    .statusDiv {
        margin-right: 15px;
    }

    .scaleNameAngular {
        width: 100% !important;
    }

    .scalesColsm {
        display: inline-block;
    }

    .textBolded {
        font-size: 14px;
    }

    .discussions .pageheader {
        width: 100%;
        display: inline-block;
    }

    .Site menu-toggle a.list-group-item.sidebarlist-collapse {
        margin-left: 0px;
    }

    .side-collapse {
        top: 0px;
        bottom: 0;
        right: 0;
        width: 256px;
        position: fixed;
        overflow: auto;
        /* transition: all 0.6s cubic-bezier(.87, -.41, .19, 1.44);*/
        background-color: #007ac2;
        border: 1px solid black;
    }

    .side-collapse.in {
        width: 0;
    }

    .navbar-nav li.dropdown {
        padding-right: 0;
    }

    .navbar-default {
        padding-right: 0;
    }

    .navbar .navbar-default {
        border-right: 1px solid #ddd;
    }

    .openendinput {
        margin-top: 10px;
    }

    .pull-right {
        display: inline-block;
        float: none !important;
        text-align: center;
    }
}

@media (min-width: 768px) {
    .Site .Footer-social a, .Site .Footer-social iframe {
        margin: 0;
    }

    .modal-dialog.modal-lg {
        width: 720px;
    }

    .modal-dialog.modal-xl {
        width: 1000px;
        padding: 10px;
        margin: 0 auto;
    }

    .modal-dialog.modal-xxl {
        width: 80%;
    }

    .span.ng-binding {
        color: black;
        /* font-size: 16px; */
        font-family: Roboto;
    }

    .panel {
        display: flex;
        flex-direction: column;
        align-content: stretch;
    }

    .panel-dashboard {
        min-height: 400px;
    }

    .Site .panel-body:not(.Site .conductSurveyPadding .panel-body) {
        display: flex;
        flex-grow: 1;
    }

    li.footerlink {
        display: inline-flex !important;
        font-size: 14px;
    }

    li.footerlink a {
        padding: 10px;
    }

    .Site .list-group-item {
        padding: 5px;
        cursor: pointer;
        margin-bottom: 0px;
    }

    md-content#navigation {
        left: 0;
        position: relative;
    }

    .sidebarlist {
        background-color: white;
        border: 1px solid #e8e8e8;
        padding: 0 15px;
    }

    span.submenu-icon {
        margin-right: 5px;
    }

    /* Header */
    .header-container .header-wrapper #header-toolbar #user-profile a .avatar {
        margin: 0;
    }

    .header-container .header-wrapper #header-toolbar #user-profile a .user {
        display: none;
    }
}

@media (max-width: 767px) {
    .mrocNavMobile {
        max-width: 89%;
        width: 89% !important;
    }

    #copyreferral {
        width: 97%;
    }

    .invite-list {
        padding: 0;
    }

    .Site .header-container {
        margin-bottom: 5px;
    }

    .SiteLogin .Footer {
        margin-bottom: 0 !important;
        padding: 10px !important;
    }

    .SiteLogin li.footerlink {
        font-size: 12px !important;
    }

    .Site .header-container .header-wrapper #header-toolbar {
        border-bottom: 1px solid #e8e8e8;
    }

    #discussioneditor .md-area {
        padding: 10px 0px 10px 0px;
    }

    .cropArea {
        background: #E4E4E4;
        overflow: hidden;
        height: 250px;
    }

    .discussion-header {
        padding: 5px;
    }

    md-content#navigation {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        background-color: black;
        z-index: 1001;
    }

    md-content#navigation ul li {
        flex-grow: 1;
    }

    ul.side-menu.list-group {
        display: flex;
        margin-bottom: 0px;
    }

    md-button.md-button-toggle.list-group-item.sidebarlist-collapse, md-content#navigation ul li a {
        padding: 5px 10px;
        font-size: 10px;
    }

    md-button.md-button-toggle.list-group-item.sidebarlist-collapse:hover {
        background-color: #008adc;
        color: #FFF;
    }

    md-content#navigation .nav-trigger {
        display: none;
        position: absolute;
        top: -3px;
        left: 50%;
        margin-left: -23.5px;
        background-color: #007ac2;
        border-radius: 50%;
        overflow: hidden;
        text-indent: -9999px;
        white-space: nowrap;
        z-index: 1001;
        cursor: pointer;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        -webkit-animation-name: bounce;
        animation-name: bounce;
        -webkit-animation-duration: 2s;
        animation-duration: 2s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        animation-iteration-count: 2;
        -webkit-animation-iteration-count: 2;
        -webkit-animation-delay: 3s;
        animation-delay: 3s;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        transition: all 0.3s;
    }

    md-content#navigation ul.is-hidden {
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0);
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        transition: transform 0.5s;
    }

    md-content#navigation ul li {
        float: left;
        list-style: none;
        text-align: center;
        padding: 0;
        border-bottom: 1px solid #c6c6c6;
    }

    md-content#navigation ul li:last-child {
        border-bottom: none !important;
    }

    md-button.md-button-toggle.list-group-item.sidebarlist-collapse.md-fab {
        background-color: #007ac2;
    }

    md-content#navigation ul li a {
        display: block;
        color: #ffffff;
        background-color: #007ac2;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        transition: all .3s;
    }

    md-content#navigation ul li a:hover, md-content#navigation ul li a:focus, md-button.md-button-toggle.list-group-item.sidebarlist-collapse.md-fab:hover, md-button.md-button-toggle.list-group-item.sidebarlist-collapse.md-fab:focus {
        background-color: #007ac2;
        color: #ffffff !important;
    }

    md-content#navigation .sidebarlist-collapse.active {
        background-color: #007ac2 !important;
    }

    md-button-toggle.list-group-item ul li {
        float: none;
        list-style: none;
        text-align: left;
        padding: 0;
    }

    .menu-toggle-list {
        position: fixed;
        bottom: 54px;
        left: 0;
        display: grid;
        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
        list-style: none;
        width: 100%;
        max-height: 144px;
        overflow-y: auto;
        text-overflow: ellipsis;
    }

    .closedNav {
        transition: all 0.5s linear;
        opacity: 0;
    }

    .openNav {
        transition: all 0.5s linear;
        opacity: 1;
    }

    #docs-menu-Site\20 Content > li > menu-link > a, #docs-menu-Discussions > li > menu-link > a, #docs-menu-Rewards > li > menu-link > a {
        background-color: #005a8f !important;
        color: #FFF;
    }

    #docs-menu-Site\20 Content > li > menu-link > a:hover, #docs-menu-Discussions > li > menu-link > a:hover, #docs-menu-Rewards > li > menu-link > a:hover {
        background-color: #008adc !important;
        color: #FFF;
    }


    .menu-icon-text {
        width: 100px;
        min-width: 0;
    }

    md-content#navigation ul li a, md-button.md-button-toggle.list-group-item.sidebarlist-collapse {
        border-left: 1px solid rgba(0, 0, 0, 0.12);
    }

    md-button.sidebarlist-collapse span.pull-right.fa.fa-chevron-down.md-toggle-icon {
        position: absolute;
        right: 2px;
        top: 4px;
    }

    .Site .list-group .panel-body {
        display: block;
        padding: 0;
    }

    a.accordion-toggle.faq-toggle.collapsed:after {
        margin: 0;
    }

    .pageheader-forumgroup {
        width: 100% !important;
    }

    div#discussionsmain {
        width: 100% !important;
    }

    .sm-inline {
        display: inline-block !important;
    }

    span.menu-icon {
        display: block;
        font-size: 1.8em;
        color: #ffffff;
    }

    md-content#navigation .list-group-item {
        border-radius: 0 !important;
        color: #ffffff !important;
        background-color: #007ac2;
        height: 55px;
    }

    #navigation > div > ul > li {
        margin-bottom: -1px;
    }

    md-content#navigation .list-group-item .menu-icon.fa-fw {
        width: 100%;
    }

    .mainitems {
        display: inline-block;
        border-top: 1px solid #ddd;
        padding: 10px 0;
        width: 100%;
    }

    ul.rectangle-listul {
        padding: 0;
    }

    .reply-section {
        padding: 40px 0px 0 0;
    }

    .reply-holder {
        margin-bottom: 10px;
    }

    .ie11 .indextablist {
        height: 700px;
    }

    .reply-collapse {
        width: 100%;
    }

    ul#settingsTab li a {
        padding: 20px 15px 22px 15px;
        background-color: white;
    }

    span.user-info {
        color: #ffffff;
    }

    li.user-cash-rewards {
        position: inherit;
    }

    .Site span.cash-rewards-amount.hidden-xs {
        min-width: 10px;
        padding: 3%;
        color: black;
        vertical-align: baseline;
        white-space: nowrap;
        text-align: center;
        border-radius: 13px;
        text-shadow: none;
        line-height: 11px;
        background-color: white;
        position: initial;
        top: -6px;
        left: -3px;
        font-size: 11px;
        height: auto;
        z-index: 9999;
        margin: 0;
    }

    .navbar-nav .dropdown-menu {
        background-color: white;
        color: #ffffff;
    }

    .Site .dropdown-menu > li > a {
        color: #ffffff;
    }

    .navbar-nav {
        background-color: transparent;
        border-width: 0;
        z-index: 5;
    }

    .nav .open > a, .nav .open > a:focus, .nav .open > a:hover {
        background-color: transparent;
        border-color: transparent;
    }

    .navbar-nav .open .dropdown-menu {
        background-color: black;
        border-color: transparent;
    }

    .invite-4col {
        margin: 20px 0;
    }

    li.footerlink {
        display: inline-flex !important;
        font-size: 12px;
        line-height: 10px;
        padding: 0;
        margin: 0;
    }

    .Site .Footer-credits {
        font-size: 10px;
    }

    ul.dropdown-menu.dropdown-menu-right {
        transform-origin: right top 0;
        right: -150px;
        left: inherit;
    }

    a.list-group-item.side-menu-list {
        background-color: #007ac2;
    }

    a.list-group-item.side-menu-list.active {
        background-color: #49BD65;
    }

    a.list-group-item.side-menu-list.bottom-menu-collapse.collapsed {
        background-color: #007ac2;
    }

    a.list-group-item.side-menu-list.bottom-menu-collapse {
        background-color: #49BD65;
    }

    a.list-group-item.side-menu-list {
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border-left: 1px solid rgba(0, 0, 0, 0.12);
    }

    .side-menu-icon-text {
        color: #ffffff;
    }

    .discussion-listings {
        line-height: 2.5;
    }

    .tabcordion {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .indextablist {
        padding: 0 !important;
    }

    .surveyitems {
        margin: 0 20px;
    }

    .surveyinvites {
        padding: 10px 20px 20px 20px;
    }

    /* header */
    .header-container .header-wrapper #header-toolbar #user-profile a .avatar {
        margin: 0;
    }

    .header-container .header-wrapper #header-toolbar #user-profile a .user {
        display: none;
    }

    .header-container .header-wrapper #header-toolbar #user-profile a .expand-ico {
        display: none;
    }

    .header-container .header-wrapper #header-toolbar #user-profile.dropdown.open .dropdown-menu.dropdown-menu-right {
        position: absolute;
        background-color: #007ac2;
        -webkit-box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.38);
        box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.38);
        width: 220px;
    }

    .header-container .header-wrapper #header-toolbar #user-profile.dropdown.open .dropdown-menu.dropdown-menu-right > li > a {
        color: #ffffff;
    }

    .header-container .header-wrapper #header-toolbar #user-profile.dropdown.open .dropdown-menu.dropdown-menu-right > li > a:hover {
        color: white !important;
    #ffffff -color: rgba(158, 158, 158, 0.18);
    }

    .header-container .header-wrapper #header-toolbar #user-profile.dropdown.open .dropdown-menu.dropdown-menu-right > li > a i {
        margin: auto 16px auto 0;
        vertical-align: middle;
        color: rgba(255, 255, 255, 0.97);
    }

    .closing > .dropdown-menu {
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        -moz-transition: all 1000ms cubic-bezier(0.25, 0.8, 0.25, 1);
        -ms-transition: all 1000ms cubic-bezier(0.25, 0.8, 0.25, 1);
        -o-transition: all 1000ms cubic-bezier(0.25, 0.8, 0.25, 1);
        -webkit-transition: all 1000ms cubic-bezier(0.25, 0.8, 0.25, 1);
        transition: all 1000ms cubic-bezier(0.25, 0.8, 0.25, 1);
        -webkit-transition-delay: 100ms;
        transition-delay: 100ms;
    }

    .closing > .dropdown-menu > * {
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        -moz-transition: all 200ms cubic-bezier(0.25, 0.8, 0.25, 1);
        -ms-transition: all 200ms cubic-bezier(0.25, 0.8, 0.25, 1);
        -o-transition: all 200ms cubic-bezier(0.25, 0.8, 0.25, 1);
        -webkit-transition: all 200ms cubic-bezier(0.25, 0.8, 0.25, 1);
        transition: all 200ms cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .xs-padding-remover {
        padding: 0;
    }

    .tagpill {
        padding: 5px;
    }
}

@media (max-width: 600px) {

    #threadsButtons {
        margin-left: 42px;
    }

    .alert-callout {
        padding: 10px;
    }

    .discussionitem {
        padding-top: 5px;
    }

    .cash-rewards-amount {
        height: 22px;
    }

    .discussion-li {
        width: 80px;
    }

    .pageheader.invite-page {
        padding: 15px 0px 30px 10px;
    }

    .charityarticle {
        height: 450px;
    }

    a.list-group-item.sidebarlist-collapse.fullwidth {
        padding: 10px 0 !important;
    }

    .imgbuttongroup {
        font-size: 12px;
        padding: 6px 6px;
    }
}

@media (min-width: 576px) {
    .Footer-credit {
        display: inline-block;
        margin: 0 .25em;
    }

    .Footer-creditSeparator {
        display: inline-block;
        padding: 0 .25em;
    }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
    md-button.md-button-toggle.list-group-item.sidebarlist-collapse, md-content#navigation ul li a {
        padding: 5px 10px;
        font-size: 10px;
    }
}

/* worst case scenario*/
@media (max-width: 420px) {
    img.navbar-logo {
        width: auto;
        height: 40px;
    }

}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .flex, .flex > div[class*='col-'] {
        display: table !important;
    }

    .panel {
        display: block !important;
    }

    .Site .panel-body {
        display: block !important;
    }

    a#dropdownMainmenu {
        padding-top: 15px;
    }

    .discussion-postcount {
        display: none;
    }

    .indextablist {
        background-color: white;
        border: 1px solid #DDD;
        border-bottom-width: 2px;
    }

    .list-group-item, ul#myTab li a {
        outline-style: none !important;
    }

    .header-container .header-wrapper #header-toolbar #user-profile a {
        padding-right: 37px;
    }
}

/* Login.css */

body.Site.SiteLogin {
background: white; -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: white !important;
    font-family: Roboto;
    min-height: 100vh;
    position: relative;
    margin: 0;
}
.ReactCourselSiteLogin {
background: white; -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: white !important;
    font-family: Roboto;
    min-height: 80vh;
    position: relative;
    margin: 0;
}

.slick-slider .slick-track, .slick-slider .slick-list{
        height: 100% !important;
    }
    .SiteLogin .slick-slide{
        max-height: none !important;
    }
    .SiteLogin .login-carousel{
        margin: 0 !important;
    }@media (max-height: 850px) {
    body.Site.SiteLogin {
        height: auto;
    }

}

.SiteLogin li.footerlink {
    position: relative !important;
    display: inline-flex !important;
    font-size: 14px;
    color: #ffffff;
}

.SiteLogin img.navbar-logo {
    width: 140px;
    height: 60px;
}

.SiteLogin .login-brand-container.visible-xs-inline-block.visible-sm-inline-block {
background-color: rgba(255, 255, 255, 0.6);}

.SiteLogin a.brand img {
    width: auto !important;
    height: 35px;
    padding: 0 0 0 30px !important;
}
 a.brand img {
    width: auto !important;
    height: 35px;
    padding: 0 0 0 30px !important;
}
.SiteLogin .login-brand {
    max-height: 100px;
    max-width: 100%;
}

.SiteLogin .register-background-text {
    color: black;
    font-weight: 600;
}

.SiteLogin .btn-square {
    border-radius: 0px;
}

.SiteLogin .nav > li > a:focus,
.SiteLogin .nav > li > a:hover {
    text-decoration: none;
    background-color: rgba(0, 0, 0, 0.08);
    border-radius: 4px;
}

.SiteLogin .full {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.SiteLogin .sm-padding-remover {
    padding: 0;
}

/* Login */
.SiteLogin .footerlink-header {
    background: white;
    padding: 10px 0px;
    position: relative;
}

/* center tabs */
.SiteLogin .nav-tabs > li,
.SiteLogin .nav-pills > li {
    float: none;
    display: inline-block;
    zoom: 1;
}

.SiteLogin .nav-tabs {
    border: none;
    text-align: center;
    margin-bottom: 10px;
}

.SiteLogin nav-tabs > li > .active,
.SiteLogin .nav-tabs > li > .active:focus {
    color: black;
    cursor: default;
    background-color: transparent;
    border: none;
}

.SiteLogin .forgotpwlink {
    color: #000;
}

.SiteLogin .forgotpwlink-bground {
    font-weight: 600;
}

.SiteLogin li.signup a,
.SiteLogin li.signin a {
    font-size: 24px;
    font-weight: 600;
    border-radius: 4px;
    color: black;
    border: 1px solid#007ac2;
    background: rgba(255, 255, 255, 0.4);
}

.SiteLogin li.signup a.active,
.SiteLogin li.signin a.active,
.SiteLogin li.signup a.active:focus,
.SiteLogin li.signin a.active:focus {
    background-color: #007ac2;
    color: #ffffff;
}

.SiteLogin .loginabout h1, .SiteLogin .loginabout h3 {
    color: #ffffff;
}

.SiteLogin .loginabout {
    background: #007ac2;
    color: #ffffff;
    padding: 60px 50px 0 50px;
}

.slick-prev:before, .slick-next:before {
    color: white;
}

.SiteLogin .registrationabout {
    background: #007ac2;
    color: #ffffff;
    padding: 60px 50px 0 50px;
}

.SiteLogin .loginform {
    background: white;
    padding: 10px 50px 0 50px;
}

@media (min-width: 768px) {
    .SiteLogin .loginbanner, .SiteLogin .registrationform-banner {
        border-right: 2px solid#007ac2;
    }
}

@media (max-width: 767px) {
    .SiteLogin .loginbanner, .SiteLogin .registrationform-banner {
        border-bottom: 2px solid#007ac2;
        margin-bottom: 20px;
    }

    .SiteLogin li.signin > a, .SiteLogin li.signup > a {
        font-size: 18px;
    }
}

.SiteLogin .loginform-banners:last-of-type, .registration-banners:last-of-type {
    border-bottom: 2px solid#007ac2;
}
.react-loginform-banners:last-of-type {
    border-bottom: 2px solid#007ac2;
}

.SiteLogin .loginform-banners:not(:first-of-type), .registration-banners {
    background: white;
    padding-top: 10px;
    border-top: 2px solid#007ac2;
    height: auto;
    overflow: hidden;
}
.react-loginform-banners {
    background: white;
    padding-top: 10px;
    border-top: 2px solid#007ac2;
    height: auto;
    overflow: hidden;
}
.SiteLogin .loginform-opacity {
    background: rgba(255, 255, 255, 0.6) !important;
}

.SiteLogin .registrationform {
    background: white;
    padding: 10px 50px 10px 50px;
    color: #007ac2;
}

.SiteLogin .registrationform-banners {
    height: 360px;
}

.SiteLogin .forgotpasswordtitle {
    background: white;
    margin: 25px 0;
}

.SiteLogin .enterEmailH4 {
    color: black;
    margin-bottom: 15px;
    margin-top: 15px;
    font-weight: 600;
}

.SiteLogin .loginmessage {
    margin: 50px 0 0 0;
}

.SiteLogin label.loginlabel {
    display: block;
    max-width: 100%;
    margin-bottom: 0;
    font-weight: 400;
}

/* slick carousel */
.SiteLogin .slick-dots {
    bottom: -24px;
}

/* centered columns styles */
.SiteLogin .row-centered {
    text-align: center;
}

.SiteLogin .col-centered {
    display: inline-block;
    float: none;
    /* reset the text-align */
    text-align: left;
    /* inline-block space fix */
    margin-right: -4px;
}

.SiteLogin .sign-up,
.SiteLogin .sign-in {
    position: relative !important;
    display: inline-flex !important;
}

.SiteLogin li.sign-up.col-centered a,
.SiteLogin li.sign-in.col-centered a {
    color: black;
    font-size: 24px;
}

.SiteLogin li.sign-in.col-centered a {
    font-weight: 800;
}

.SiteLogin span.sask-bold {
    font-weight: 900;
}

.SiteLogin .login-button-padding {
    margin-bottom: 20px;
}

/* sticky footer*/

.SiteLogin .Site {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
}

.SiteLogin .Site-header {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
}

.SiteLogin .Site-content {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    padding: 1.5em 0.5em;
    width: 100%;
padding: 1.5em 0.5em;}

.SiteLogin .client.Site-content {
    min-height: calc(100vh) !important;
}

.SiteLogin .Site-content::after {
    content: '\00a0'; /*   */
    display: block;
    height: 0px;
    visibility: hidden;
}

.SiteLogin .Site-content--full {
    padding: 0;
}

.SiteLogin .Site-content--full::after {
    content: none;
}

/* footer */

.SiteLogin .Footer {
    padding: 5px;
    background: #333333;
    color: #ffffff;
}

.SiteLogin .Footer-credits {
    margin: 0;
    padding: 0;
}

.SiteLogin .Footer-credit {
    display: block;
    margin: 0;
}

.SiteLogin .Footer-creditSeparator {
    display: none;
}

.SiteLogin .loginclientform {
    margin-top: 50px;
}

/*######################### cards and modals #####################*/
.SiteLogin .card .card-height-indicator {
    margin-top: 100%;
}

.SiteLogin .card .card-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.SiteLogin .card .card-image {
    height: 60%;
    position: relative;
    overflow: hidden;
}

.SiteLogin .card .card-image img {
    width: 100%;
    height: 100%;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    pointer-events: none;
}

.SiteLogin .card .card-image .card-image-headline {
    position: absolute;
    bottom: 16px;
    left: 18px;
    color: #ffffff;
    font-size: 2em;
}

.SiteLogin .card .card-body {
    height: 30%;
    padding: 18px;
}

.SiteLogin .card .card-footer {
    height: 10%;
    padding: 18px;
}

.SiteLogin .card .card-footer button {
    margin: 0 !important;
    position: relative;
    bottom: 25px;
    width: auto;
}

.SiteLogin .card .card-footer button:first-child {
    left: -15px;
}

.SiteLogin .modal-content {
    -webkit-box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
    box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
    border-radius: 0;
    border: 3px solid white;
}

.SiteLogin .modal-content .modal-header {
    border-bottom: none;
    padding-top: 24px;
    padding-right: 24px;
    padding-bottom: 0;
    padding-left: 24px;
}

.SiteLogin .modal-content .modal-body {
    padding-top: 24px;
    padding-right: 24px;
    padding-bottom: 16px;
    padding-left: 24px;
}

.SiteLogin .modal-content .modal-footer {
    border-top: none;
    padding: 7px;
}

.SiteLogin .modal-content .modal-footer button {
    margin: 0;
    padding-left: 16px;
    padding-right: 16px;
    width: auto;
}

.SiteLogin .modal-content .modal-footer button.pull-left {
    padding-left: 5px;
    padding-right: 5px;
    position: relative;
    left: -5px;
}

.SiteLogin .modal-content .modal-footer button + button {
    margin-bottom: 16px;
}

.SiteLogin .modal-content .modal-body + .modal-footer {
    padding-top: 0;
}

.SiteLogin .help-block {
    display: none;
}

.SiteLogin #formLogin .form-control-wrapper {
    margin-bottom: 20px;
}

/*logged out pages*/

.SiteLogin .about-holder,
.SiteLogin .privacy-holder,
.SiteLogin .faq-holder,
.SiteLogin .terms-holder,
.SiteLogin .parents-holder {
    background-color: white;
    padding: 0px 20px 20px 20px;
    border: 1px solid #DDD;
    border-bottom-width: 2px;
    margin: 10px 0 20px 0;
}

.SiteLogin .main-text {
    padding: 10px 0 0 0;
}

.SiteLogin .main-text table {
    clear: both;
}

.SiteLogin .main-text:after {
    content: "";
    display: block;
    clear: both;
}

.SiteLogin .main-text {
    overflow: hidden;
}

.SiteLogin .main-text h2 a {
    margin: 0 0 10px;
    color: black;
    font-size: 16px;
}

.SiteLogin .main-text ul li,
.SiteLogin .main-text ol {
    margin: 0 40px 10px;
    line-height: 24px;
}

.SiteLogin .main-text p b {
    margin: 0 0 4px;
    color: black;
    font-size: 16px;
}

.SiteLogin .main-text ul p {
    margin: 0 0 4px;
    color: black;
    font-size: 16px;
}

/* faq */

.SiteLogin .faq {
    background: white;
    padding-bottom: 20px;
}

.SiteLogin .faqlinks {
    padding: 10px 0 10px 0px;
    font-weight: 600;
}

.SiteLogin .faq-group {
    padding: 5px 0 0 0
}

.SiteLogin .panel-group .panel-heading + .panel-collapse > .list-group,
.SiteLogin .panel-group .panel-heading + .panel-collapse > .panel-body {
    border-top: none;
}

.SiteLogin .panel-white > .panel-heading {
    border: none;
    -webkit-box-shadow: 0;
    box-shadow: 0
}

.SiteLogin .panel-white > .panel-heading,
.SiteLogin .panel-body.faq-body {
    border-bottom: 1px solid #ECECEC;
    -webkit-box-shadow: 0;
    box-shadow: 0
}

.SiteLogin a.accordion-toggle.faq-toggle.collapsed:after {
    font-family: FontAwesome;
    content: "\f054";
    float: right;
    color: #007ac2 !important;
}

.SiteLogin a.accordion-toggle.faq-toggle:after {
    font-family: FontAwesome;
    content: "\f078";
    float: right;
    margin-left: 15px;
    color: #007ac2 !important;
}

.SiteLogin .panel-body.faq-body {
    display: block;
}

/*######################### blockquote #####################*/

.SiteLogin .blockquote-box {
    border-right: 5px solid #E6E6E6;
    margin-bottom: 10px;
    -moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    padding-left: 5px;
}

.SiteLogin .blockquote-box .square {
    width: 100px;
    min-height: 50px;
    margin-right: 22px;
    text-align: center !important;
    background-color: #E6E6E6;
    padding: 20px 0;
}

.SiteLogin .blockquote-box.blockquote-primary {
    border-color: #357EBD;
}

.SiteLogin .blockquote-box.blockquote-primary .square {
    background-color: #428BCA;
    color: white;
}

.SiteLogin .blockquote-box.blockquote-success {
    border-color: #4CAE4C;
}

.SiteLogin .blockquote-box.blockquote-success .square {
    background-color: #5CB85C;
    color: white;
}

.SiteLogin .blockquote-box.blockquote-info {
    border-color: #46B8DA
}

.SiteLogin .blockquote-box.blockquote-info .square {
    background-color: #5BC0DE;
    color: white;
}

.SiteLogin .blockquote-box.blockquote-warning {
    border-color: #EEA236;
}

.SiteLogin .blockquote-box.blockquote-warning .square {
    background-color: #F0AD4E;
    color: white;
}

.SiteLogin .blockquote-box.blockquote-danger {
    border-color: #D43F3A;
}

.SiteLogin .blockquote-box.blockquote-danger .square {
    background-color: #D9534F;
    color: white;
}

.SiteLogin .blockquote-box.blockquote-referral {
    border-color: #3276B1;
}

.SiteLogin .blockquote-box.blockquote-referral .square {
    background-color: #3276B1;
    color: white;
}

.SiteLogin .blockquote-box.blockquote-facebook {
    border-color: #3b5999;
}

.SiteLogin .blockquote-box.blockquote-facebook .square {
    background-color: #3b5999;
    color: white;
}

.SiteLogin .blockquote-box.blockquote-twitter {
    border-color: #55ACEE;
}

.SiteLogin .blockquote-box.blockquote-twitter .square {
    background-color: #55ACEE;
    color: white;
}

.SiteLogin .whiteborder {
    border: 1px solid white;
}

.SiteLogin .header-container {
    height: 40px;
    z-index: 16;
    position: relative;
}

.SiteLogin .navbar-brand {
    float: left;
    height: 50px;
    padding: 5px 0 5px 30px;
    font-size: 18px;
    line-height: 20px;
}

/* faq not logged in */

.SiteLogin a.accordion-toggle.faq-toggle {
    display: block; /* allows for a to be clicked anywhere inside the li */
    padding: 10px 0;
    cursor: pointer;
}

.SiteLogin a.accordion-toggle.faq-toggle:hover {
    text-decoration: none;
    color: #007ac2;
}

.SiteLogin .panel-heading.zeropadding {
    padding: 0;
}

.SiteLogin .panel.zeromargin {
    margin: 0;
}

/* google font loader - stops fout by hiding fonts till ready to show */
.SiteLogin .wf-loading {
    visibility: hidden;
}

.SiteLogin .wf-active,
.SiteLogin .wf-inactive {
    visibility: visible;
    font-family: Roboto;
}

.SiteLogin .login-carousel {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.carousel-indicators {
    position: relative;
    bottom: -10px;
}

.carousel-indicators .active {
    margin: 1px 10px !important;
    width: 10px !important;
    height: 10px !important;
}

.carousel-indicators li {
    margin: 1px 10px !important;
}

.carousel-inner img {
    display: block;
    max-width: 100%;
    height: auto;
}

.SiteLogin .Footer-social a, .SiteLogin .Footer-social iframe {
    display: inline-block;
    margin: 0 10px !important;
    vertical-align: top;
}

/* Client name */
.SiteLogin .center.companytext {
    text-align: center;
    margin-top: 10px;
}

/* bootstrap alert color changes - alert css helpers */

.SiteLogin .alert-danger {
    color: white;
    background-color: #ff3860;
    border-color: #ff3860;
}

.SiteLogin .alert-success {
    color: white;
    background-color: #00d1b2;
    border-color: #00d1b2;
}

.SiteLogin .alert-warning {
    color: white;
    background-color: #ffdd57;
    border-color: #ffdd57;
}

.SiteLogin .alert-info {
    color: white;
    background-color: #3273dc;
    border-color: #3273dc;
}

.SiteLogin .alert-block {
    padding: 5px 15px;
    width: 100%;
}

/* slick img responsive - Stops image overlap on other slides most of the time. */
.SiteLogin .slick-slide img {
    display: table-cell;
    max-width: 100%;
    height: auto;
    margin: auto;
    padding-top: 10px;
}

/* Media Queries */
.SiteLogin .login-container {
    max-width: 1440px;
    margin: 0 auto;
}

@media (min-width: 992px) {
    .SiteLogin .loginabout, .SiteLogin .loginform, .SiteLogin .registrationabout, .SiteLogin {
        min-height: 490px;
        height: auto;
    }

    .registrationform {
    }
}

}
@media (min-width: 768px) and (max-width: 991px) {

    .SiteLogin .loginabout, .SiteLogin .registrationabout {
        background: #007ac2;
        padding: 0px 50px 30px 50px;
    }

    .SiteLogin .loginform {
        padding: 129px 50px 0 50px;
    }
}

@media screen and (max-width: 991px) {

    .SiteLogin .loginabout, .SiteLogin .registrationabout {
        order: 2;
    }

    .SiteLogin .loginform, .SiteLogin .registrationform {
        order: 1;
        margin-bottom: 0;
    }

    .SiteLogin .header-container {
        height: 20px;
    }

    .SiteLogin .loginform {
        padding: 0px 20px 10px 20px;
    }

    .SiteLogin .registrationabout {
        background: #007ac2;
    }

    .SiteLogin .registrationform {
        padding: 10px 15px 10px 15px;
    }

    .SiteLogin .login-container {
        display: flex;
        flex-direction: column;
    }

    a.login-brand.visible-xs-inline-block.visible-sm-inline-block img {
        background: #007ac2;
    }

}

@media screen and (max-width: 768px) {

    .SiteLogin .login-carousel {
        margin: 15px 0;
    }

    .SiteLogin .login-brand {
        max-height: 80px;
        margin-bottom: 10px;
    }

    .SiteLogin .loginabout, .SiteLogin .registrationabout {
        background: #007ac2;
        padding: 20px 50px 20px 50px;
    }

    .SiteLogin .loginform {
        height: 375px;
        padding: 0px 10px 10px 10px;
    }

    .SiteLogin .registrationform {
        min-height: 375px;
        margin-bottom: 0;
    }
}

@media screen and (max-height: 665px) {
    .loginDiv {
        height: auto;
    }
}

.sliderArrow-xs-container {
    display: none;
}

.sliderArrow-md-container {
    display: block;
    width: 10%;
    float: left;
}

.slider-container {
    width: 90%;
    float: left;
}

@media screen and (max-width: 430px) {
    .SiteLogin .Site-content {
        padding: 0;
    }

    .SiteLogin .loginabout, .SiteLogin .registrationabout {
        background: #007ac2;
        padding: 0px 50px 0 50px;
    }

    .SiteLogin .loginabout {
        background: #007ac2;
        padding: 0px 20px 0 20px;
    }

    .SiteLogin .registrationabout {
        padding: 0px 20px 0 20px;
    }

    .SiteLogin #carousel {
        margin: 20px 0;
    }

    .slick-next {
        right: -20px;
    }

    .slick-prev {
        left: -20px;
    }

    li#logo.toolbar.toolbar-left.navbar-header {
        max-width: 210px;
    }

    img.navbar-logo {
        max-width: 210px;
    }

    .tileTitleDiv {
        margin-top: 255px;
        height: 55px;
    }

    .mobileview-username {
        max-width: 50px;
        word-break: break-word;
        font-size: 10px;
    }

    .radio-button td.GridDisplay {
        display: block;
    }

    .sliderArrow-xs-container {
        display: block;
        width: 100%;

    }

    .sliderArrow-xs-container .sliderArrow {
        transform: rotate(-90deg);
        position: revert;
    }

    .sliderArrow-md-container {
        display: none;
    }

    .flex-xs-center {
        flex-direction: column;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }

    .slider-container {
        width: 95%
    }

    .col-custom-width {
        width: 70%;
    }
}

/* sbadmin (client css)*/
/*!
* Start Bootstrap - SB Admin 2 v3.3.7+1 (http://startbootstrap.com/template-overviews/sb-admin-2)
* Copyright 2013-2016 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
*/


.modal-padding {
    padding: 10px
}

.SiteClient .queryMargins {
    margin-top: 5px;
}

.SiteClient .btn-checkbox {
    -moz-transition: all .5s ease-in;
    -o-transition: all .5s ease-in;
    -webkit-transition: all .5s ease-in;
    transition: all .5s ease-in;
    height: 25px
}

/*.SiteClient .btn-checkbox:focus {*/
/* outline-color: transparent !important;*/
/*}*/

.SiteClient .btn-toggle {
    -moz-transition: all .5s ease-in;
    -o-transition: all .5s ease-in;
    -webkit-transition: all .5s ease-in;
    transition: all .5s ease-in;
}

.SiteClient .btn-toggle:focus {
    outline-color: transparent !important;
}

.SiteClient .btn-radio {
    -moz-transition: all .5s ease-in;
    -o-transition: all .5s ease-in;
    -webkit-transition: all .5s ease-in;
    transition: all .5s ease-in;
    height: 25px;
    border-radius: 25px;
}

.SiteClient .hover-collapse {
    cursor: pointer;
}

.SiteClient .nav {
    margin-bottom: -1px;
}

.themenav {
    background-color: #007ac2;
}

.SiteClient #wrapper {
    width: 100%;
    height: 100%;
}

.SiteClient #page-wrapper {
    padding: 0 15px;
    min-height: 568px;
    background-color: white;
    margin: 0 15px;
}

@media (min-width: 768px) {
    .SiteClient #page-wrapper {
        position: inherit;
        margin: 0 0 0 250px;
        padding: 0 30px;
        border-left: 1px solid white;
    }
}

.SiteClient .navbar-top-links {
    margin-right: 0;
}

.SiteClient .navbar-top-links li {
    display: inline-block;
}

.SiteClient .navbar-top-links li:last-child {
    margin-right: 15px;
}

.SiteClient .navbar-top-links li a {
    padding: 15px;
    min-height: 50px;
}

.SiteClient .navbar-top-links .dropdown-menu li {
    display: block;
}

.SiteClient .navbar-top-links .dropdown-menu li:last-child {
    margin-right: 0;
}

.SiteClient .navbar-top-links .dropdown-menu li a {
    padding: 3px 20px;
    min-height: 0;
}

.SiteClient .navbar-top-links .dropdown-menu li a div {
    white-space: normal;
}

.SiteClient .navbar-top-links .dropdown-messages,
.SiteClient .navbar-top-links .dropdown-tasks,
.SiteClient .navbar-top-links .dropdown-alerts,
.SiteClient .navbar-top-links .dropdown-clipboard {
    width: 310px;
    min-width: 0;
}

.SiteClient .navbar-top-links .dropdown-messages {
    margin-left: 5px;
}

.SiteClient .navbar-top-links .dropdown-tasks {
    margin-left: -59px;
}

.SiteClient .navbar-top-links .dropdown-clipboard,
.SiteClient .navbar-top-links .dropdown-alerts {
    background-color: #007ac2;
}

.SiteClient .navbar-top-links .dropdown-user {
    right: 0;
    background-color: #007ac2;
    padding: 0;
}

.SiteClient .navbar-top-links .dropdown-user > li > a,
.SiteClient .navbar-top-links .dropdown-clipboard > li > a {
    color: #ffffff;
!important;
    background-color: #007ac2;
    padding: 10px;
}

.SiteClient .navbar-top-links .dropdown-user > li > a:hover,
.SiteClient .navbar-top-links .dropdown-clipboard > li > a:hover,
.SiteClient .navbar-top-links .dropdown-clipboard > li > a:focus,
.SiteClient .navbar-top-links .dropdown-user > li > a:focus {
    background-color: #008adc;
    color: #ffffff;
}

.SiteClient .sidebar .sidebar-nav.navbar-collapse {
    padding-left: 0;
    padding-right: 0;
    background-color: #007ac2;
    height: 100%;
}

.SiteClient .sidebar .sidebar-search {
    padding: 15px;
}

.SiteClient .sidebar ul li {
    /* border-bottom: 1px solid #e7e7e7; */
}

.SiteClient .sidebar ul li a.active {
    background-color: #eeeeee;
}

.SiteClient .sidebar .arrow {
    float: right;
}

.SiteClient .sidebar .fa.arrow:before {
    content: "\f104";
}

.SiteClient .sidebar .active > a > .fa.arrow:before {
    content: "\f107";
}

.SiteClient .sidebar .nav-second-level li,
.SiteClient .sidebar .nav-third-level li {
    border-bottom: none !important;
}

.SiteClient .sidebar .nav-second-level li a {
    padding-left: 37px;
}

.SiteClient .sidebar .nav-third-level li a {
    padding-left: 52px;
}

@media (min-width: 768px) {
    .SiteClient .sidebar {
        z-index: 1;
        position: absolute;
        width: 250px;
        height: calc(100% - 50px);
        background-color: #007ac2;
    }

    .SiteClient .navbar-top-links .dropdown-messages,
    .SiteClient .navbar-top-links .dropdown-tasks,
    .SiteClient .navbar-top-links .dropdown-clipboard,
    .SiteClient .navbar-top-links .dropdown-alerts {
        margin-left: auto;
    }
}

@media (max-width: 767px) {
    .SiteClient .sidebar {
        z-index: 99;
        position: absolute;
        right: 0;
        width: calc(100% - 50px);
    }

}

.SiteClient .btn-toggle {
    -moz-transition: all .5s ease-in;
    -o-transition: all .5s ease-in;
    -webkit-transition: all .5s ease-in;
    transition: all .5s ease-in;
}

.SiteClient .btn-toggle:focus {
    outline-color: transparent !important;
}

.btn-rawr:hover,
.btn-rawr:focus,
.btn-rawr:active,
.btn-rawr.active,
.open > .dropdown-toggle.btn-rawr {
    color: #ffffff;
background-color: #007ac2;border-color: #007ac2;}

.btn-rawr:active,
.btn-rawr.active,
.open > .dropdown-toggle.btn-primary {
    background-image: none;
}

.btn-rawr.disabled,
.btn-rawr[disabled],
fieldset[disabled] .btn-rawr,
.btn-rawr.disabled:hover,
.btn-rawr[disabled]:hover,
fieldset[disabled] .btn-rawr:hover,
.btn-rawr.disabled:focus,
.btn-rawr[disabled]:focus,
fieldset[disabled] .btn-rawr:focus,
.btn-rawr.disabled:active,
.btn-rawr[disabled]:active,
fieldset[disabled] .btn-rawr:active,
.btn-rawr.disabled.active,
.btn-rawr[disabled].active,
fieldset[disabled] .btn-rawr.active {
    background-color: darkgrey;
    border-color: #007ac2;
}

.btn-rawr .badge {
    color: #007ac2;
    background-color: white;
}

.btn-rawr {
    color: #ffffff;
background-color: #007ac2;border-color: #007ac2;}

.btn-checkbox {
    -moz-transition: all .5s ease-in !important;
    -o-transition: all .5s ease-in !important;
    -webkit-transition: all .5s ease-in !important;
    transition: all .5s ease-in !important;
    height: 25px !important;
    -webkit-border-radius: 4px !important;
    -moz-border-radius: 4px !important;
    border-radius: 4px !important;

}

.btn-checkbox:focus {
    outline-color: transparent !important;
    outline-offset: 1px !important;
}

.btn-outline {
    color: inherit !important;
    background-color: transparent !important;
    transition: all .5s !important;
}

.btn-primary.btn-outline {
    color: #428bca !important;
}

.btn-success.btn-outline {
    color: #5cb85c !important;
}

.btn-info.btn-outline {
    color: #5bc0de !important;
}

.btn-warning.btn-outline {
    color: #f0ad4e !important;
}

.btn-danger.btn-outline {
    color: #d9534f !important;
}

.btn-light.btn-outline {
    color: #ece0f2 !important;
}

..btn-light.btn-outline:hover,
.btn-primary.btn-outline:hover,
.btn-success.btn-outline:hover,
.btn-info.btn-outline:hover,
.btn-warning.btn-outline:hover,
.btn-danger.btn-outline:hover {
    color: inherit !important;
}

.SiteClient .btn-primary:hover,
.SiteClient .btn-primary:focus,
.SiteClient .btn-primary:active,
.SiteClient .btn-primary.active,
.SiteClient .open > .dropdown-toggle.btn-primary {
    color: white;
    background-color: #3071a9;
    border-color: #285e8e;
}

.SiteClient .btn-danger.btn-outline:hover {
    background-color: #d9534f;
    color: white;
}

.SiteClient .btn-mroc:active,
.SiteClient .btn-mroc.active,
.SiteClient .open > .dropdown-toggle.btn-mroc {
    background-image: none;
}

.SiteClient .btn-outline {
    color: inherit;
    background-color: transparent;
    transition: all .5s;
}

.SiteClient .btn-primary.btn-outline {
    color: #428bca;
}

.SiteClient .btn-success.btn-outline {
    color: #5cb85c;
}

.SiteClient .btn-info.btn-outline {
    color: #5bc0de;
}

.SiteClient .btn-warning.btn-outline {
    color: #f0ad4e;
}

.SiteClient .btn-danger.btn-outline {
    color: #d9534f;
}


.SiteClient .btn-primary.btn-outline:hover,
.SiteClient .btn-success.btn-outline:hover,
.SiteClient .btn-info.btn-outline:hover,
.SiteClient .btn-warning.btn-outline:hover,
.SiteClient .btn-danger.btn-outline:hover {
    color: inherit;
}

.SiteClient .btn-danger.btn-outline:hover {
    background-color: #d9534f;
    color: white;
}

.SiteClient .btn-info.btn-outline:hover {
    background-color: #5bc0de;
    color: white;
}

.SiteClient .btn-rawr.btn-outline:hover {
    color: #ffffff;
    background-color: #007ac2;
}

.SiteClient .chat {
    margin: 0;
    padding: 0;
    list-style: none;
}

.SiteClient .chat li {
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px dotted #999999;
}

.SiteClient .chat li.left .chat-body {
    margin-left: 60px;
}

.SiteClient .chat li.right .chat-body {
    margin-right: 60px;
}

.SiteClient .chat li .chat-body p {
    margin: 0;
}

.SiteClient .panel .slidedown .glyphicon,
.SiteClient .chat .glyphicon {
    margin-right: 5px;
}

.SiteClient .chat-panel .panel-body {
    height: 350px;
    overflow-y: scroll;
}

.SiteClient .login-panel {
    margin-top: 25%;
}

.SiteClient .flot-chart {
    display: block;
    height: 400px;
}

.SiteClient .flot-chart-content {
    width: 100%;
    height: 100%;
}

.SiteClient table.dataTable thead .sorting,
.SiteClient table.dataTable thead .sorting_asc,
.SiteClient table.dataTable thead .sorting_desc,
.SiteClient table.dataTable thead .sorting_asc_disabled,
.SiteClient table.dataTable thead .sorting_desc_disabled {
    background: transparent;
}

.SiteClient table.dataTable thead .sorting_asc:after {
    content: "\f0de";
    float: right;
    font-family: fontawesome;
}

.SiteClient table.dataTable thead .sorting_desc:after {
    content: "\f0dd";
    float: right;
    font-family: fontawesome;
}

.SiteClient table.dataTable thead .sorting:after {
    content: "\f0dc";
    float: right;
    font-family: fontawesome;
    color: rgba(50, 50, 50, 0.5);
}

.SiteClient .btn-circle {
    width: 30px;
    height: 30px;
    padding: 6px 0;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.428571429;
}

.SiteClient .btn-circle.btn-lg {
    width: 50px;
    height: 50px;
    padding: 10px 16px;
    border-radius: 25px;
    font-size: 18px;
    line-height: 1.33;
}

.SiteClient .btn-circle.btn-xl {
    width: 70px;
    height: 70px;
    padding: 10px 16px;
    border-radius: 35px;
    font-size: 24px;
    line-height: 1.33;
}

.SiteClient .show-grid [class^="col-"] {
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid #ddd;
    background-color: #eee !important;
}

.SiteClient .show-grid {
    margin: 15px 0;
}

.SiteClient .huge {
    font-size: 40px;
}

.SiteClient .panel-green {
    border-color: #5cb85c;
}

.SiteClient .panel-green > .panel-heading {
    border-color: #5cb85c;
    color: white;
    background-color: #5cb85c;
}

.SiteClient .panel-green > a {
    color: #5cb85c;
}

.SiteClient .panel-green > a:hover {
    color: #3d8b3d;
}

.SiteClient .panel-red {
    border-color: #d9534f;
}

.SiteClient .panel-red > .panel-heading {
    border-color: #d9534f;
    color: white;
    background-color: #d9534f;
}

.SiteClient .panel-red > a {
    color: #d9534f;
}

.SiteClient .panel-red > a:hover {
    color: #b52b27;
}

.SiteClient .panel-yellow {
    border-color: #f0ad4e;
}

.SiteClient .panel-yellow > .panel-heading {
    border-color: #f0ad4e;
    color: white;
    background-color: #f0ad4e;
}

.SiteClient .panel-yellow > a {
    color: #f0ad4e;
}

.SiteClient .panel-yellow > a:hover {
    color: #df8a13;
}

.SiteClient .timeline {
    position: relative;
    padding: 20px 0 20px;
    list-style: none;
}

.SiteClient .timeline:before {
    content: " ";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    margin-left: -1.5px;
    background-color: #eeeeee;
}

.SiteClient .timeline > li {
    position: relative;
    margin-bottom: 20px;
}

.SiteClient .timeline > li:before,
.SiteClient .timeline > li:after {
    content: " ";
    display: table;
}

.SiteClient .timeline > li:after {
    clear: both;
}

.SiteClient .timeline > li:before,
.SiteClient .timeline > li:after {
    content: " ";
    display: table;
}

.SiteClient .timeline > li:after {
    clear: both;
}

.SiteClient .timeline > li > .timeline-panel {
    float: left;
    position: relative;
    width: 46%;
    padding: 20px;
    border: 1px solid #d4d4d4;
    border-radius: 2px;
    -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}

.SiteClient .timeline > li > .timeline-panel:before {
    content: " ";
    display: inline-block;
    position: absolute;
    top: 26px;
    right: -15px;
    border-top: 15px solid transparent;
    border-right: 0 solid #ccc;
    border-bottom: 15px solid transparent;
    border-left: 15px solid #ccc;
}

.SiteClient .timeline > li > .timeline-panel:after {
    content: " ";
    display: inline-block;
    position: absolute;
    top: 27px;
    right: -14px;
    border-top: 14px solid transparent;
    border-right: 0 solid white;
    border-bottom: 14px solid transparent;
    border-left: 14px solid white;
}

.SiteClient .timeline > li > .timeline-badge {
    z-index: 100;
    position: absolute;
    top: 16px;
    left: 50%;
    width: 50px;
    height: 50px;
    margin-left: -25px;
    border-radius: 50% 50% 50% 50%;
    text-align: center;
    font-size: 1.4em;
    line-height: 50px;
    color: white;
    background-color: #999999;
}

.SiteClient .timeline > li.timeline-inverted > .timeline-panel {
    float: right;
}

.SiteClient .timeline > li.timeline-inverted > .timeline-panel:before {
    right: auto;
    left: -15px;
    border-right-width: 15px;
    border-left-width: 0;
}

.SiteClient .timeline > li.timeline-inverted > .timeline-panel:after {
    right: auto;
    left: -14px;
    border-right-width: 14px;
    border-left-width: 0;
}

.SiteClient .timeline-badge.primary {
    background-color: #2e6da4 !important;
}

.SiteClient .timeline-badge.success {
    background-color: #3f903f !important;
}

.SiteClient .timeline-badge.warning {
    background-color: #f0ad4e !important;
}

.SiteClient .timeline-badge.danger {
    background-color: #d9534f !important;
}

.SiteClient .timeline-badge.info {
    background-color: #5bc0de !important;
}

.SiteClient .timeline-title {
    margin-top: 0;
    color: inherit;
}

.SiteClient .timeline-body > p,
.SiteClient .timeline-body > ul {
    margin-bottom: 0;
}

.SiteClient .timeline-body > p + p {
    margin-top: 5px;
}

@media (max-width: 767px) {

    .user-cash-rewards {
        display: none;
    }

    li.signin, li.signup {
        width: auto !important;
    }

    .Site .Footer-social a {
        margin-bottom: 0px;
    }

    .btn-footer-social {
        width: 30px;
        height: 30px;
    }

    .SiteClient ul.timeline:before {
        left: 40px;
    }

    .SiteClient ul.timeline > li > .timeline-panel {
        width: calc(10%);
        width: -moz-calc(10%);
        width: -webkit-calc(10%);
    }

    .SiteClient ul.timeline > li > .timeline-badge {
        top: 16px;
        left: 15px;
        margin-left: 0;
    }

    .SiteClient ul.timeline > li > .timeline-panel {
        float: right;
    }

    .SiteClient ul.timeline > li > .timeline-panel:before {
        right: auto;
        left: -15px;
        border-right-width: 15px;
        border-left-width: 0;
    }

    .SiteClient ul.timeline > li > .timeline-panel:after {
        right: auto;
        left: -14px;
        border-right-width: 14px;
        border-left-width: 0;
    }

    #toggleSidebarTextCollapse {
        display: none !important;
    }

    .SiteClient .menu-item-text.hidden {
        display: inline !important;
    }
}

@media (min-width: 768px) {
    .SiteClient #page-wrapper {
        position: inherit;
        margin: 0 0 0 250px;
        padding: 0 30px; /* for fixed menu*/ /*padding: 0 30px;*/
        border-left: 1px solid white;
    }

    .SiteClient #wrapper.sidebar-text-collapsed #page-wrapper {
        margin-left: 65px;
    }

    .SiteClient #wrapper.sidebar-text-collapsed .sidebar {
        width: 65px;
    }

    .SiteClient .nav.sidebar-text-collapsed {
        width: 65px;
    }

    .SiteClient .nav.sidebar-text-collapsed .client-menu-link {
        width: 200px;
        background: #007ac2;
    }
}

.inSample {
    display: inline-block !important;
    background-color: #007ac2 !important;
    color: #ffffff !important;
    margin: 2px;
}

/* bs4 SiteClient cards */
.SiteClient .sample-tags {
    display: block;
    font-size: inherit;
    font-weight: inherit;
    text-align: left;
    background-color: white;
    color: black;
}

.SiteClient .sample-tags:hover {
    background-color: #009af5 !important;
    cursor: pointer;
    color: #ffffff;
}

.SiteClient .card {
    position: relative;
    display: block;
    margin-bottom: 0.75rem;
    background-color: white;
    border-radius: 0.25rem;
    border: 1px solid #c6c6c6;
    border-top: none;
}

.SiteClient .card-block {
    padding: 1.25rem;
}

.SiteClient .card-block::after {
    content: "";
    display: table;
    clear: both;
}

.SiteClient .card-link:hover {
    text-decoration: none;
}

.SiteClient .card-link + .card-link {
    margin-left: 1.25rem;
}

.SiteClient .card > .list-group:first-child .list-group-item:first-child {
    border-top-right-radius: 0.25rem;
    border-top-left-radius: 0.25rem;
}

.SiteClient .card > .list-group:last-child .list-group-item:last-child {
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

.SiteClient .card-title {
    margin-bottom: 0.75rem;
    color: black;
}

.SiteClient .card-subtitle {
    margin-top: -0.375rem;
    margin-bottom: 0;
}

.SiteClient .card-text:last-child {
    margin-bottom: 0;
}

.SiteClient .card-header {
    padding: 0.75rem 1.25rem;
    background-color: white;
}

.SiteClient .card-header::after {
    content: "";
    display: table;
    clear: both;
}

.SiteClient .card-header:first-child {
    border-radius: 0.25rem 0.25rem 0 0;
}

.SiteClient .card-header:before {
    font-family: FontAwesome;
    content: "\f067";
    float: right;
    color: black !important;
    margin: 5px 5px 0 0;
}

.SiteClient .card-header.collapsed:before {
    font-family: FontAwesome;
    content: "\f068";
    float: right;
    color: black !important;
    margin: 5px 5px 0 0;

}

.SiteClient .card-header.collapsed {
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}


.SiteClient .card-header-empty:before {
    font-family: FontAwesome;
    content: "";
}

.SiteClient .card-header-empty.collapsed:before {
    font-family: FontAwesome;
    content: "";
}

.SiteClient .card-footer {
    padding: 0.75rem 1.25rem;
    background-color: #f5f5f5;
    border-top: 1px solid rgba(0, 0, 0, 0.125);
}

.SiteClient .card-footer::after {
    content: "";
    display: table;
    clear: both;
}

.SiteClient .card-footer:last-child {
    border-radius: 0 0 0.25rem 0.25rem;
}

.SiteClient .card-header-tabs {
    margin-right: -0.625rem;
    margin-bottom: -0.75rem;
    margin-left: -0.625rem;
    border-bottom: 0;
}

.SiteClient .card-header-pills {
    margin-right: -0.625rem;
    margin-left: -0.625rem;
}

.SiteClient .card-primary {
    background-color: #0275d8;
    border-color: #0275d8;
}

.SiteClient .card-primary .card-header,
.SiteClient .card-primary .card-footer {
    background-color: transparent;
}

.SiteClient .card-success {
    background-color: #5cb85c;
    border-color: #5cb85c;
}

.SiteClient .card-success .card-header,
.SiteClient .card-success .card-footer {
    background-color: transparent;
}

.SiteClient .card-info {
    background-color: #5bc0de;
    border-color: #5bc0de;
}

.SiteClient .card-info .card-header,
.SiteClient .card-info .card-footer {
    background-color: transparent;
}

.SiteClient .card-warning {
    background-color: #f0ad4e;
    border-color: #f0ad4e;
}

.SiteClient .card-warning .card-header,
.SiteClient .card-warning .card-footer {
    background-color: transparent;
}

.SiteClient .card-danger {
    background-color: #d9534f;
    border-color: #d9534f;
}

.SiteClient .card-danger .card-header,
.SiteClient .card-danger .card-footer {
    background-color: transparent;
}

.SiteClient .card-outline-primary {
    background-color: transparent;
    border-color: #0275d8;
}

.SiteClient .card-outline-secondary {
    background-color: transparent;
    border-color: #ccc;
}

.SiteClient .card-outline-info {
    background-color: transparent;
    border-color: #5bc0de;
}

.SiteClient .card-outline-success {
    background-color: transparent;
    border-color: #5cb85c;
}

.SiteClient .card-outline-warning {
    background-color: transparent;
    border-color: #f0ad4e;
}

.SiteClient .card-outline-danger {
    background-color: transparent;
    border-color: #d9534f;
}

.SiteClient .card-inverse .card-header,
.SiteClient .card-inverse .card-footer {
    border-color: rgba(255, 255, 255, 0.2);
}

.SiteClient .card-inverse .card-header,
.SiteClient .card-inverse .card-footer,
.SiteClient .card-inverse .card-title,
.SiteClient .card-inverse .card-blockquote {
    color: white;
}

.SiteClient .card-inverse .card-link,
.SiteClient .card-inverse .card-text,
.SiteClient .card-inverse .card-subtitle,
.SiteClient .card-inverse .card-blockquote .blockquote-footer {
    color: rgba(255, 255, 255, 0.65);
}

.SiteClient .card-inverse .card-link:focus, .SiteClient .card-inverse .card-link:hover {
    color: white;
}

.SiteClient .card-blockquote {
    padding: 0;
    margin-bottom: 0;
    border-left: 0;
}

.SiteClient .card-img {
    border-radius: 0.25rem;
}

.SiteClient .card-img-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1.25rem;
}

.SiteClient .card-img-top {
    border-top-right-radius: 0.25rem;
    border-top-left-radius: 0.25rem;
}

.SiteClient .card-img-bottom {
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

@media (min-width: 544px) {
    .SiteClient .card-deck {
        display: table;
        width: 100%;
        margin-bottom: 0.75rem;
        table-layout: fixed;
        border-spacing: 1.25rem 0;
    }

    .SiteClient .card-deck .card {
        display: table-cell;
        margin-bottom: 0;
        vertical-align: top;
    }

    .SiteClient .card-deck-wrapper {
        margin-right: -1.25rem;
        margin-left: -1.25rem;
    }

    .SiteClient .card-group {
        display: table;
        width: 100%;
        table-layout: fixed;
        margin-bottom: 20px;
    }

    .SiteClient .card-group .card {
        display: table-cell;
        vertical-align: top;
    }

    .SiteClient .card-group .card + .card {
        margin-left: 0;
        border-left: 0;
    }

    .SiteClient .card-group .card:first-child {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
    }

    .SiteClient .card-group .card:first-child .card-img-top {
        border-top-right-radius: 0;
    }

    .SiteClient .card-group .card:first-child .card-img-bottom {
        border-bottom-right-radius: 0;
    }

    .SiteClient .card-group .card:last-child {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
    }

    .SiteClient .card-group .card:last-child .card-img-top {
        border-top-left-radius: 0;
    }

    .SiteClient .card-group .card:last-child .card-img-bottom {
        border-bottom-left-radius: 0;
    }

    .SiteClient .card-group .card:not(:first-child):not(:last-child) {
        border-radius: 0;
    }

    .SiteClient .card-group .card:not(:first-child):not(:last-child) .card-img-top,
    .SiteClient .card-group .card:not(:first-child):not(:last-child) .card-img-bottom {
        border-radius: 0;
    }

    .SiteClient .card-columns {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
        -webkit-column-gap: 1.25rem;
        -moz-column-gap: 1.25rem;
        column-gap: 1.25rem;
    }

    .SiteClient .card-columns .card {
        display: inline-block;
        width: 100%;
    }
}

.surveyclass body {
    overflow-x: hidden;
    background-color: #f9f9f9;
}

.surveyclass video {
    max-width: 100%;
    max-height: 300px;
}

.surveyclass .list-group-item:not(:last-of-type) {
    border-bottom: 1px solid #ddd;
}

.surveyclass .list-group-item {
    position: relative;
    display: block;
    padding: 19px 10px;
}

.surveyclass .container {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

.surveyclass .row {
    margin-right: 0;
    margin-left: 0;
}

.surveyclass .questionul img {
    display: block;
    height: auto;
    max-width: 100%;
}

.surveyclass .title {
    font-size: 14px;
    font-weight: normal;
}

.surveyclass .panel-primary > .panel-heading {
    color: #ffffff;
    background-color: #007ac2;
    border-color: #007ac2;
}

.surveyclass .btn-primary {
    color: black !important;
    background-color: white !important;
    border: #007ac2 2px solid !important;
    border-radius: 4px !important;
}

.surveyclass .btn-primary:hover,
.surveyclass .btn-primary:focus,
.surveyclass .btn-primary:active,
.surveyclass .btn-primary.active,
.open .dropdown-toggle.surveyclass .btn-primary {
    color: #ffffff;
    background-color: #007ac2;
    border-color: #007ac2;
}

.surveyclass .btn-primary:active,
.surveyclass .btn-primary.active,
.open .dropdown-toggle.surveyclass .btn-primary {
    background-image: none;
}

.surveyclass .btn-primary.disabled,
.surveyclass .btn-primary[disabled],
fieldset[disabled] .surveyclass .btn-primary,
.surveyclass .btn-primary.disabled:hover,
.surveyclass .btn-primary[disabled]:hover,
fieldset[disabled] .surveyclass .btn-primary:hover,
.surveyclass .btn-primary.disabled:focus,
.surveyclass .btn-primary[disabled]:focus,
fieldset[disabled] .surveyclass .btn-primary:focus,
.surveyclass .btn-primary.disabled:active,
.surveyclass .btn-primary[disabled]:active,
fieldset[disabled] .surveyclass .btn-primary:active,
.surveyclass .btn-primary.disabled.active,
.surveyclass .btn-primary[disabled].active,
fieldset[disabled] .surveyclass .btn-primary.active {
    background-color: white;
    border-color: #20B0E5;
}

.surveyclass .panel-primary > .panel-heading > .panel-title > .background {
    color: white;
    background-color: red;
    border-color: white;
}

.surveyclass .panel-primary {
    border-color: #007ac2;
}

.surveyclass .btn-sm {
    padding-top: 1.5px;
}

/**
* Vertical text - works everywere ( IE7+, FF, Chrome, Safari, Opera )
* Example: http://jsbin.com/afAQAWA/2/
*/
.surveyclass .vertical-text {
    display: inline-block;
    overflow: hidden;
    width: 1.5em;
}

.surveyclass .vertical-text .rotate-text-mobile {
    display: inline-block;
    overflow: hidden;
    width: 1.5em;
}

.surveyclass .vertical-text__inner {
    display: inline-block;
    white-space: nowrap;
    /* this is for "non IE" browsers
that don't support writing-mode */
    -webkit-transform: translate(1.1em, 0) rotate(90deg);
    -moz-transform: translate(1.1em, 0) rotate(90deg);
    -o-transform: translate(1.1em, 0) rotate(90deg);
    transform: translate(1.1em, 0) rotate(90deg);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    /* IE9+ */
    -ms-transform: none;
    /* IE8+ */
    -ms-writing-mode: tb-rl;
    /* IE7 and below */
    *writing-mode: tb-rl;
}

.surveyclass .vertical-text__inner:before {
    content: "";
    float: left;
    margin-top: 100%;
}

.surveyclass .vertical_th {
    width: 40px;
    text-align: center;
    vertical-align: bottom !important;
    border: 1px solid #ddd;
    font-size: 14px;
}

.surveyclass .rotate {
    transform: rotate(220deg);
    writing-mode: vertical-rl;
    display: inline-block;
}

.surveyclass .table thead > tr > th, .surveyclass .table tbody > tr > th, .surveyclass .table tfoot > tr > th, .surveyclass .table thead > tr > td, .surveyclass .table tbody > tr > td, .surveyclass .table tfoot > tr > td {
    padding: 8px 8px 0px 8px;
}

.surveyclass .tableholder table tbody th.gridscaletext:first-child {
    background-color: white;
    border-top: 1px solid white;
    border-left: 1px solid white;
}

.surveyclass .ui-widget-header {
    background: #428bca;
}

.surveyclass .sliderdiv {
    margin: 20px 0;
}

.surveyclass .slidertextbox {
    margin-top: 8px;
    margin-bottom: 15px;
    text-align: center;
    width: 35px;
    height: 30px;
    border: none;
    background-color: #e6e6e6;
}

.surveyclass .slider {
    -webkit-appearance: none;
    width: 100%;
    height: 20px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.surveyclass .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: #007ac2;
    cursor: pointer;
}

.surveyclass .slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #007ac2;
    cursor: pointer;
}

.surveyclass td p {
    margin: 0;
}

/*for large screens all the text balance question is on one line and for smaller screens the text is above and below*/
@media screen and (min-width: 768px) {
    .surveyclass .leftWordTextBalance {
        text-align: right;
    }

    .surveyclass .rightWordTextBalance {
        text-align: left;
    }
}

@media screen and (max-width: 768px) {
    .surveyclass .leftWordTextBalance {
        text-align: left;
    }

    .surveyclass .rightWordTextBalance {
        text-align: right;
    }
}

.surveyclass .gridheight {
    height: 30px;
    border: 1px solid black;
}

.surveyclass .surveytextimage {
    padding: 8px 0 0 0;
}

.surveyclass .radio label:hover, .checkbox label:hover {
    background-color: #EBE2E3;
}

.surveyclass .masthead {
    background-color: white;
    min-width: 330px;
    width: 100%;
    padding: 9px;
    box-shadow: inset 0 -5px 0 0#007ac2;
}

.surveyclass .projectname {
    position: absolute;
    top: 30px;
    right: 20.5%;
    margin-left: 116px;
}

.surveyclass .text-muted {
    color: #333;
}

.dropdown-clipboard .text-muted {
    color: lightgrey;
}

.surveyclass legend {
    font-size: 16px;
    border-bottom: 0px;
    color: #ffffff;
}

.surveyclass .panel-title {
    font-size: 16px;
    line-height: 18px;
}

.surveyclass .btn-circle {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.428571429;
    border-radius: 50%;
}

.surveyclass .btn-circle.btn-lg {
    width: 50px;
    height: 50px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 25px;
}

.surveyclass .btn-circle.btn-xl {
    width: 70px;
    height: 70px;
    padding: 10px 16px;
    font-size: 24px;
    line-height: 1.33;
    border-radius: 35px;
}

.surveyclass label, .surveyclass .label {
    font-size: 100%;
    font-weight: normal;
    display: inline;
}

.surveyclass .multimargin {
    margin-left: 5px;
}

.surveyclass list-group-item:hover, list-group-item:focus {
    text-decoration: none;
    background-color: #F5F5F5;
}

.surveyclass .ranksortother, .surveyclass .otherinput {
    margin: 0 5px;
}

.surveyclass .table thead > tr > td, .surveyclass .table tbody > tr > td, .surveyclass .table tfoot > tr > td {
    padding: 8px;
    line-height: 1.428571429;
    vertical-align: middle;
    border-top: 1px solid #ddd;
}

.surveyclass .questionul {
    padding: 0;
}

.surveyclass .glass {
    position: relative;
    -webkit-animation: unblur 1s 2s ease both;
    -webkit-filter: blur(5px);
    float: right;
    margin: 1.5rem;
    width: 24rem;
    height: 15rem;
    background: rgba(50, 50, 50, .2);
    border-radius: .25rem;
    box-shadow: inset 0 0 8rem rgba(50, 50, 50, .2), inset 0 0 5rem rgba(250, 245, 255, .3);
}

.surveyclass .activecell {
    background-color: #FFEB00;
}

.surveyclass .table-striped > tbody > tr:nth-child(odd) > td.activecell,
.surveyclass .table-striped > tbody > tr:nth-child(odd) > th.activecell {
    background-color: #FFEB00;
}

.surveyclass input[type=radio]:checked + label + li {
    background: #7f8c8d;
    box-shadow: 0.2em 0.2em 0 0;
}

.surveyclass .dkwrapper {
    margin: 10px 0 0 0;
}

.surveyclass .btn-label {
    position: relative;
    left: -12px;
    display: inline-block;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px 0 0 3px;
}

.surveyclass .btn-labeled {
    padding-top: 0;
    padding-bottom: 0;
}

.surveyclass .flash {
    -moz-animation: flash 1s ease-out;
    -moz-animation-iteration-count: 1;
    -webkit-animation: flash 1s ease-out;
    -webkit-animation-iteration-count: 1;
    -ms-animation: flash 1s ease-out;
    -ms-animation-iteration-count: 1;
}

.surveyclass .radio-button {
    margin: 10px;
}

.surveyclass .radio-button input[type="radio"] {
    opacity: 0;
    position: fixed;
    width: 0;
}

.surveyclass .radio-button .radio-button-input {
    display: inline-block;
    background-color: #707070;
    padding: 10px 20px;
    font-family: Roboto;
    font-size: 14;
    color: white;
    border-radius: 4px;
    display: table-cell;
    vertical-align: middle;
}

}

.surveyclass .radio-button .radio-button-input:hover {
    background-color: #707070;
}

.surveyclass .radio-button input[type="radio"]:focus + .radio-button-input {
    /* border: 2px dashed #444;*/
}

.surveyclass .radio-button input[type="radio"]:checked + .radio-button-input {
    background-color: #007ac2;
    color: #ffffff;
}

.surveyclass .radio-button .openendinput {
    padding: 0px;
    height: auto;
}

@-webkit-keyframes flash {
    0% {
        background-color: initial;
    }
    50% {
        background-color: #fff500;
    }
    100% {
        background-color: initial;
    }
}

@keyframes flash {
    0% {
        background-color: initial;
    }
    50% {
        background-color: #fff500;
    }
    100% {
        background-color: initial;
    }
}

.surveyclass #wrap > .container {
    padding: 0px 15px;
}

.surveyclass .container .credit {
    margin: 20px 0;
}

.surveyclass #footer > .container {
    padding-left: 15px;
    padding-right: 15px;
}

/* Wrapper for page content to push down footer */
.surveyclass #wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    /* Negative indent footer by its height */
    margin: 0 auto -60px;
    /* Pad bottom by footer height */
    padding: 0 0 60px;
}

.surveyclass #footer {
    height: 60px;
    background-color: #3d3d3d !important;
}

.surveyclass th, td {
    text-align: center;
}

.surveyclass th.gridscaletext {
    padding: 0 !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

.surveyclass .btn.btn-default.bootstrap-touchspin-up, .surveyclass .btn.btn-default.bootstrap-touchspin-down {
    color: white;
    background-color: #428bca;
    border-color: #cccccc;
}

.surveyclass .badge {
    background-color: #5c5c5c;
}

.surveyclass .ranked {
    background-color: #007ac2;
}

/* WRAP ALL VIDEO CONTAINERS - Use widescreen class to make it wide!*/
.surveyclass .flex-video {
    position: relative;
    padding-top: 25px;
    padding-bottom: 67.5%;
    height: 0;
    margin-bottom: 16px;
    overflow: hidden;
}

.surveyclass .flex-video.widescreen {
    padding-bottom: 57.25%;
}

.surveyclass .flex-video.vimeo {
    padding-top: 0;
}

.surveyclass .flex-video iframe,
.surveyclass .flex-video object,
.surveyclass .flex-video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.surveyclass .progpadding {
    margin: 10px 0 0 0;
}

.surveyclass .red {
    color: #FF0000;
}

.surveyclass .yellow {
    color: #FFFF00;
}

.surveyclass .surveybrandimg {
    height: 60px;
    /* width: 185px; */
    margin: 5px 10px 2px 0;
}

.surveyclass .nopad {
    padding: 0px;
}

.surveyclass .imagemulti-image-holder {
    position: relative;
    overflow: hidden;
    padding-bottom: 75%;
}

.surveyclass .imagemulti-image-holder img {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.surveyclass .thumbnails.list-unstyled.imagemulti span {
    width: 100%;
}

.surveyclass .thumbnails.list-unstyled.imagemulti .modal-footer {
    margin-top: 0px;
}

.surveyclass .backgroundyellow {
    background-color: #FFFF00;
}

.surveyclass input[type=checkbox]:checked ~ .rowd {
    background-color: black;
    font-style: normal;
}

.surveyclass .rowd {
    text-align: center;
}

.surveyclass .label-primary {
    background-color: #007ac2;
}

.surveyclass .panel-primary > .panel-heading {
    color: #ffffff;
    background-color: #007ac2;
    border-color: #007ac2;
}

.surveyclass .panel-primary {
    border-color: #007ac2;
}

.surveyclass .collapse-padding {
    color: inherit;
    display: block;
    padding: 10px 15px;
    margin: -10px -15px;
}

.surveyclass a.ablockpad.collapse-padding {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    outline: none;
}

.surveyclass .list-group-item:first-child {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

.surveyclass .list-group-item:last-child {
    margin-bottom: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.surveyclass .nomargin-nopadding {
    margin: 0;
    padding: 0;
}

.surveyclass td.vert-align.gridhighlight {
    border: 1px solid #DDD;
}

.surveyclass .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
    color: #797979;
    height: 40px
}

/* slider styles */
.surveyclass .gridslider header {
    margin-bottom: 50px;
}

.surveyclass .gridslider .question {
    position: relative;
}

.surveyclass .question.disable .cover {
    position: absolute;
    top: -21px;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-color: rgba(255, 255, 255, 0.6);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99FFFFFF, endColorstr=#99FFFFFF);
    zoom: 1;
    z-index: 20;
}

.surveyclass .col-lg-8.vv.gridslider.question.disable {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    background-color: rgba(255, 255, 255, 0.6);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99FFFFFF, endColorstr=#99FFFFFF);
    zoom: 1;
    z-index: 20;
}

.surveyclass .gridslider .question .separator {
    clear: both;
    padding-top: 40px;
    border: 0 none;
    border-bottom: dotted 1px #ccc;
    margin-left: 30px;
}

.surveyclass .gridslider .slider-holder {
    font-size: 0.8em;
    cursor: pointer;
    margin-top: 30px;
}

.surveyclass .gridslider .ui-slider {
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;
    -ms-transition: all 1s ease-out;
    transition: all 1s ease-out;
}

.surveyclass .gridslider .ui-slider-tic {
    border-color: #F2F2F2;
    box-shadow: 0 0 2px 1px#007ac2;
}

.surveyclass .gridslider .ui-slider-scale li span {
    font-size: 18px;
}

.surveyclass .gridslider .n-a {
    font-size: 12px;
    color: #999;
    margin-top: 70px;
}

.surveyclass .gridslider .n-a input {
    margin-right: 5px;
}

.surveyclass .gridslider .ui-slider-handle {
    width: 25px;
    height: 25px;
    margin: 0 0 0 -10px;
    border-right: 50px;
    top: -11px;
    margin-left: -11px;
    border: 2px solid white;
    cursor: hand;
    border-radius: 25px;
    -moz-transition: left 0.2s ease-out;
    -o-transition: left 0.2s ease-out;
    -webkit-transition: left 0.2s ease-out;
    -ms-transition: left 0.2s ease-out;
    transition: left 0.2s ease-out;
    outline: 0 none !important;
}

.surveyclass ui-state-hover {
    zoom: 1.2;
}

.surveyclass .gridslider .ui-slider-handle.ui-state-active, .surveyclass .gridslider .ui-slider-handle.ui-state-hover {
    background-position: bottom left;
}

.surveyclass .gridslider .ui-slider-tooltip {
    left: 12px;
    bottom: 50px;
}

.surveyclass .gridslider .ui-slider-scale li span:first-child {
    margin-top: 15px;
}

.surveyclass .gridslider .ui-slider-scale li:first-child span:first-child {
    margin-left: 0 !important;
}

.surveyclass .gridslider .ui-slider {
    margin: 1.2em;
    border-radius: 0;
    background: rgba(0, 0, 0, 0);
    border-top: 1px solid #007ac2 !important;
    height: 25px;
    border-right: 1px solid white;
    border-left: 1px solid white;
    border-bottom: 1px solid white;
}

.surveyclass .ui-slider .ui-slider-tooltip .ui-tooltip-pointer-down-inner {
    border-left: 6px dashed rgba(0, 0, 0, 0);
    border-right: 6px dashed rgba(0, 0, 0, 0);
    border-top: 7px solid #007ac2 !important;
    bottom: auto;
    top: -9px;
    left: -6px;
    border-top-color: #007ac2;
}

.surveyclass span.ui-slider-tooltip.ui-widget-content.ui-corner-all {
    border: 1px solid white;
    background: #007ac2 !important;
    color: #ffffff;
    outline: 2px solid #F7F7F7;
}

.surveyclass .gridslider .ui-slider-handle {
    width: 25px;
    height: 25px;
    margin: 0 0 0 -10px;
    background: #007ac2;
    border-right: 50px;
    top: -11px;
    margin-left: -11px;
    border: 2px solid white;
    cursor: pointer;
    cursor: hand;
    border-radius: 25px;
    -moz-transition: left 0.2s ease-out;
    -o-transition: left 0.2s ease-out;
    -webkit-transition: left 0.2s ease-out;
    -ms-transition: left 0.2s ease-out;
    transition: left 0.2s ease-out;
}

.surveyclass .gridslider .ui-slider-pip {
    top: 3px;
}

.surveyclass .gridslider .ui-slider-pip .ui-slider-line {
    width: 4px;
    height: 4px;
    border-radius: 4px;
    margin-left: -2px;
    background: #fffaf7;
}

.surveyclass .gridslider .ui-slider-pip.ui-slider-pip-last,
.surveyclass .gridslider .ui-slider-pip.ui-slider-pip-first {
    top: -7px;
}

.surveyclass .gridslider .ui-slider-pip.ui-slider-pip-last .ui-slider-line,
.surveyclass .gridslider .ui-slider-pip.ui-slider-pip-first .ui-slider-line {
    display: none;
}

.surveyclass .gridslider .ui-slider-pip.ui-slider-pip-last .ui-slider-label,
.surveyclass .gridslider .ui-slider-pip.ui-slider-pip-first .ui-slider-label {
    margin: 0;
}

.surveyclass .gridslider .ui-slider-pip.ui-slider-pip-first .ui-slider-label {
    left: -2em;
    text-align: right;
}

.surveyclass .gridslider .ui-slider-pip.ui-slider-pip-last .ui-slider-label {
    left: 2em;
    text-align: left;
}

.surveyclass .gridslider .ui-slider-pip.ui-slider-pip-selected-initial {
    font-weight: normal;
}

.surveyclass .gridslider .ui-slider-pip.ui-slider-pip-selected {
    font-weight: bold;
}

.surveyclass .gridslider .ui-slider-pip.ui-slider-pip-selected,
.surveyclass .gridslider .ui-slider-pip.ui-slider-pip-selected-initial {
    color: #434d5a;
}

.surveyclass .ui-slider .ui-slider-handle:before {
    content: "";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #007ac2;
    font-size: 15px;
    padding-right: 0.5em;
    position: relative;
    top: -6px;
    left: 3px;
}

.surveyclass .ui-slider-horizontal.ui-slider-pips {
    margin-bottom: 1.4em;
    margin: 2em;
}

.surveyclass .ui-slider-pips .ui-slider-label {
    position: absolute;
    top: 15px;
    left: 50%;
    margin-left: -1em;
    width: 2em;
}

.surveyclass .col-lg-8.vv.gridslider {
    font-weight: 500;
    padding: 25px 0;
    text-decoration: none;
    -webkit-transition: all 0.45s cubic-bezier(0.35, 0, 0.25, 1);
    transition: all 0.45s cubic-bezier(0.35, 0, 0.25, 1);
    font-size: 18px;
    color: #616161;
    text-align: center;
}

.surveyclass .valuespan {
    display: block;
    text-align: center;
    margin: 0;
}

.surveyclass .col-lg-12.slider-holder {
    padding-right: 0;
    padding-left: 0;
}

.surveyclass .slidergrid .panel-body {
    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}

.surveyclass .dynamic {
    width: auto;
}

a.ui-slider-handle.ui-state-default.ui-corner-all.min-slider {
    background: #007ac2;
}

.allSliderText {
    text-align: center !important;
    padding: 10px !important;
    background-color: #dedcdc !important;
    color: black !important;
    width: initial;
}

.surveyclass span.questiontext, .allSliderText {
    background: #007ac2;
    width: 100%;
    padding: 7px 15px;
    margin-bottom: 10px;
    margin-top: 40px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    border-radius: 5px;
    display: inline-block;
    -moz-box-shadow: 2px 4px 5px 0 #ccc;
    -webkit-box-shadow: 2px 4px 5px 0 #CCC;
    box-shadow: 2px 4px 5px 0 #CCC;
}

.surveyclass .form-control {
    font-size: 16px;
    color: black;
}

/* vertically align things */
.surveyclass .vertical-align {
    align-items: center;
    justify-content: center;
}

.surveyclass .first-half {
    float: left;
    width: 50%;
    text-align: left;
}

.surveyclass .second-half {
    float: right;
    width: 50%;
    text-align: right;
}

.surveyclass .topborder {
    border-top: 1px solid #DDD;
}

.surveyclass button.btn.btn-sm.questioninfo {
    margin-bottom: 10px;
    background-color: white;
}

.surveyclass .title, .surveyclass .listitem, .surveyclass .rotated-header-title {
    text-align: left;
}

/*********** radios and checkboxes ******************/
.neatGridContainer {
    display: block;
    position: relative;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.neatGridRadioLeft, .neatGridRadioRight, .neatGridRadio {
    width: 30px;
    height: 30px;
}

/* Create a custom radio button */
.neatGridRadioLeft {
    position: relative;
    margin: auto;
    border: 3px solid #ff0000;
    border-radius: 50%;
}

.neatGridRadio {
    position: relative;
    border: 1px solid white;
    width: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
}

.neatGridRadioRight {
    position: relative;
    margin: auto;
    border: 3px solid #008400;
    border-radius: 50%;
}

.neatGridRadio-Right {
    border-radius: 5px 0px 0px 5px;
}

.neatGridRadio-Left {
    border-radius: 0px 5px 5px 0px;
}

.neatGridTable {
    table-layout: fixed;
}

.surveyclass .neatGridTable.table tbody > tr > td {
    padding: 0px;
    background-color: white;
    border: 0px;
}

.surveyclass .table tbody > tr > td, .surveyclass .table tfoot > tr > td {
    padding: 8px 0;
}

.surveyclass .neatGridTable.table tbody > tr.no-border > td,
.surveyclass .neatGridTable.table tbody > tr > td.no-border {
    background-color: white;
    border: 0px;
}

/* On mouse-over, add a grey background color */
.neatGridContainer:hover input ~ .neatGridRadio {
    background-color: gray;
}

.neatGridContainer:hover input ~ .neatGridRadioLeft {
    background-color: #ff5050;
}

.neatGridContainer:hover input ~ .neatGridRadioRight {
    background-color: #55bb55;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.neatGridRadio:after, .neatGridRadioLeft:after, .neatGridRadioRight:after {
    content: "";
    position: relative;
    display: none;
}

.container .neatGridRadio,
.neatGridContainer .neatGridRadio {
    background: #ccc;
}

.container input:checked ~ .neatGridRadio {
    background: #007ac2;
    color: #ffffff;
}

/* Show the indicator (dot/circle) when checked */
/*.container input:checked ~ .neatGridRadio:after,.container input:checked ~ .neatGridRadioLeft:after,.container input:checked ~ .neatGridRadioRight:after {*/
/* display: block;*/
/*}*/

/* Style the indicator (dot/circle) */
.neatGridRadio:after, .neatGridRadioLeft:after, .neatGridRadioRight:after {

    margin: auto;
    width: 100%;
    padding-top: 27%;

}

.container .neatGridRadioLeft:after {
    background: #ff0000;
}

.container .neatGridRadioRight:after {
    background: #008400;
}

.container .neatGridRadio:after {
    background: #007ac2;
}


.surveyclass input[type="radio"], .redeem-page input[type="radio"], .unsubscribePage input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    margin: 0px 10px -5px 10px;
    width: 1.5em;
    height: 1.5em;
    background: white;
    box-shadow: inset 0 0 0 .5em white, 0 0 0 .25em#007ac2;
    -webkit-box-shadow: inset 0 0 0 .5em white, 0 0 0 .25em#007ac2;
    border-radius: 50%;
    transition: .5s;
    cursor: pointer;
    outline: none;
}

.surveyclass input[type="radio"]:checked, .redeem-page input[type="radio"]:checked, .unsubscribePage input[type="radio"]:checked {
    color: #007ac2;
    background: #007ac2;
    -webkit-animation: check-me-out .5s;
    -moz-animation: check-me-out .5s;
    box-shadow: inset 0 0 0 .3em white, 0 0 0 .25em#007ac2;
    -webkit-box-shadow: inset 0 0 0 .3em white, 0 0 0 .25em#007ac2;
}

@-webkit-keyframes check-me-out {
    25% {
        -webkit-transform: skewY(-8deg);
    }
    50% {
        box-shadow: inset 0 0 0 .3em white, 0 0 0 .25em #007ac2, 0 0 0 1em#007ac2;
        -webkit-transform: skewY(8deg);
    }
    75% {
        -webkit-transform: skewY(-4deg);
    }
    to {
        box-shadow: inset 0 0 0 .3em white, 0 0 0 .25em #007ac2, 0 0 0 0#007ac2;
        -webkit-transform: none;
    }
}

@keyframes check-me-out {
    25% {
        transform: skewY(-8deg);
    }
    50% {
        box-shadow: inset 0 0 0 .3em white, 0 0 0 .25em #007ac2, 0 0 0 1em#007ac2;
        transform: skewY(8deg);
    }
    75% {
        transform: skewY(-4deg);
    }

    to {
        box-shadow: inset 0 0 0 .3em white, 0 0 0 .25em #007ac2, 0 0 0 0#007ac2;
        transform: none;
    }
}

.surveyclass td.opentextlistprecode {
    width: 33%;
}

.surveyclass input.opentextlist {
    width: 85%;
}

/* survey animations */

.surveyclass .animate-if {
    background: white;
    border: 1px solid #F0F0F0;
    padding: 10px;
    min-height: 300px;
}

.surveyclass .animate-if.ng-enter, .surveyclass .animate-if.ng-leave {
    -webkit-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    -moz-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}

.surveyclass .animate-if.ng-enter,
.surveyclass .animate-if.ng-leave.ng-leave-active {
    opacity: 0;
}

.surveyclass .animate-if.ng-leave,
.surveyclass .animate-if.ng-enter.ng-enter-active {
    opacity: 1;
}

.surveyclass .animate-show {
    line-height: 20px;
    opacity: 1;
    padding: 10px;
    border: 1px solid black;
    background: white;
}

.surveyclass .animate-show.ng-hide-add,
.surveyclass .animate-show.ng-hide-remove {
    display: block !important;
}

.surveyclass .animate-show.ng-hide-add.ng-hide-add-active,
.surveyclass .animate-show.ng-hide-remove.ng-hide-remove-active {
    -webkit-transition: all linear 0.5s;
    -moz-transition: all linear 0.5s;
    transition: all linear 0.5s;
}

.surveyclass .animate-show.ng-hide {
    line-height: 0;
    opacity: 0;
    padding: 0 10px;
}

.surveyclass .check-element {
    padding: 10px;
    border: 1px solid black;
    background: white;
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

/***************************************************** START OF NEW CSS *************************************************/
#surveyLinkOnProfilePage {
    cursor: pointer;
}

#discussionAdminNav {
    right: 0px !important;
}

#discussionBtnReport, #discussionBtnReply {
    background-color: white !important;
    color: black !important;
}

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

#submitLoginModal, #cancelLoginModal {
    border-color: white !important;
}

#cancelLoginModal {
    margin-right: 5px;
}

#loginModalHeader3 {
    color: #ffffff;
}

.SiteClient .statMessage.alert.alert-info {
    margin: 0 !important;
}

.statMessage.alert.alert-info {
    background-color: #007ac2;
    color: #ffffff;
    opacity: 0.8;
}

.panel-body.quickpoll {
    display: initial;
}

.panel-fullscreen {
    display: block;
    z-index: 100;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    overflow: auto;
}

.SiteClient .card-header.noPlusMinus:before {
    display: none !important;
}

.dropdownScales {
    font-size: 16px;
    font-weight: bold !important;
}

.scaleBtns {
    width: 93px;
}

.addEditLabels, #renameEditTag {
    width: 85px;
    font-weight: bold;
}

#textAddScaleLbl {
    font-weight: bold;
}

#precodeAddScale, #precodeEditScale, #tagsIsKeySelect {
    margin-right: 15px;
    width: 15%;
    display: inline-block;
}

#textAddScale {
    width: 64%;
    display: inline-block;
}

#textEditScale {
    width: 61%;
    display: inline-block;
}

#scaleNameAddScale {
    width: 87%;
    display: inline-block;
}

#precodeEditScaleLbl, #scaleNameEditScaleLbl {
    width: 100px;
    font-weight: bold;
}

#scaleNameEditScale {
    width: 84.7%;
    display: inline-block;
}

#textEditScaleLbl {
    margin-right: 10px;
    font-weight: bold;
}

.headerRowDiv {
    padding: 10px;
    font-size: 16px;
}

#scaleDelSelRows {
    border-bottom: 1px solid #e6e6e6;
}

#scalesBtnsDiv {
    margin: 10px 0px 10px 0px;
}

#scaleIDMainScales, #abuseSelect {
    width: auto;
    display: inline-block;
}

#scaleIDMainScalesLbl {
    font-size: 20px !important;
}

.largeBtn {
    font-size: 30px;
}

#abusesLbl, #itemsPerPageLbl {
    width: 48px;
}

.leftAlignText {
    text-align: left !important;
}

.btnsMobile, .btnsMobile:active, .btnsMobile:focus {
    display: block;
    width: 100%;
    outline: none !important;
    overflow: hidden;
}

.btnsMobile[aria-expanded="true"]:before {
    font-family: FontAwesome;
    content: "\f068";
    float: right;
    color: #ffffff !important;
    margin: 0px 5px 0 0;
}

.btnsMobile:before, .btnsMobile.collapsed:before {
    font-family: FontAwesome;
    content: "\f067";
    float: right;
    color: #ffffff !important;
    margin: 0px 5px 0 0;
}

.mobileDiv {
    padding: 0px 5px 10px 5px;
}

.mobileDiv img {
    max-width: 100%;
    height: auto;
    width: auto;
    max-height: 100%;
}

.mobileDivLbl {
    margin-right: 5px;
}

.selectboxMobile {
    display: inline-block;
}

.mobileDivContainer {
    margin-top: 10px;
    display: none;
}

/*new search group*/
.searchButtonDefault {
    height: 34px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.searchButtonSrch {
    pointer-events: none;
}

.searchButtonSrch:hover {
    cursor: auto;
}

.searchGroupJustified {
    width: 480px;
}

.searchFormControl {
    height: 34px;
}

.desktopTopButtons {
    width: 480px;
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;
    margin-top: 10px;
}

.desktopTopBtnDefault {
    width: 100%;
    margin: 5px 1px;
}

.textAlignDynamic {
    text-align: left;
}

.mobilePageBody {
    padding-bottom: 0;
    padding-top: 0;
    display: block;
}

.mobilePageHeader, .mobileNavBottom, .mobileDivContainerSmall {
    display: none;
}

.cardEmptyHeaders {
    border: 1px solid #c6c6c6;
    padding: 1.25rem 0.75rem 1.25rem 1.25rem;
}

.keyDemoColumn {
    vertical-align: middle;
    min-width: 70px;
}

@media only screen and (max-width: 767px) {
    .desktopPageHeader, .tableDesktopBtn, .tableDesktopDiv, .desktopHeaders {
        display: none;
    }

    .mobileNavBottom {
        display: block;
    }

    .textAlignDynamic {
        text-align: center;
        padding-left: 20%;
        /* padding-left: 9rem;*/
        /* padding-left: 90px;*/
    }

    .mobilePageBody {
        padding-bottom: 60px;
    }

    .mobileDivContainerSmall, .mobilePageHeader {
        display: block !important;
    }

    .desktopText {
        font-weight: bolder;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .desktopSelect {
        margin-top: 5px;
    }

    .searchGroupJustified {
        width: 100%;
        padding: 10px 0;
    }
}

@media only screen and (max-width: 900px) {
    .tableDesktop {
        display: none;
    }

    .mobileDivContainer {
        display: block !important;
    }
}

.col-xs-1 {
    width: 3.5%;
}

.colsm1-5 {
    width: 10%;
}

.surveyStatuses {
    margin-right: 15px;
}

.badge-main {
    background-color: #007ac2;
    color: #ffffff;
}

#samplesTaggerDiv {
    border: 1px solid #e8e8e8;
    max-height: 110px;
    overflow-y: auto;
    border-radius: 5px;
}

.taggerDiv {
    border: 1px solid #e8e8e8;
    max-height: 200px;
    overflow-y: auto;
    border-radius: 5px;
    z-index: 2147483647;
    position: absolute;
    width: 100%;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: #007ac2;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

::-webkit-scrollbar-track {
    background-color: #e8e8e8;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#tagSearch {
    width: 200px;
    display: inline-block;
    margin-left: 15px;
}

@media only screen and (max-width: 500px) {
    .stylesLegend {
        font-size: 90%;
        padding-top: 15px;
    }
}

.stylesLegend {
    padding-top: 15px;
}

#selectedCategoriesTags {
    border: 1px solid #c6c6c6;
    cursor: pointer;
    margin-bottom: 5px;
}

#selectedCategoriesTags:hover {
    background-color: #d9534f;
    border: 1px solid #d9534f;
    color: white;
}

#addCategoriesTags {
    cursor: pointer;
    margin-bottom: 5px;
}

#addCategoriesTags:hover {
    background-color: #5cb85c;
    border: 1px solid #5cb85c;
    color: white;
}

/* Need this for list items in button dropdown*/
.disabled {
    pointer-events: none;
}

.discussCatsTags {
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
}

.addTagLbls {
    width: 75px;
}

#tagNameAddTag {
    width: 88.5%;
    display: inline-block;
}

.tagsDivsContainer {
    margin-top: 10px;
    height: 142px;
    overflow: auto;
}

#addCategoriesTags.disabledDiv {
    opacity: 0.5;
    cursor: not-allowed;
}

#selectedCategoriesTags.disabledDiv {
    opacity: 0.5;
    cursor: not-allowed;
}

.sorter {
    cursor: pointer;
}

.dark10Background {
background-color: #008adc !important;color: #FFF !important;}

.divMainColor {
background-color: #007ac2 !important;color: #ffffff !important;}

.divMainColor > a {
color: #ffffff !important; text-decoration: underline;
}

.blackDiv {
    background-color: black;
    color: white;
}

.alert-mainColor {
background-color: #5cc3ff !important;color: #000 !important;}

.alert-mainColor > a {
color: #000 !important; text-decoration: underline;
}

.wordBreak {
    word-break: break-word;
}

.mrocNav {
    background-color: #007ac2;
    border: none !important;
    color: #ffffff !important;
}

.mrocATag {
    color: #ffffff !important;
}

.mrocATag:hover, .mrocATag:focus, .mrocProfileIcon:hover, .mrocProfileIcon:focus, .mrocProfileIcon:active, .nav .open > .mrocProfileIcon {
    background-color: #008adc !important;
    color: #FFF;
    outline-color: transparent;
}

.mrocProfileIcon {
    color: #ffffff !important;
}

.mrocNavToggle {
    background-color: white !important;
}

.mrocNavToggle .icon-bar {
    background-color: #007ac2 !important;
}

h1.page-header {
    margin: 90px 0 20px;
}

.combine-page-header.page-header {
    margin: 90px 0 20px;
}

.combine-page-header.header1 {
    font-size: 36px;
    font-family: Roboto;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

.combine-page-header.header3 {
    font-size: 24px;
    font-family: Roboto;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

.modal-footer button {
    float: right;
    margin-left: 5px !important;
}

.table > thead > tr > th, .table > tbody > tr > td, .table > tbody + tbody {
    border-bottom: none;
    border-top: none;
    color: black;
}

.questionTree .treeLis:not(.rowClicked) .pageRelRow {
    background: repeating-linear-gradient(45deg, #53b2d2, #53b2d2 10px, #56abc8 10px, #56abc8 20px);
    color: black;
    font-weight: 600;
    font-size: 15px;
}

.questionTree .page-container {
    border: 1px solid #2AA9E0;
    border-radius: 4px;
}

.freqRow div div:hover, .freqRow:hover {
    cursor: pointer;
    background-color: #2AA9E0;
    color: black;
}

.basicRow div div:hover, .basicRow:hover {
    cursor: pointer;
    background-color: #2AA9E0;
    color: black;
}

.pageRelRow div div:hover, .pageRelRow:hover {
    cursor: pointer;
    background: #2AA9E0 !important;
    color: black;
}

.slidersRow div div:hover, .slidersRow:hover {
    cursor: pointer;
    background-color: #2AA9E0;
    color: black;
}

.gridsRow div div:hover, .gridsRow:hover {
    cursor: pointer;
    background-color: #2AA9E0;
    color: black;
}

.templatesRow div div:hover, .templatesRow:hover {
    cursor: pointer;
    background-color: #2AA9E0;
    color: black;
}

.otherRow div div:hover, .otherRow:hover {
    cursor: pointer;
    background-color: #2AA9E0;
    color: black;
}

.mrocAlert {
    padding: 0 0 0 15px !important;
    border-radius: 0;
}

.mrocH3 {
    margin: 18px 0 18px 0 !important;
    color: #ffffff !important;
}

.mrocH4 {
    margin: 5px 0 5px 0 !important;
    color: #ffffff !important;
}

.tableHover:hover {
    cursor: pointer;
background-color: #8fd5ff !important;}

.rowClicked {
background-color: #5cc3ff !important;color: #000 !important;}

.questionClicked > div > .item {
    background-color: var(--color-primary);
    color: white;
}

.alertEmail-notSet {
    background-color: #b9b9b9;
}

.alertEmail-set {
    background-color: #ff7e87;
}

.handCurson {
    cursor: pointer;
}

.disabledCursor {
    background-color: #c8c8c8;
    cursor: not-allowed;
}

.imageLoaderFile {
    max-height: 80px;
    max-width: 100px;
    vertical-align: middle;
    margin: 0 auto;
    display: table-cell;
}

.videoFile {
    max-height: 120px;
    max-width: 100px;
    vertical-align: middle;
    margin: 0 auto;
    display: table-cell;
}

.videoDiv {
    width: 135px;
    height: 175px;
    border: 1px solid #c6c6c6;
    border-radius: 4px;
    margin-right: 7.5px;
    margin-top: 7.5px;
    display: table;
}

.imageLoaderDiv1 {
    width: 135px;
    height: 130px;
    border: 1px solid #c6c6c6;
    border-radius: 4px;
    margin-right: 7.5px;
    margin-top: 7.5px;
    display: table;
}

.imageLoaderDiv2 {
    height: 100%;
    width: 100%;
    display: table-cell;
    vertical-align: middle;
}

.clientFile, .card-img-top-adminfile video {
    max-height: 100px;
    max-width: 100px;
    vertical-align: middle;
}

.card-img-top-adminfile iframe {
    height: 175px;
    max-width: 250px;
    vertical-align: middle;
}

.clientFileWrapper {
    height: 300px;
    min-width: 312px;
    margin-right: 7.5px;
    margin-bottom: 5px;
}

.card-border-top {
    border-top: 1px solid #c6c6c6 !important;
}

.card-checked {
    border: 3px solid #007ac2 !important;
}

.card-img-top-adminfile {
    height: 100px;
    width: 100px;
    text-align: center;
    margin: 0 auto;
    white-space: nowrap;
    display: table;
}

.card-img-top-backgrounds {
    height: 100%;
    width: 250px;
    text-align: center;
    margin: 0 auto;
    white-space: nowrap;
    display: table;
}

.breakAll {
    word-break: break-all;
}

.my-drop-zone {
    border: solid 3px lightgray;
}

.nv-file-over {
    border: solid 3px green;
}

.mrocCaret {
    margin-left: 3px !important;
}

.open > .dropdown-menu > li > a:hover,
.open > .dropdown-menu > div > li > a:hover,
.open > .dropdown-menu > li > label:hover,
.open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > .dropdown-item > a:hover,
.dropdown-menu > div > li > a:hover {
    background-color: #008adc !important;
    color: #FFF;
    text-decoration: none;
}

.mrocDropdownMenu {
    padding: 0;
    width: 180px;
}

.mrocDropdownMenuLarge {
    padding: 0;
    width: 200px;
}

.mrocDropdownMenuShowLeft {
    left: -480%;
}
.dropdown-menu > li > a, .dropdown-menu > div > li > a {
    padding: 10px;
    color: black;
    display: block;
    background-color: white;
}

.statusDiv {
    padding-left: 0;
    display: inline-block;
    float: left;
}

.alignMiddleLbl {
    margin: 0 auto;
    vertical-align: -webkit-baseline-middle;
}

.clickedBar {
    border-left: 10px solid#007ac2;
}

#surveyTypesFilter {
    display: inline-block;
}

@media only screen and (min-width: 1200px) {
    .col-lg-4-mroc {
        width: 36%;
    }
}

@media only screen and (max-width: 1200px) {
    #surveyTypesFilter {
        margin-top: 10px;
    }

    .surveyTypesLbl {
        margin-right: 5px;
    }
}

.activeSortHeader {
background-color: #8fd5ff !important; color: #000;
}

.select2-container {
    width: auto !important;
    display: block !important;
}

.select2-container .select2-selection--single {
    padding: 2px 0;
    height: 34px;
}

.tableNoHover {
    cursor: not-allowed;
}

.noHover:hover {
    cursor: default !important;
    background-color: #c8c8c8 !important;
    color: black !important;
}

.noHover {
    background-color: #c8c8c8;
    color: black;
}

.overlayLoading {
    opacity: 0.7;
    background: #000;
    width: 100% !important;
    height: 100% !important;
    z-index: 2147483647;
    top: 0;
    left: 0;
    position: fixed;
}

.overlayLoadingMenu {
    opacity: 0.7;
    background: #000;
    width: 100% !important;
    height: 100% !important;
    z-index: 2147483647;
    top: -1px;
    border-radius: 5px;
    position: absolute;
    display: grid;
}

.overlayLockedOut {
    background: #007ac2;
    width: 100% !important;
    height: 100% !important;
    z-index: 2147483647;
    top: 0;
    left: 0;
    position: fixed;
}

.overlayLockedOut img {
    max-width: 200px;
    max-height: 200px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: 10px;
}

.overlayLockedOut p {
    margin-top: 10px;
}

.overlayForm {
    display: block /*for the img inside your div */;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    width: 300px;
}

.ovarlayLockedOut > div {
    width: 300px;
}

div.mrocSpinningWheel {
    color: white;
    vertical-align: middle;
    display: table-cell;
}

div.mrocSpinningWheel:before {
    display: table;
    margin: 0 auto;
}

div.mrocSpinningWheel > i, div.mrocSpinningWheel h1 {
    color: white;
    margin: 0 auto;
    display: table;
}

.overlayLoadingMenu div.mrocSpinningWheel {
    margin-top: 50%;
}

.sorter > i.fa.fa-chevron-down, .sorter > i.fa.fa-chevron-up, .sorter > i.fa.fa-minus {
    margin-top: 2px;
}

.clearIcon {
    border-right: none;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.searchIcon:hover {
    cursor: auto;
}

.exportOption[disabled] {
    pointer-events: none;
}

.surveyImgDiv {
    height: 300px;
    border: 1px solid black;
    display: flex;
    cursor: pointer;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .surveyImgDiv {
        display: inline-block !important;
    }
}

.surveyclass img {
    max-width: 100%;
    max-height: 90%;
    margin: auto;
}

.exportExcelGroup {
    display: inline-block;
}

.cardHeaderTogglBtn {
    background-color: transparent;
    border: none;
    float: right;
    padding-right: 0;
    padding-left: 0;
}

.cardHeaderTogglBtn:focus {
    outline: none !important;
}

@media (max-width: 749px) {
    .exportExcelGroup {
        display: block;
    }
}

.inviteUsersTextarea, .optOutUsersTextarea, .notesTextarea, .defaultTextarea, .surveyTextArea {
    width: 100%;
    border: 1px solid #c6c6c6;
    border-radius: 4px;
}

.disabledTextAreas {
    background-color: #f7f7f7;
}

.agree-holder {
    border: 1px solid #c6c6c6;
    background-color: #fff;
    padding: 10px 10px 0px 10px;
    border-radius: 0;
}

.toplineTable > tbody > tr > td {
    text-align: left;
    border: 1px solid #D1D1D1;
}

.toplineTable > tbody > tr > th {
    text-align: center;
    border: 1px solid #D1D1D1;
}

.reportTable > tbody > tr > td {
    text-align: left;
    border: 1px solid #D1D1D1;
}

.reportTable > tbody > tr > th {
    text-align: left;
    border: 1px solid #D1D1D1;
}

@media (min-width: 768px) and (max-width: 1245px) {
    .toplineLbl {
        height: 40px;
    }

    .reportLbl {
        height: 40px;
    }
}

.pl0 {
    padding-left: 0px !important;
}

.p0 {
    padding: 0px !important;
}

.pr0 {
    padding-right: 0px !important;
}
.pr5 {
    padding-right: 5px !important;
}
.p5 {
    padding: 5px !important;
}

.p10 {
    padding: 10px !important;
}

.p15 {
    padding: 15px !important;
}

.pt10 {
    padding-top: 10px !important;
}

.pb10 {
    padding-bottom: 10px !important;
}

.conductSurveyPadding {
    padding: 10px 30px;
}

/* Media Query for Mobile Devices */
@media screen and (max-width: 480px) {
    .conductSurveyPadding {
        padding: 5px 5px;
    }
}

.mce-ico.mce-i-fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ui-select-bootstrap .ui-select-choices-row > span {
    padding: 10px;
}

.ui-select-bootstrap .ui-select-choices-row.active > span {
    background-color: #007ac2;
    color: #ffffff;
}

.ui-select-bootstrap .ui-select-choices-row > span:hover, .ui-select-bootstrap .ui-select-choices-row > span:focus {
background-color: #8fd5ff !important; color: #000;
}

div.ui-select-match > span, div.ui-select-match > span:hover, div.ui-select-match > span:focus, div.ui-select-match > span:active {
    background-color: white !important;
    color: black !important;
    padding: 5px;
}

.mAuto {
    margin: auto !important;
}

.m5Auto {
    margin: 5px auto !important;
}

.tileTitleDiv .m5Auto {
    color: white;
}

.m10Auto {
    margin: 10px auto !important;
}

.m30Auto {
    margin: 30px auto !important;
}

.m0 {
    margin: 0 !important;
}

.m5 {
    margin: 5px !important;
}

.m10 {
    margin: 10px !important;
}

.mr0 {
    margin-right: 0px !important;
}

.mb0 {
    margin-bottom: 0px !important;
}

.mt0 {
    margin-top: 0px !important;
}

.mt5 {
    margin-top: 5px !important;
}

.mb5 {
    margin-bottom: 5px !important;
}

.mt10 {
    margin-top: 10px !important;
}

.mt15 {
    margin-top: 15px !important;
}

.ml0 {
    margin-left: 0px !important;
}

.ml15 {
    margin-left: 15px !important;
}

.ml30 {
    margin-left: 30px !important;
}

.mb10 {
    margin-bottom: 10px !important;
}

.mt20 {
    margin-top: 20px !important;
}

.mb20 {
    margin-bottom: 20px !important;
}

.mb40 {
    margin-bottom: 40px !important;
}

.mt30 {
    margin-top: 30px !important;
}

.mb30 {
    margin-bottom: 30px !important;
}

.mb50 {
    margin-bottom: 50px !important;
}

.ml5 {
    margin-left: 5px !important;
}

.mr10 {
    margin-right: 10px !important;
}

.tac {
    text-align: center !important;
}

.tal {
    text-align: left !important;
}

.inline-block {
    display: inline-block !important;
}

.dblock {
    display: block !important;
}

.mbNeg10 {
    margin-bottom: -10px !important;
}

.fwnorm {
    font-weight: normal !important;
}

.fw500 {
    font-weight: 500 !important;
}

.fw600 {
    font-weight: 600 !important;
}

.mrocHR {
    border-top: 5px solid#007ac2;
}

.surveyHR {
    border-top: 2px solid#007ac2;
    /* Or maybe #dddddd for grey */
}

.mainUserBadge {
    position: relative;
}

.mrocBadge {
    background-color: red;
    color: white;
    padding: 7px;
    height: 40px;
    width: 40px;
    font-size: 16px;
    right: 5px;
    position: absolute;
    z-index: 10;
    top: 40px;
    font-weight: 600;
    border-radius: 99px;
    text-align: center;
}

.mrocBadgeRelative{
    background-color: red;
    color: white;
    padding: 7px;
    height: 40px;
    width: 40px;
    font-size: 16px;
    right: -10px;
    position: absolute;
    z-index: 10;
    top: -3px;
    font-weight: 600;
    border-radius: 99px;
    text-align: center;
}



/* START OF MEDIA TAGS */
@media (max-width: 767px) {
    .mb5Mobile {
        margin-bottom: 5px !important;
    }

    .show-lte-xs {
        display: block !important;
    }

    .modal-xl {
        -webkit-overflow-scrolling: auto;
    }
}

@media (max-width: 991px) {
    .hide-lte-sm {
        display: none !important;
    }

    .p0Mobile {
        padding: 0 !important;
    }
}

@media (min-width: 992px) {
    .hide-gt-sm {
        display: none !important;
    }
}

.col-xxs-1 {
    width: 25px;
}

colorpicker-preview {
    min-height: 20px;
}

colorpicker-hue {
    min-width: 20px;
}

.loginBackgroundImages {
    width: 250px;
    height: 150px;
}

.editThemeImages {
    max-height: 100px;
    max-width: 100%;
    display: table-cell;
    margin: 0 auto;
    text-align: center;
}

.mrocProfileIconDropdown {
    margin: 0;
    border-color: #007ac2 !important;
    border-radius: 0px;
}

.question-select b {
    margin-right: 5px;
}

.alert.query-group {
    margin-bottom: 0px;
    border: 2px solid#007ac2;
    margin-top: 10px;
}

a.list-group-item-selected, a.list-group-item-selected:active, a.list-group-item-selected:focus, a.list-group-item:hover {
    background-color: #009af5;
    color: #FFF !important;
}

.dont-break-out {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    -ms-word-break: break-all !important;
    word-break: break-word !important;
    -ms-hyphens: auto !important;
    -moz-hyphens: auto !important;
    -webkit-hyphens: auto !important;
    hyphens: auto !important;
    white-space: normal !important;
}

ul.messenger > li {
    word-wrap: break-word !important;
}

.dropdown-clipboard {
    margin-top: 0px;
}

.navbar-toggle.User {
    display: block !important;
}

.userSlideNav.open {
    display: block;
    height: auto;
}

.questionTree > div > div > ul {
    overflow: auto;
    border: 1px solid #ddd;
    border-top: none;
    border-bottom: none;
}

.bgroundMain {
    background-color: #007ac2 !important;
    color: #ffffff !important;
}

.folderBorder {
    border-left: 2px solid black;
    border-right: 2px solid black;
}

.folderBorder:nth-child(0), .folderBorder:nth-child(1) {
    border-top: 2px solid black;
}

.folderBorder:not(:last-of-type) {
    border-bottom: 2px solid black;
}

.marketplaceBtns {
    min-height: 94px;
}

@media (max-width: 768px) {
    .questionOptions.open {
        width: 100%;
    }

    .marketplaceBtns {
        min-height: 70px;
    }

    .mainPost .discussionAvatarContainer {
        float: left;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .questionOptions.open {
        width: 16.66666667%;
    }
}

@media (min-width: 1200px) {
    .questionOptions.open {
        width: 25%;
    }
}

@media (min-width: 992px) {
    .surveyEditor.qTypes, .questionTree, .surveyEditorPrecodes {
        transition: 0.7s;
    }

    .surveyEditor.qTypes.closed {
        margin-left: -300px;
    }

    .questionOptions {
        visibility: hidden;
        width: 0px;
        overflow: hidden;
        padding: 0;
        transition: visibility 0.7s,
        width 0.7s 0s, padding 0.7s 0s, overflow 0.7s 0s;
    }

    .questionTree > div > div > ul {
        height: 552px;
    }

    .questionOptions.open {
        visibility: visible;
        padding: 0px 15px;
        overflow: visible;
    }

    .questionOptions > div.questionOptionContainer {
        min-height: 608px;
    }

    .surveyEditorPrecodes {
        min-height: 525px;
    }

    .surveyEditor #previousStep {
        float: left;
    }

    .surveyEditor #nextStep {
        float: right;
    }

    .questionOptions .ui-select-container, .questionOptions select {
        min-width: 122px;
        width: auto;
    }
}

@media (max-width: 992px) {
    .mobileview-username {
        display: none
    }
}


@media (min-width: 991px) {
    .desktop-profile {
        display: none;
    }
}

@media (max-width: 991px) {
    .surveyEditor.qTypes.closed {
        margin-left: 0px;
    }

    .questionTree {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .surveyEditorPrecodes {
        margin-bottom: 10px;
    }

    .questionTree > ul {
        height: 300px;
    }

    .surveyEditor #previousStep, .surveyEditor #nextStep {
        width: 100%;
    }

    #showQuestionsMenuDiv {
        display: none;
    }

    .questionTree .fa-chevron-left, .questionTree .fa-chevron-right {
        display: none;
    }
}

@media (max-width: 1199px) {
    .questionOptions .ui-select-container, .questionOptions select {
        width: auto !important;
        min-width: 0 !important;
    }
}

.userSlideNav {
    display: none;
    width: 250px;
    right: 0;
    position: fixed;
    z-index: 99999;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .800);
    background-color: white;
}

.userProfilePage {
    border: 1px solid #e8e8e8 !important;
    padding: 10px 15px !important;
}

.smiconConfig {
    max-width: 34px;
    margin: 0 auto;
    display: table;
}

.customSMIcon {
    max-height: 30px;
}

.modal-image img {
    display: block;
    margin: 0 auto;
}

.contextMenuItem {
    text-align: center;
    min-height: 59px;
    height: auto;
}

.contextActionMenuIcons {
    display: block;
    margin: 0 auto;
    margin-bottom: 5px;
}

.icon-pacman:before {
    content: url('/images/pacman.svg') !important;
}

.userCardText {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mroccropper canvas {
    margin: auto !important;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.mrocPanel {
    background-color: #007ac2 !important;
    color: #ffffff !important;
}

.mrocPanelLight10 {
    background-color: #009af5 !important;
    color: #FFF !important;
}

#map_canvas {
    position: relative;
    height: 500px;
}

.angular-google-map-container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.filePreview > span > video, .filePreview > span > img, .filePreview iframe, .filePreview > span > i {
    height: 105px;
    width: 105px;
    padding: 5px;
    border: 1px dotted black;
    margin: 5px 5px 5px 0;
    vertical-align: middle;
    display: inline-block;
}

.filecontent video {
    max-width: 100%;
    max-height: 150px;
    min-width: 150px;
    vertical-align: bottom;
}

video:-webkit-full-screen, audio:-webkit-full-screen {
    max-height: 100% !important;
}

.filecontent img, .filecontent i {
    width: auto;
    max-width: 350px;
    height: 150px;
    vertical-align: bottom;
    cursor: pointer;
    font-size: 6em;
}

.filecontent iframe {
    vertical-align: bottom;
    height: 150px;
    width: auto;
}

.filecontent.well img, .filecontent.well i {
    cursor: default;
}

.downloadFileA:hover {
    text-decoration: none;
}

.downloadFile {
    font-size: 16px;
    margin: 5px 0 5px 0;
}

.downloadFileName {
    font-size: 16px;
    margin: 0;
}

.fa-window-close {
    float: right;
    cursor: pointer;
}

.toptext > .fa-window-close {
    color: #ffffff;
}

.discussion-editor > .fa-window-close {
    margin-top: 17px;
    color: #007ac2;
}

.newsTemplateCollapse.collapse.in {
    border-bottom: 1px solid #c6c6c6;
}

.Site.resetpw > .Site-footer {
    display: none !important;
}

.postDiv {
    border-left: 1px solid#007ac2;
}

.discussionAvatarContainer {
    margin: 5px;
    text-align: center;
}

.postingButtons {
    float: right;
}

.postingButtons > .btn-group {
    right: 40px;
}

.discussionTimeDiv {
    display: inline-block;
    margin-left: 40px;
    height: 32px;
}

.removeFileDiscussion {
    position: absolute;
    background: white;
    margin-left: 80px;
    margin-top: 6px;
    width: 24px;
    text-align: center;
    z-index: 10;
}

legend.panel-title {
    color: #ffffff;
}

.removeFileDiscussion.appFile {
    margin-left: 126px !important;
    margin-top: 0px !important;
}

.contrast {
    color: #ffffff !important;
}

.slidergrid.rzslider[disabled] .rz-bar {
    background-color: #d8e0f3;
}

.slidergrid.rzslider .rz-bar.rz-selection {
    background-color: #007ac2;
}

.slidergrid.rzslider .rz-pointer:after,
.slidergrid.rzslider .rz-pointer.rz-active:after {
    background-color: #007ac2;
}

.slidergrid.rzslider .rz-pointer {
    top: -9px;
    z-index: 3;
    width: 25px;
    height: 25px;
    background-color: #007ac2;

}

.slidergrid.rzslider.noPointer .rz-pointer {
    visibility: hidden;
}

.slidergrid.rzslider.noPointer .rz-selection.rz-selection,
.slidergrid.rzslider.noPointer .rz-tick.rz-selected {
    background-color: #ccc;
}

.slidergrid.rzslider.noPointer .rz-tick.rz-selected .rz-tick-legend {
    color: inherit;
}

.slidergrid.rzslider .rz-bubble.rz-model-value {
    display: none;
}

.slidergrid.rzslider .rz-bar,
.slidergrid.rzslider .rz-tick {
    background: #ccc;
}

.rzslider .rz-tick {
    background-color: #ffffff;
}

.slidergrid.rzslider .rz-tick.rz-selected {
    background-color: #007ac2;
}


.slidergrid.rzslider .rz-tick.rz-selected .rz-tick-legend {
    color: inherit;
}

.slidergrid.rzslider .rz-tick.rz-selected.mainColor .rz-tick-legend {
    color: #007ac2;
}

.sliderArrow {
    color: #007ac2;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 27px;
}

.rzslider .rz-bar {
    height: 4px;
}

.rzslider .rz-tick {
    top: 0px;
    height: 11px;
}

.rzslider .rz-bubble.rz-limit:not(.textbalance), .rzslider .rz-bubble.currVal {
    visibility: hidden !important;
}

.rzslider {
    margin: 60px 0 !important;
}

.rzslider.allocationSlider {
    margin: 50px 0 !important;
}

.slidergrid.rzslider.rz-vertical {
    height: 220px;
}

.slidergrid.rzslider.rz-vertical .rz-tick-legend {
    left: 20px

}

.slidergrid.rzslider.rz-vertical .rz-pointer {
    left: -11px !important;
    top: auto;
}

.gridSelected {
    border: 1px solid #59b75c !important;
    border-radius: 4px;
}

.gridNotSelected {
    border-bottom: 1px solid #ddd;
}

.visible {
    visibility: visible !important;
}

.rzslider .rz-bubble.rz-limit.rz-ceil.visible {
    visibility: visible !important;
}

.allocationSlider.rzslider .rz-bubble {
    display: none !important;
}

.alwaysShowSliderLabels {
    left: auto !important;
}

.surveyDatePicker ._720kb-datepicker-calendar._720kb-datepicker-open, ._720kb-datepicker-calendar._720kb-datepicker-forced-to-open {
    min-width: 200px;
    width: auto;
}

ul[dnd-list] {
    min-height: 42px;
    padding: 0;
}

ul[dnd-list] > li {
    display: block;
    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 18px;
    /* identical to box height */

    letter-spacing: 0.25px;

    /* Secondary/hover */

    color: #515151;
}

ul[dnd-list] > li .item {
    padding: 5px 10px;
    gap: 10px;

    width: 161px;
    height: 30px;

    border: 1px solid #DEDEDF;
    border-radius: 4px;
}

ul[dnd-list] > li.dndDraggingSource {
    display: none;
}

.container-element > ul[dnd-list] > li.dndPlaceholder {
    display: block;
    min-height: 42px;
    background-color: rgb(221, 221, 221) !important;
}

.panel-heading.ranksort {
    background-color: #007ac2;
    color: #ffffff;
}

.allocationTotal {
    color: green;
    font-size: 18px;
}

.activeState {
    color: black;
    font-weight: bold;
    cursor: pointer;
}

.clickableHeader {
    color: #353535;
    cursor: pointer;
}

.notActiveState {
    color: #a9a9a9;
}

.surveyEditor.card-block {
    padding: 0 !important;
}

.surveyEditor .surveyQsBorder {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    display: flex;
}

.bRight {
    border-right: 1px solid #ddd;
}

.surveyEditor.collapsing, .surveyEditor .collapsing {
    transition: 0.75s;
}

.surveyEditor .card-header.collapsed {
    border-bottom: none !important;
}

.surveyEditor .card-header {
    border-top: none;
}

.delDupMenu {
    position: absolute;
    background: #ffffff;
    color: black;
    border-radius: 4px;
    box-shadow: 0 5px 15px 0 rgba(22, 38, 59, 0.28);
    border: .5px solid#007ac2;
    z-index: 99;
}

.conductThumbs {
    font-size: 5em;
}

.ui-select-bootstrap > .ui-select-choices, .ui-select-bootstrap > .ui-select-no-choice {
    max-height: 220px;
}

.scrollup {
    padding: 5px;
    bottom: 50px;
    height: 65px;
    position: fixed;
    right: 15px;
    width: 65px;
    display: none;
    font-size: 45px;
    z-index: 20;
}

.activityCount {
    text-align: center;
}

.emailSetting {
    color: black;
    font-weight: 600;
}

@font-face {
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url('/fonts/slick.eot');
    src: url('/fonts/slick.eot?#iefix') format('embedded-opentype'),
    url('/fonts/slick.woff') format('woff'),
    url('/fonts/slick.ttf') format('truetype'),
    url('/fonts/slick.svg#slick') format('svg');
}

@font-face {
    font-family: 'FontAwesome';
    src: url('/fonts/fontawesome-webfont.eot?v=4.0.3');
    src: url('/fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'),
    url('/fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'),
    url('/fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'),
    url('/fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'survey';
    src: url('/css/fontello/font/survey.eot?77626722');
    src: url('/css/fontello/font/survey.eot?77626722#iefix') format('embedded-opentype'),
    url('/css/fontello/font/survey.woff2?77626722') format('woff2'),
    url('/css/fontello/font/survey.woff?77626722') format('woff'),
    url('/css/fontello/font/survey.ttf?77626722') format('truetype'),
    url('/css/fontello/font/survey.svg?77626722#survey') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: "survey";
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: .2em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-ins-grid:before {
    content: '\e800';
}

/* '' */
.icon-ins-multi:before {
    content: '\e801';
}

/* '' */
.icon-ins-skip:before {
    content: '\e802';
}

/* '' */
.icon-ins-end:before {
    content: '\e803';
}

/* '' */
.icon-ins-folder:before {
    content: '\e804';
}

/* '' */
.icon-ins-image:before {
    content: '\e805';
}

/* '' */
.icon-ins-screenname:before {
    content: '\e806';
}

/* '' */
.icon-ins-info:before {
    content: '\e807';
}

/* '' */
.icon-ins-opentext:before {
    content: '\e808';
}

/* '' */
.icon-ins-datetime:before {
    content: '\e809';
}

/* '' */
.icon-ins-dropdown:before {
    content: '\e80a';
}

/* '' */
.icon-ins-missing:before {
    content: '\e80b';
}

/* '' */
.icon-ins-activity:before {
    content: '\f0ae';
}

/* '' */
.icon-ins-newpage:before {
    content: '\f15b';
}

/* '' */
.icon-ins-ranksort:before {
    content: '\f162';
}

/* '' */
.icon-ins-single:before {
    content: '\f192';
}

/* '' */
.icon-ins-slidergrid:before {
    content: '\f1de';
}

/* '' */

@media screen and (min-width: 768px) {
    .leftDiscussionPane {
        margin-left: -18.55%;
    }

    .postDiv {
        margin-left: 16.66666667%;
    }

    .show-lte-xs {
        display: none !important;
    }

}

@media screen and (max-width: 767px) {
    .badge-main {
        margin-bottom: 5px;
    }

    .postDiv {
        margin-left: 20%;
    }

    .leftDiscussionPane {
        margin-left: -22.8%;
        display: inline-block;
        float: left;
        width: 20%;
    }

    .discussionPost > .postcontent {
        display: inline-block;
        width: 100%;
    }

    .discussion-post-repeat, .discussionPost {
        width: 100%;
        float: left;
    }

    .Site .replybuttongroup {
        width: 100%;
        float: left;
        display: block;
    }

    .surveyImgDiv {
        height: 150px;
    }

    .surveyImgDiv:nth-of-type(odd) {
        border-right: 1px solid;
    }

    .discussion-post-reply-repeat .discussionAvatarContainer {
        display: none;
    }
}

@media (min-width: 576px) {

    .SiteLogin .Footer-credit {
        display: inline-block;
        margin: 0 .25em;
    }

    .SiteLogin .Footer-creditSeparator {
        display: inline-block;
        padding: 0 .25em;
    }
}

@media screen and (max-width: 568px) {
    .postDiv {
        margin-left: 30%;
    }

    .leftDiscussionPane {
        margin-left: -37%;
        width: 30%;
    }

    .postingButtons > .btn-group {
        right: 0px;
    }

    .discussionTimeDiv {
        margin-right: 40px;
        float: right;
    }

    .postingButtons {
        margin-bottom: 10px;
        width: 100%;
        text-align: right;
    }

    .moderator-forum-tools {
        top: 5px;
        bottom: 0px;
    }

    .filecontent img, .filecontent i, .filecontent iframe {
        width: auto;
        max-width: 100%;
        height: 125px;
        font-size: 4em;
    }

    #rightWord.alwaysShowSliderLabels {
        bottom: -65px !important;
    }

    .surveyclass .rotate {
        transform: none;
        writing-mode: initial;
        display: initial;
        padding: 5px;
    }

    .overflow-sm-x {
        overflow: auto;
    }

    .grid3DRow {
        display: block;
    }

    table.grid3DRow {
        padding-left: 15px;
        padding-right: 15px;
    }

}

/* survey media queries */
/* only use hover on desktop/laptop as it screws with the multis, makes them appear clicked when they arent sometimes */
@media only screen and (min-width: 1024px) {
    .surveyclass input[type="radio"]:hover,
    .redeem-page input[type="radio"]:hover, .unsubscribePage input[type="radio"]:hover {
        background: #008adc;
        box-shadow: inset 0 0 0 .3em white, 0 0 0 .75em #9e9d9d;
        -webkit-box-shadow: inset 0 0 0 .3em white, 0 0 0 .25em#008adc;
    }
}

@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {

    .surveyclass .flex-video {
        padding-top: 0;
    }

}

@media only screen and (max-width: 991px) {
    menu-toggle-hamburger > ul > li > menu-link-hamburger > a {
        font-size: 12px !important;
    }

}

@media only screen and (max-width: 768px) {

    .tagsLbl {
        width: 100%;
    }

    .surveyclass .label-primary.visible-xs.visible-sm {
        margin: 5px 0px;
    }

    .surveyclass .opentextdk .dkwrapper {
        margin: 10px 0 10px 0;
    }

    .surveyclass .table thead > tr > th, .surveyclass .table tbody > tr > th, .surveyclass .table tfoot > tr > th, .surveyclass .table thead > tr > td, .surveyclass .table tbody > tr > td, .surveyclass .table tfoot > tr > td {
        padding: 8px 0;
    }

    .surveyclass .opentextdk .panel-body {
        padding: 10px;
    }

    .surveyclass .panel-body.smallopen {
        padding: 10px 10px 20px 10px;
    }

    .surveyclass .sliderdiv {
        margin: 20px 0;
        padding: 0 20px;
    }

    .surveyclass .listitem.openlist {
        padding: 6px 3px 6px 17px;
    }

    .surveyclass .title, .surveyclass .rotated-header-title {
        padding-left: 5px !important;
    }

    .surveyclass .list-group-item {
        padding: 19px 17px;
    }

    .surveyclass .projectname {
        right: 10%;
        top: 87px;
        right: 2%;
        margin-left: 140px;
        text-align: right;
    }

    .surveyclass td.rotated-header-title {
        white-space: normal !important; /* Allows for multiple lines on a rotated headers question. */
    }

    .sidebarlist {
        border-top: 1px solid white;
    }

}

@media only screen and (max-width: 420px) {
    #settingsTab {
        display: none;
    }

    #myTab {
    display: none;    }

    .surveyclass body {
        overflow-x: scroll;
    }

    .conductThumbs {
        font-size: 4em;
    }

    .slidergrid {

    }
}

@media screen and (max-width: 380px) {
    li#logo.toolbar.toolbar-left.navbar-header {
        max-width: 160px;
    }

    img.navbar-logo {
        max-width: 160px;
    }

    .Site #logo .navbar-brand {
        padding-left: 5px;
        padding-right: 5px;
    }

    .filecontent video {
        max-width: 95% !important;
    }

    #notification-container .notifications {
        right: 0px;
    }

    #notification-container .notifications:after {
        display: none;
    }

    .dashboard-row-view {
        display: block !important;
    }

    .dashboard-row-view canvas {
        height: 300px !important;
    }

    .dashboard-row-view div {
        width: 100% !important;
    }

    .panel-dashboard {
        overflow: auto;
    }

    .sm-inline-block {
        display: inline-block !important;
    }

    .keydemo-modal-table-container {
        overflow: auto;
    }

    .layout-container {
        overflow: auto;
        width: fit-content;
        padding-left: 20px;
    }


}

@media screen and (max-width: 340px) {
    li#logo.toolbar.toolbar-left.navbar-header {
        max-width: 110px;
    }

    img.navbar-logo {
        max-width: 100px;
    }

    .Site #logo .navbar-brand {
        padding-left: 5px;
        padding-right: 5px;
    }

    #notification-container .notifications {
        right: 0px;
    }

    #notification-container .notifications:after {
        display: none;
    }

    .panel-dashboard {
        overflow: auto;
    }

    .keydemo-modal-table-container {
        overflow: auto;
    }

    .layout-container {
        overflow: auto;
        width: fit-content;
    }
}

.mobileview-username {
    display: none;
}

.btn-no-checkMark {
    display: none !important;
}

.checkMark {
    position: absolute;
    right: 2px;
    top: -5px;
    font-size: 25px;
    cursor: pointer;

}

.checkMark::after {
    content: "\2713";
    animation: showCheckMark .5s linear;
}

.checkMark-table {
    position: absolute;
    right: 10px;
    top: 3px;
    font-size: 25px;
    cursor: pointer;
}

.checkMark-table::after {
    content: " \2714";
    animation: showCheckMark .5s linear;
}

.btn-checkMark-holder {
    position: relative;
    display: inline-block;
    text-align: center;

}

.btn-checkMark-holder .checkMark {
color: #007ac2;border-color: #007ac2;}

@keyframes showCheckMark {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/*Notifucation*/

.bell-button {
    -webkit-transition: 0.25s ease-out 0.1s color;
    -moz-transition: 0.25s ease-out 0.1s color;
    -o-transition: 0.25s ease-out 0.1s color;
    transition: 0.25s ease-out 0.1s color;
    border: none;
    cursor: pointer;
    margin: 0;
    outline: none;
    position: relative;
    background: transparent;
    height: 100%;
    color: #fff;
}

#notification-container {
    display: inline-block;
    height: 100%;
}

#notification-bell {
    border-right: 1px solid #e8e8e8;
}

.show-notifications {
    position: relative;
}

.show-notifications .active-bell {
    color: #ffffff;
}

.show-notifications .active-bell:hover {
    color: #ffffff;
    cursor: pointer;
}

.show-notifications .notifications-count {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    background: #FF0000;
    color: #fefefe;
    font-size: 12px;
    height: 16px;
    line-height: 1.35em;
    position: absolute;
    right: 5px;
    text-align: center;
    top: 10px;
    width: 16px;
}

.show-notifications.active ~ .notifications {
    opacity: 1;
    top: 60px;
}

.notifications {
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-background-clip: padding-box;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-transition: 0.25s ease-out 0.1s opacity;
    -moz-transition: 0.25s ease-out 0.1s opacity;
    -o-transition: 0.25s ease-out 0.1s opacity;
    transition: 0.25s ease-out 0.1s opacity;
    background: #fff;
    right: 60px;
    opacity: 0;
    position: absolute;
    top: -999px;
    font-size: 12px;
    border: 1px solid rgba(100, 100, 100, .4);
    border-radius: 0 0 2px 2px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
}

.notifications:after {
    border: 10px solid transparent;
    border-bottom-color: #f5f6f8;
    content: '';
    display: block;
    height: 0;
    right: 10px;
    position: absolute;
    top: -20px;
    width: 0;
}

.notifications .header .header-right {
    float: right;
}

.notifications h3,
.notifications .show-all,
.notifications .header,
.notifications .notificationSpinningWheel {
    background: #fff;
    color: #1d2129;
    margin: 0;
    padding: 10px;
    width: 350px;
    font-weight: 600;
}

.notifications h3 {
    cursor: default;
    color: #90949c;
    font-size: 12px;
    border-bottom: 1px solid #bdc3c7;
    background-color: #f5f6f7;
}

.notifications .show-all {
    display: block;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
}

.notifications .header {
    text-align: left;
    font-size: 12px;
    border-bottom: 1px solid #bdc3c7;
}

.notifications .show-all:hover,
.notifications .show-all:focus {
    text-decoration: underline;
}

.notifications .notifications-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 400px;
    overflow: auto;
}

.notifications .notifications-list::-webkit-scrollbar {
    width: 3px;
}

/* Hide scrollbar for IE and Edge */
.notifications .notifications-list {
    -ms-overflow-style: none;
}

.notifications .notificationSpinningWheel {
    display: block;
    text-align: center;
    text-decoration: none;
    font-size: 5px;
}

li.item.unread:hover {
    background: #f5f6f7;
}

li.item.read:hover {
    background: #f5f6f7;
}

.notifications .notifications-list .item {
    -webkit-transition: -webkit-transform 0.25s ease-out 0.1s;
    -moz-transition: -moz-transform 0.25s ease-out 0.1s;
    -o-transition: -o-transform 0.25s ease-out 0.1s;
    transition: transform 0.25s ease-out 0.1s;
    border-bottom: 1px solid #bdc3c7;
    color: #7f8c8d;
    display: block;
    padding: 10px;
    position: relative;
    white-space: nowrap;
    width: 350px;
}

.notifications .notifications-list .read {
    background: #fff;
}

.notifications .notifications-list .unread {
    background: #e5eaf2;
}

.notifications .notifications-list .item:before,
.notifications .notifications-list .item .details {
    display: inline-block;
    vertical-align: middle;
}

.notifications .notifications-list .item .details {
    width: 100%;
}

.notifications.empty .notifications-list .no-data {
    display: block;
    padding: 10px;
}

.notification-img {
    display: block;
    margin-right: 10px;
    margin-left: auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    height: 40px;
    width: 40px;
    float: left;

}

.notification-date {
    float: right;
    font-size: 12px;
}

.notification-item {
    color: #1d2129;
    display: block
}

.notification-msg {
    white-space: normal;
}

#icon-bell {
    font-size: 25px;
    color: #000000;
}

.show-focus-outlines [tabindex]:focus {
    outline: solid 5px #1F3B72 !important;
    position: relative;
    z-index: 10000000000000000000;
}

.show-focus-outlines button:focus {
    outline: solid 5px #1F3B72 !important;
}

.show-focus-outlines a:focus {
    outline: solid 5px #1F3B72 !important;
}

.show-focus-outlines .slick-prev:focus {
    outline: solid 5px #1F3B72 !important;
}

.show-focus-outlines .slick-next:focus {
    outline: solid 5px #1F3B72 !important;
}

body:not(.show-focus-outlines) button:focus,
body:not(.show-focus-outlines) [tabindex]:focus {
    outline: none;
}

.btn-action {
    color: #000;
    background-color: #e5eaf2;
    border-color: #e5eaf2;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
}

.skip-to-main button {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-to-main button:focus {
    position: static;
    width: auto;
    height: auto;
}

.itemsPerPageHolder {
    width: auto;
    display: inline-block;
    float: left;
    margin-right: 5px;
}

.more-menu {
    background: #fff;
    transform-origin: left bottom 0;
    left: -125px;
    bottom: -50px;

}

.more-menu > li {
    padding: 5px;
    text-align: center;
}

.first-reply {
    border-width: 3px;
    border-color: #747272;
}

.textbox-label {
    background: transparent;
    border: none;
    outline: none;
    padding: 0px;
    width: 80px;
    border-bottom: 1px solid;
}

.report-textbox-label {
    background: transparent;
    border: none;
    outline: none;
    padding: 0px;
    border-bottom: 1px solid;
}

.color-warning {
    color: #f0ad4e !important;
}

.color-success {
    color: #5cb85c !important;
}

.color-danger {
    color: #d9534f !important;
}

.btn-hidden {
    background: none;
    border: none;
}

.mroc-table-row {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid #c6c6c6;
}

.mroc-table-row::after {
    content: "";
    display: table;
    clear: both;
}


.context-menu {
    position: absolute;
    text-align: left;
    background: white;
    border: 1px solid #ddd;
    z-index: 10;

}

.context-menu.open {
    display: block;
    height: auto;
}

.context-menu ul {
    padding: 0px;
    margin: 0px;
    min-width: 150px;
    list-style: none;
}

.context-menu ul li {
    padding-bottom: 7px;
    padding-top: 7px;
    padding-left: 5px;
}

.context-menu ul li a {
    text-decoration: none;
    color: #000;
}

.border-top {
    border-top: 1px solid #ddd;
}

.context-menu ul li:hover {
    background: #c6c6c6;
}

.btn-group-sm > .btn, .btn-sm {
    border: 0px;
}

.btn-sm-question {
    border: 0px;
    width: 140px;
    text-align: left;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

.well {
    background: none;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.equal-col {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.searchTextbox {
    border-radius: 20px;
}

.inner-addon {
    position: relative;
}

/* style glyph */
.inner-addon .glyphicon {
    position: absolute;
    padding: 10px;
    pointer-events: none;
    z-index: 10;
    color: gray;
    padding-left: 30px;
    padding-right: 30px;
}

/* align glyph */
.left-addon .glyphicon {
    left: 0px;
}

.right-addon .glyphicon {
    right: 0px;
}

/* add padding */
.left-addon input {
    padding-left: 30px;
}

.right-addon input {
    padding-right: 30px;
}

.card-header:hover {
    background-color: #ddd;
}

.deleteHoverBtn {
    display: none;
    float: right;
}

.card-header:hover .deleteHoverBtn {
    display: block;
}

.pagination > li > a.pagination-arrow {
    border: none;
    margin: 1px;
    color: white;
}

.nav-tabs > li > a {
    color: var(--color-secondary);
}

.nav-tabs > li.active {
    border-top: solid 1px #c6c6c6;
    border-left: solid 1px #c6c6c6;
    border-right: solid 1px #c6c6c6;
    border-bottom: solid 1px #fff;
    border-radius: 5px 5px 0px 0px;
}

.nav-tabs.lineTab > li.active {
    border-top: solid 1px #fff;
    border-left: solid 1px #fff;
    border-right: solid 1px #fff;
    border-bottom: solid 2px var(--color-primary);
    border-radius: 5px 5px 0px 0px;
}

.nav-tabs.lineTab > li.active > a {
    font-weight: bold;
}

.campaign .rzslider .rz-bar {
    z-index: 0;
    width: 100%;
    height: 3px;
    background: #9d9d9d;
}

.campaign .rzslider .rz-bar.rz-selection {
    z-index: 1;
    width: 100%;
    height: 3px;
    background: #1ab7ea;
}

.campaign .rzslider .rz-pointer {
    top: -4px;
    z-index: 2;
    width: 10px;
    height: 10px;
    cursor: pointer;
    background-color: #fff;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    border: solid 1px #ddd;
}

.campaign .rzslider .rz-pointer:after {
    background: none;
}

.campaign .rzslider .rz-bubble {
    top: -32px;
    padding: 1px 3px 1px 3px;
    color: black !important;
    background: none !important;
    cursor: default;
}

.campaign .rzslider .rz-bubble.selection {
    top: 15px;
}

.square {
    width: 50%;
}

.square:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.content {
    position: absolute;
    width: 100%;
    height: 100%;
}

.reminder > li {
    list-style-type: none;
    padding: 5px;
}

.reminder > li:hover {
    background-color: #43ceff;
    padding: 5px;
}

.blur div,
.blur time,
.blur span,
.blur div.replied-name a {
    color: transparent;
    text-shadow: 0 0 10px #000;
    font-family: Roboto;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}

.blur img,
.blur iframe,
.blur .downloadFileA,
.blur video {
    filter: blur(8px);
    -webkit-filter: blur(8px);
    pointer-events: none;
}

.nested-thread-time {
    color: slategray
}

.nested-thread-edit {
    color: #8c8c8c;
}

.nested-thread-displayName {
    color: #0d6aad;
    float: left;
    margin-right: 5px;
}

.divide.divide-y {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.py-10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.px-0 {
    padding-left: 0px;
    padding-right: 0px;
}

.by-1-gray {
    border-top: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
}

.bx-1-gray {
    border-left: solid 1px #ccc;
    border-right: solid 1px #ccc;
}

.selectedSection {
    color: white;
    background-color: #2AA9E0;
}

.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

.dropleft.dropdown-submenu > a:after {
    left: 2px;
    top: 10px;
    position: absolute;
    float: left;
    transform: rotate(180deg);
    margin-top: 5px;
}

.dropdown-submenu > a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #cccccc;
    margin-top: 5px;
    margin-right: -10px;
    margin-right: 5px;
}

.dropdown-submenu:hover > a:after {
    border-left-color: #ffffff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left > .dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

.right {
    float: right;
}

.question-border-card {
    border: solid 1px #ccc;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin: 10px;
    padding: 30px 10px 30px 10px;

}

.center-item {
    display: flex;
    align-items: center;
}

.report-card-table {
    width: 100%;
    text-align: left;
    border-spacing: 5px 0px;
    border-collapse: separate;
    margin-bottom: 0px;
}

.report-card-table th {
    background: #2AA9E0;
    color: white;
    padding: 5px;
    text-align: left;
}

.report-card-table td {
    background: #f9f9f9;
    text-align: left;
    padding: 5px;
}

.my-5 {
    margin-top: 5px;
    margin-bottom: 5px;
}

.color-box {
    height: 20px;
    width: 20px;
    margin: 1px;
}

input[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.number-input {
    border: 0;
    display: inline-flex;
}

.number-input,
.number-input * {
    box-sizing: border-box;
}

.number-input button {
    outline: none;
    -webkit-appearance: none;
    background-color: #c6c6c6;
    border: none;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
    margin: 0;
    position: relative;
    box-shadow: 0px 0px 1px #474747;
    border-radius: 50%;
}

.number-input button:before,
.number-input button:after {
    display: inline-block;
    position: absolute;
    content: '';
    width: 0.5rem;
    height: 1px;
    background-color: white;
    transform: translate(-50%, -50%);
}

.number-input button.plus:after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.number-input input[type=number] {
    font-family: Roboto;
    max-width: 2rem;
    padding: .5rem;
    border: none;
    border-width: 0 2px;
    font-size: 1.5rem;
    height: 1.5rem;
    text-align: center;
}

.flex {
    display: flex;
    align-items: center;
}

.report-table-container {
    height: 200px;
    overflow-y: scroll;

}

.sticky {
    position: sticky;
    top: 0px;
}

.p8 {
    padding: 8px;
}

/* _button-group.scss:85 */
.dropleft::before {
    margin-right: 0;
}

/* _dropdown.scss:5 */
.dropleft {
    position: relative;
}

/* _dropdown.scss:73 */
.dropleft .dropdown-menu {

    right: 0px;
    left: -100%;
    margin-top: 0;

}

.box {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.box > h3 {
    color: #333;
    border-color: #ddd;
    border-bottom: 1px solid transparent;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    background-repeat: repeat-x;
    display: block;
    font-size: 16px;
    padding: 10px 15px;
    margin-top: 0;
    margin-bottom: 0;
}

.box-padding {
    padding: 15px;
}

.box-padding > h3 {
    margin: -15px;
    margin-bottom: 15px;
}

.box-grey {
    border-color: #ddd;
}


.box-blue > h3 {
    color: #fff;
    background-color: #2AA9E0;
    border-color: #2AA9E0;
    text-align: center;
}

.box-gray {
    border-color: #e0e0e0;
}


.crosstab-total {
    background-color: #eae7e7;
    height: 50px;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}

.crosstab-container {
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
}

/***************************** Dropzone Styling *****************************/

/**
* The dnd-list should always have a min-height,
* otherwise you can't drop to it once it's empty
*/
.advancedDemo .dropzone ul[dnd-list] {
    min-height: 42px;
    margin: 0px;
    padding-left: 0px;
}

.advancedDemo .dropzone li {
    display: block;
    min-width: 40px;
    min-height: 42px;
}

/**
* Reduce opacity of elements during the drag operation. This allows the user
* to see where he is dropping his element, even if the element is huge. The
* .dndDragging class is automatically set during the drag operation.
*/
.advancedDemo .dropzone .dndDragging {
    opacity: 0.7;
}

/**
* The dndDraggingSource class will be applied to the source element of a drag
* operation.
*/
.advancedDemo .dropzone .dndDraggingSource {
    opacity: 0.5;
}

/**
* An element with .dndPlaceholder class will be added as child of the dnd-list
* while the user is dragging over it.
*/
.advancedDemo .dropzone .dndPlaceholder {
    background-color: #ddd !important;
    display: block;
    min-height: 100px;
    min-width: 75px;
}

/***************************** Element type specific styles *****************************/

.advancedDemo .dropzone .itemlist {
    position: relative;
}

.advancedDemo .dropzone .itemlist > li {


    color: #3d3d3d;
    float: left;
    font-weight: 700;
    height: 50px;
    padding: 5px;
    text-align: center;
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.advancedDemo .dropzone .container-element {
    margin: 10px;
    min-width: 92px;
}

.advancedDemo .toolbox ul {
    cursor: move;
    list-style: none;
    padding-left: 0px;
}

.advancedDemo .toolbox button {
    margin: 5px;
    opacity: 1.0;
    min-width: 123px;
    background-color: #2aa9e0;
    color: #fff;
}

.advancedDemo .toolbox .dndDragging {
    opacity: 0.5;
}

.advancedDemo .toolbox .dndDraggingSource {
    opacity: 1.0;
}

.advancedDemo ul[dnd-list] li.selected {
    background-color: #dff0d8;
    color: #3c763d;
}

.item-closeBtn {

    position: absolute;
    padding-right: 8px;
    height: 100%;
    right: 0;
    color: #999;
    padding-top: 1px;
    top: 1px;
}

.flex-right {
    display: flex;
    justify-content: flex-end;

}

.devider {
    border-left: solid 1px #cecece;
}

.devider:first-child {
    border-right: none;
}

.devider-right {
    border-right: solid 1px #cecece;
}

.devider-left {
    border-left: solid 1px #cecece;
}

.reportQueryDisplay .form-inline .btn-success {
    display: none;
}

.reportQueryDisplay .row div {
    padding: 0px;
}

.reportQueryDisplay .row button, .reportQueryDisplay .row input {
    margin: 0px !important;
    padding: 7px;
}

.reportQueryDisplay .row {
    display: flex;
    align-items: center;
}

.reportQueryDisplay .group-conditions {
    padding: 10px;
}

.dashboard-col {
    border-top: solid 1px #cecece;
    border-bottom: solid 1px #cecece;
    position: relative;
}

.dashboard-row {

    min-height: 400px;
    display: flex;
    margin: 10px;
}

.dashboard-row-view {

    min-height: 400px;
    display: flex;
    margin: 10px;
    flex-wrap: wrap;
}

.dashboard-row .btn-container {
    display: flex;
    padding: 10px;

}

.vertical-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.col-btn-container {
    display: flex;
    justify-content: flex-end;
    margin: 5px;
    flex-wrap: wrap;
}

.col-btn-container button {
    margin: 1px;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.flex-start {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
}

.flex-end {
    display: flex;
    align-items: center;
    justify-content: end;
    flex-wrap: wrap;
}

.dashboard-col .addWidget {
    position: absolute;
    top: 60%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.addWidget i.fa-plus {
    color: #2aa9e0;
    font-size: 50px;
}

.addWidget div {
    color: #cecece;
    font-size: 25px;
}

.layout table {
    min-width: 100%;
    width: auto;
    -webkit-box-flex: 1;
    flex: 1;
    display: grid;
    border-collapse: collapse;
    border: solid 10px #2aa9e0;
}

.layout thead,
.layout tbody,
.layout tr {
    display: contents;
}

.layout th,
.layout td {
    padding: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.layout th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background: #d3e7ff;
    text-align: left;
    font-weight: normal;
    font-size: 1.1rem;
    color: white;
    position: relative;
}

.layout th:last-child {
    border: 0;
}

.resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background: #2aa9e0;
    width: 10px;
    cursor: col-resize;
    padding: 2px;
    color: white;
    display: flex;
    align-items: center;
}

td {
    padding-top: 10px;
    padding-bottom: 10px;
    color: #808080;
}

.toplineTable tr:nth-child(even) td {
    background: #f8f6ff;
}

.percentage-icon {
    height: 15px;
    width: 15px;
    position: absolute;
    right: 10px;
    top: 10px;
}

.visualization {
    border: 1px solid #ccc;
    border-radius: 4px;
    width: fit-content;
}

.visualization ul {
    display: flex;
    margin: 0px;
    padding: 0px;
    justify-content: space-between;
}

.visualization ul li {
    padding: 5px;
    list-style-type: none;
}

.visualization ul li:hover {
    background: #5bc2e0;
}

.visualization ul li.selected {
    background: #2aa9e0;
}

.p0 {
    padding: 0px !important;
}

.pl30 {
    padding-left: 30px !important;
}

.replyied-container {
    border-left: 0.5px solid#007ac2;
    padding: 10px;
}

.replyied-container .replied-name a {
    color: red;
    cursor: pointer;
}

.replyied-container .replied-content {
    background-color: #e5e5e5;
}

.dashboard-number {
    margin: 10px;
    text-align: center;
}

.dashboard-number .number {
    font-weight: 700;
    color: #1295bf;
    font-size: 40px;
}

.dashboard-tab {
    border: solid 1px;

}

.dashboard-tab.active {
    background-color: #00ccff;
}

.dashboard-tab-container {
    display: flex;
}

.keydemo-modal-table {
    border-spacing: 0 10px;
    border-collapse: separate;
}

.keydemo-modal-table tr td {
    background: white;
}

.keydemo-modal-table td {
    border: solid 1px #ccc;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 0px;
    padding-top: 0px;
    background: white;
    color: black;
}

.keydemo-modal-table td:last-child,
{
    border-left: none;
}

.keydemo-modal-table td:first-child {
    border-right: none;
}

.keydemo-modal-table select {
    border: none;
}

.common-widget {

}

.common-widget button {

}

.embed-container {
    --video--width: 1296;
    --video--height: 540;

    position: relative;
    padding-bottom: calc(var(--video--height) / var(--video--width) * 100%); /* 41.66666667% */
    overflow: hidden;
    max-width: 100%;
    background: black;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-container {
    margin: 10px;
}

#accordion > .item > .header {
    background: #5bc0de;
}

#accordion > .item > .header:hover {
    background: #54aac7;
}

#accordion > .item > .header button {
    color: white;
    text-decoration: none;
    font-weight: 600;
    padding: 5px
}

#accordion .item > .header button {
    text-decoration: none;
    font-weight: 600;
    padding: 5px;
    width: 100%;
    text-align: left;
}

#accordion .item > .sub-header:hover {
    background: #e1e1e1;
}

#accordion .item .body {
    margin-left: 15px;
}

#accordion .item .body .link {
    margin: 5px;
    padding: 5px;
}

#accordion .item .body .link:hover {
    background: #e1e1e1;
}

.pointer {
    cursor: pointer;
}

.showif-label {
    float: right;
    background: #ccc;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 2px;
}

.sampleQueryContainer {
    border: 1px solid #7b7575;
    background: #cccccc5e;
    color: #000000;
    border-radius: 3px;
    display: flex;
    padding: 10px;
}

.col-custom-width {
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.blue-background {
    background: #2aa9e0;
}

.quota-table-details .quota-table-details-full {
    background-color: #b2e0ff;
    color: #57b6ff;
    text-align: center;
}

.quota-table-details .quota-table-details-empty {
    background-color: white;
    color: #ff5757;
    text-align: center;
}

.quota-table-details .quota-table-details-half {
    background-color: #fff5ed;
    color: #ffa557;
    text-align: center;
    background-image: linear-gradient(to right, #ffe4b3, #ffe4b3);
    background-size: 1% 100%;
    background-repeat: no-repeat;
}

.template-survey-container {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 180px;
    border: solid 1px#007ac2;


}

.template-survey-details {
    position: absolute;
    bottom: 10px;
    text-align: center;
    width: 100%;

}

.template-survey-date {
    font-size: 10px;
}

.template-survey-subject {
    font-weight: 600;
}

.template-survey-selected {
    border: 5px solid #2aa8e1;
}

.green-ok {
    color: #59b75c;
}

.btn-revers-vimeo {

    justify-content: center;
    align-items: center;
    padding: 6px 12px;

    /* White BG */

    background: #FFFFFF;
    /* Border */

    border: 1px solid #DEDEDF;
    box-sizing: border-box;
    border-radius: 4px;

    color: #2AA9E0;
}

table.thread div.title {
    /* Subtitle 1/Subtitle 1 */

    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 20px;
    letter-spacing: 0.15px;
    /* Secondary/hover */
    color: #515151;
    /* Inside auto layout */

    flex: none;
    order: 0;
    flex-grow: 0;
    margin-bottom: 5px;
}

table.thread div.category {
    /* Overline */

    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    font-size: 10px;
    line-height: 12px;
    /* identical to box height */

    letter-spacing: 1.25px;
    text-transform: uppercase;

    /* Secondary/hover */

    color: #515151;


    /* Inside auto layout */

    flex: none;
    order: 1;
    flex-grow: 0;
    margin-bottom: 5px;
}

table.thread div.date {
    /* Caption/Caption */

    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 16px;
    /* identical to box height */

    letter-spacing: 0.4px;

    /* Secondary/hover */

    color: #515151;

    margin-bottom: 5px;

    /* Inside auto layout */

    flex: none;
    order: 1;
    flex-grow: 0;
}

table.thread div.status.success {
    /* Caption/Caption */

    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 16px;
    /* identical to box height */

    display: flex;
    align-items: center;
    letter-spacing: 0.4px;

    /* Success/default */

    color: #5CB85C;


    /* Inside auto layout */

    flex: none;
    order: 0;
    flex-grow: 0;
}

.discussion-report-post {
    border-top: solid 1px #ccc;
    border-left: solid 1px #ccc;
    padding: 5px;
    display: flex;
}

.discussion-report-post:last-child {
    border-bottom: solid 1px #ccc;
}

.report-member-card {
    border: solid 1px #ccc;
    margin: 5px;
    padding: 5px;
}

select > .placeholder {
    display: none;
}

.thread .status .success {
    color: #3f903f !important;
}

.thread .status .warning {
    color: #f0ad4e !important;
}

.thread .status .danger {
    color: #d9534f !important;
}

.broadcast.report .box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 24px;
    gap: 16px;
    height: 96px;
    background: #F9F9F9;
    border-radius: 8px;
}

.broadcast.report .box-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;
    justify-content: center;

}

.broadcast.report .box .title {
    color: #313131;
    font-weight: 400;
    font-size: 15px;
}

.broadcast.report .box .amount {
    color: #313131;
    font-weight: 600;
    font-size: 15px;
}

@keyframes chartjs-render-animation {
    from {
        opacity: .99
    }
    to {
        opacity: 1
    }
}

.chartjs-render-monitor {
    animation: chartjs-render-animation 1ms
}

.chartjs-size-monitor, .chartjs-size-monitor-expand, .chartjs-size-monitor-shrink {
    position: absolute;
    direction: ltr;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    z-index: -1
}

.chartjs-size-monitor-expand > div {
    position: absolute;
    width: 1000000px;
    height: 1000000px;
    left: 0;
    top: 0
}

.chartjs-size-monitor-shrink > div {
    position: absolute;
    width: 200%;
    height: 200%;
    left: 0;
    top: 0
}

.cart-flag-container {
    line-height: 1.8em;
    width: 1.8em;
}

.cart-container {
    border: 1px solid #DEDEDF;
    border-radius: 4px;
    padding: 10px;
}

.cart-border-bottom {
    border-bottom: 1px solid #DEDEDF;
}

.purchase.table .selectedPurchase {
    background-color: #eae8e8;
}

.sms-container {
    position: absolute;
    word-break: break-all;
    width: 200px;
    height: 80px;
    font-size: 12px;
    left: 55px;
}

.sms-image {
    position: absolute;
    left: 40px;
}

.btn-default {
    padding: 10px 20px;
}

.btn-default-small {
    padding: 6px 12px;
    border-color: #ccc;
}

.btn-wide {
    padding: 10px 50px;
}

.success-outlined {
    color: #5CB85C;
    background-color: white;
    border: 1px solid #5CB85C;
}

.success-outlined:hover {
    color: #48A248;
    background-color: #F9F9F9;
    border: 1px solid #48A248;
}

.primary-outlined {
    color: #2aa9e0;
    background-color: white;
    border: 1px solid #2aa9e0;
}

.primary-outlined:hover {
    color: #2797c8;
    background-color: #F9F9F9;
    border: 1px solid #2797c8;
}

.secondary-outlined {
    color: #707070;
    background-color: white;
    border: 1px solid #707070;
}

.secondary-outlined:hover {
    color: #313131;
    background-color: #F9F9F9;
    border: 1px solid #313131;
}

.warning-outlined {
    color: #F2A252;
    background-color: white;
    border: 1px solid #F2A252;
}

.warning-outlined:hover {
    color: #CC8A47;
    background-color: #F9F9F9;
    border: 1px solid #CC8A47;
}

.secondary {
    background-color: #707070;
    color: white;
}

.secondary:hover {
    background-color: #313131;
    color: white;
}

.primary {
    background-color: #2aa9e0;
    color: white;
}

.primary:hover {
    background-color: #2797c8;
    color: white;
}

.warning-color {
    color: #F2A252;
}

.success-color {
    color: #48A248;
}

.secondary-color {
    color: #707070;
}

.primary-color {
    color: #2aa9e0;
}

.primary-half {
    color: #5bc0de;
}

.error {
    background-color: var(--color-error);
    color: white;
}

.newRed {
    background-color: #F8E9EC;
    color: var(--color-error) !important;
}

.error:hover {
    background-color: var(--color-error-hover);
    color: white;
}

.error-text {
    color: var(--color-error);
    background-color: white;
}

.error-text:hover {
    color: var(--color-error-hover);
    background-color: var(--color-background-outline-hover);
}

.error-outlined {
    color: var(--color-error);
    background-color: white;
    border: 1px solid var(--color-error);
}

.error-outlined:hover {
    color: var(--color-error-hover);
    background-color: var(--color-background-outline-hover);
    border: 1px solid var(--color-error-hover);
}

.survey-label {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    color: #515151;
}

.f12 {
    font-size: 12px;
}

.folderClicked > div > .page-container:first-child {
    border-width: 4px;
}

.editable {
    width: auto;
    height: 200px;
    border: 1px solid #ccc;
    padding: 5px;
    resize: both;
    overflow: auto;
}

.invalidUsers {
    color: #BD243D;
}

.existingUsers {
    color: #F2A252;
}

.word-wrap {
    word-break: break-all;
    white-space: break-spaces;
}

.insurvey-container {
    width: 100%;
    display: inline-block;
}

.distribution-container {
    max-width: 1437px;
    padding-top: 18px;
    display: inline-block;
}

@media (max-width: 768px) {
    .distribution-container {
        padding-left: 0px;
    }
}

.distribution-container > .item {
    padding-right: 0px;
}

.distribution-container > .item > .card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 24px 0 24px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    cursor: pointer;
    background-color: #fff;
    min-height: 220px;
}

.distribution-container > .item > .card > span {
    font-size: 30px;
    display: block;
    margin-bottom: 0px;
}

.distribution-container > .item > .card > b {
    margin-top: 18px;
    display: block;
}

.distribution-container > .item > .card > p {
    margin-top: 16px;
    display: block;
}

.distribution-container .input-group {
    margin-top: 16px;
    margin-bottom: 0px;
}

.distribution-container .icon-group {
    margin-top: 16px;
    padding: 0px;
    gap: 8px;
    list-style: none;
}

.distribution-container .icon-group li {
    height: 32px;
    width: 32px;
    text-align: center;
    float: left;
}

.cancel-survey {
    border-bottom: #DEDEDF 1px solid;
    padding-left: 32px;
    color: #2AA9E0;
}

.cancel-survey button {
    background-color: #fff;
    border: 1px solid #DEDEDF;
    border-radius: 4px;
    padding: 10px 20px 10px 20px;
}

.embed {
    padding: 0px;
}

.embed h3 {
    text-align: center;
    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    font-size: 25px;
    line-height: 30px;
}

.embed .type-selection {
    max-width: 224px;
    display: inline-block;
}

.embed .type-selection .option {
    margin-top: 24px;
    text-align: center;
}

.embed .type-selection .option h5 {
    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 16px;
}

.embed .code {
    display: inline-block;
    height: 200px;
    margin-top: calc(50% - 100px);
    text-align: center;
}

.not-translated-background {
    background: rgba(242, 162, 82, 0.2);
    color: var(--color-secondary);
}

.surveyTranslationTable .cell {
    border-right: 1px solid #cccccc;
    vertical-align: top;
    text-align: left;
}

.surveyTranslationTable .cell:last-child {
    border-right: none;
}

.surveyTranslationTable .row {
    border-bottom: 1px solid #cccccc;
}

.surveyTranslationTable .row:last-child {
    border-bottom: none;
}

.clipboard.icon {
    position: absolute;
    top: 2.3em;
    right: 2.5em;
    margin-top: 4px;
    margin-left: 4px;
    width: 11px;
    height: 13px;
    border-top: none;
    border-radius: 1px;
    cursor: pointer;
}

.text-wrap {
    position: relative;
    padding: 20px;
}

.input-container {
    position: relative;
    display: inline-block;
}

.input-container i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 5px;
    font-size: 16px;
}

.input-container input {
    padding-right: 25px; /* leave space for the icon */
}

.survey-pipe {
    max-height: 500px;
    overflow-y: scroll;
}

.survey-pipe-url {
    overflow: hidden;
    max-width: 400px;
}

.offcanvas-menu {
    position: fixed;
    top: 100;
    right: -300px;
    width: 300px;
    height: 100%;
    background-color: #f5f5f5;
    transition: left 0.3s ease-in-out;
}

.offcanvas-menu.show {
    right: 0;
}

.debugContainer {
    background-color: #f0f0f0;
    border-radius: 10px;
    padding: 0px 10px;
}

.backgroundVar {
    background-color: #ffc105;
}

.debugQuestion {
    display: flex;
    flex-direction: row;
    padding: 0px;
}

.debugQuestionID {
    margin: 0px;
}

.debugShowQuestion {
    border: 1px solid red;
    background-color: #fef6ee;
}

.userSurveyWithLanguageDropDown {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.openend-asterisk {
    font-size: 20px;
    font-weight: 600;
    padding: 5px;
}

.password-input {
    position: relative;
}

#passwordlogin {
    padding-right: 30px; /* Provide space for the icon */
}

#togglePassword {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
}


.date-input-container {
    display: flex;
    align-items: center;
}
.date-input {
    margin-right: 40px; /* Adjust the spacing between input fields as needed */
}
.crosstab-table{
    border-color: #d1d1d1;
    width: 100%;
    text-align: center;
}

.crosstab-table > thead,
.crosstab-table > tbody > tr > th{
    background-color: #f9f9f9;
}
.crosstab-table > thead > tr > th{
    border-color: #d1d1d1;
    padding: 10px;
    text-align: center;
}
.crosstab-table > tbody > tr > th{
    border-color: #d1d1d1;
    padding: 10px;
    text-align: center;
}
.defaultQuestionText {
    font-size: 14pt;
}