.menu-header {
    background-color: #e6e6e6;
    padding-bottom: 5px;
}

.menu-header-label {
    font-size: 18px;
    font-weight: bold;
    vertical-align: top;
    white-space: normal;
    width: 530px;
}

.menu-header-period {
    width: 100%;
}

.menu-header-period-label {
}

.menu-header-period-label-full {
    width: 100%;
    padding: 3px;
}

.r-header {
    display: block;
    background: #363940;
    color: #fff;
    padding: 10px;
    text-align: center;
}

    .r-header .logo {
        float: left;
        width: 270px;
    }

    .r-header .summary {
        display: inline-block;
        padding-top: 10px;
    }

    .r-header .r-header-toolbar {
        float: right;
        width: 200px;
    }

        .r-header .r-header-toolbar a {
            /*background: #10c4b2;
                    border: 1px solid #10c4b2;*/
            color: #fff;
            padding: 10px 1px 12px;
            margin-right: 10px;
        }

            .r-header .r-header-toolbar a:hover {
                color: #fff;
            }

            .r-header .r-header-toolbar a .k-icon {
                cursor: pointer;
                font-size: 30px;
            }

            .r-header .r-header-toolbar a:hover .k-icon {
                color: #10c4b2;
            }

.r-menu-header-period {
    display: inline-block !important;
    width: 49%;
    padding: 2px;
}

.r-menu-header-legend {
    display: inline-block !important;
    width: 45%;
    text-align: right;
    padding: 2px;
}

    .r-menu-header-legend .legend {
        display: inline-block;
        font-size: 14px;
    }

        .r-menu-header-legend .legend span {
            color: #f00;
            display: inline;
        }

/*
 * Main content
 */

.main {
    padding: 20px;
}

@media (min-width: 768px) {
    .main {
        /*padding-right: 40px;
    padding-left: 40px;*/
    }
}

.main .page-header {
    padding-top: 20px;
    padding-bottom: 20px;
}


/*
 * Sidebar
 */

/* Hide for mobile, show later */
.sidebar {
    display: none;
}

@media (min-width: 768px) {
    .sidebar {
        position: fixed;
        top: 51px;
        bottom: 0;
        left: 0;
        z-index: 1000;
        display: block;
        padding: 20px;
        overflow-x: hidden;
        overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
        background-color: #f5f5f5;
        border-right: 1px solid #eee;
    }
}

/* Sidebar navigation */
.nav-sidebar {
    margin-right: -21px; /* 20px padding + 1px border */
    margin-bottom: 20px;
    margin-left: -20px;
}

    .nav-sidebar > li > a {
        padding-right: 20px;
        padding-left: 20px;
    }

    .nav-sidebar > .active > a,
    .nav-sidebar > .active > a:hover,
    .nav-sidebar > .active > a:focus {
        color: #fff;
        background-color: #428bca;
    }

.r-footer {
    display: block;
    width: 99.9%;
    position: relative;
    bottom: 0;
    padding-top: 10px;
    margin-top: 10px;
    border: 1px solid #333;
    background: #363940;
    color: #fff;
}

    .r-footer .info {
        display: inline-block;
        width: 100%;
    }

        .r-footer .info span {
            display: block;
            width: 100%;
        }

#radioBtn .notActive {
    color: #3276b1;
    background-color: #fff;
}

/* Helper Classes */
.no-padding {
    padding: 0px;
}

.no-margin {
    margin: 0px;
}

/* Spacing Helper Classes */
.m-0 {
    margin: 0 !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mr-0 {
    margin-right: 0 !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.ml-0, .mx-0 {
    margin-left: 0 !important;
}

.mx-0 {
    margin-right: 0 !important;
}

.my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.m-1 {
    margin: .25rem !important;
}

.mt-1 {
    margin-top: .25rem !important;
}

.mr-1 {
    margin-right: .25rem !important;
}

.mb-1 {
    margin-bottom: .25rem !important;
}

.ml-1, .mx-1 {
    margin-left: .25rem !important;
}

.mx-1 {
    margin-right: .25rem !important;
}

.my-1 {
    margin-top: .25rem !important;
    margin-bottom: .25rem !important;
}

.m-2 {
    margin: .5rem !important;
}

.mt-2 {
    margin-top: .5rem !important;
}

.mr-2 {
    margin-right: .5rem !important;
}

.mb-2 {
    margin-bottom: .5rem !important;
}

.ml-2, .mx-2 {
    margin-left: .5rem !important;
}

.mx-2 {
    margin-right: .5rem !important;
}

.my-2 {
    margin-top: .5rem !important;
    margin-bottom: .5rem !important;
}

.m-3 {
    margin: 1rem !important;
}

.mt-3 {
    margin-top: 1rem !important;
}

.mr-3 {
    margin-right: 1rem !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.ml-3, .mx-3 {
    margin-left: 1rem !important;
}

.mx-3 {
    margin-right: 1rem !important;
}

.my-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.m-4 {
    margin: 1.5rem !important;
}

.mt-4 {
    margin-top: 1.5rem !important;
}

.mr-4 {
    margin-right: 1.5rem !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

.ml-4, .mx-4 {
    margin-left: 1.5rem !important;
}

.mx-4 {
    margin-right: 1.5rem !important;
}

.my-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.m-5 {
    margin: 2rem !important;
}

.mt-5 {
    margin-top: 2rem !important;
}

.mr-5 {
    margin-right: 2rem !important;
}

.mb-5 {
    margin-bottom: 2rem !important;
}

.ml-5, .mx-5 {
    margin-left: 2rem !important;
}

.mx-5 {
    margin-right: 2rem !important;
}

.my-5 {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
}

.m-6 {
    margin: 3rem !important;
}

.mt-6 {
    margin-top: 3rem !important;
}

.mr-6 {
    margin-right: 3rem !important;
}

.mb-6 {
    margin-bottom: 3rem !important;
}

.ml-6, .mx-6 {
    margin-left: 3rem !important;
}

.mx-6 {
    margin-right: 3rem !important;
}

.my-6 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
}

.m-7 {
    margin: 4rem !important;
}

.mt-7 {
    margin-top: 4rem !important;
}

.mr-7 {
    margin-right: 4rem !important;
}

.mb-7 {
    margin-bottom: 4rem !important;
}

.ml-7, .mx-7 {
    margin-left: 4rem !important;
}

.mx-7 {
    margin-right: 4rem !important;
}

.my-7 {
    margin-top: 4rem !important;
    margin-bottom: 4rem !important;
}

.m-8 {
    margin: 5rem !important;
}

.mt-8 {
    margin-top: 5rem !important;
}

.mr-8 {
    margin-right: 5rem !important;
}

.mb-8 {
    margin-bottom: 5rem !important;
}

.ml-8, .mx-8 {
    margin-left: 5rem !important;
}

.mx-8 {
    margin-right: 5rem !important;
}

.my-8 {
    margin-top: 5rem !important;
    margin-bottom: 5rem !important;
}

.m-9 {
    margin: 6rem !important;
}

.mt-9 {
    margin-top: 6rem !important;
}

.mr-9 {
    margin-right: 6rem !important;
}

.mb-9 {
    margin-bottom: 6rem !important;
}

.ml-9, .mx-9 {
    margin-left: 6rem !important;
}

.mx-9 {
    margin-right: 6rem !important;
}

.my-9 {
    margin-top: 6rem !important;
    margin-bottom: 6rem !important;
}

.m-10 {
    margin: 7rem !important;
}

.mt-10 {
    margin-top: 7rem !important;
}

.mr-10 {
    margin-right: 7rem !important;
}

.mb-10 {
    margin-bottom: 7rem !important;
}

.ml-10, .mx-10 {
    margin-left: 7rem !important;
}

.mx-10 {
    margin-right: 7rem !important;
}

.my-10 {
    margin-top: 7rem !important;
    margin-bottom: 7rem !important;
}

.m-11 {
    margin: 8rem !important;
}

.mt-11 {
    margin-top: 8rem !important;
}

.mr-11 {
    margin-right: 8rem !important;
}

.mb-11 {
    margin-bottom: 8rem !important;
}

.ml-11, .mx-11 {
    margin-left: 8rem !important;
}

.mx-11 {
    margin-right: 8rem !important;
}

.my-11 {
    margin-top: 8rem !important;
    margin-bottom: 8rem !important;
}

.m-12 {
    margin: 9rem !important;
}

.mt-12 {
    margin-top: 9rem !important;
}

.mr-12 {
    margin-right: 9rem !important;
}

.mb-12 {
    margin-bottom: 9rem !important;
}

.ml-12, .mx-12 {
    margin-left: 9rem !important;
}

.mx-12 {
    margin-right: 9rem !important;
}

.my-12 {
    margin-top: 9rem !important;
    margin-bottom: 9rem !important;
}

.p-0 {
    padding: 0 !important;
}

.pt-0 {
    padding-top: 0 !important;
}

.pr-0 {
    padding-right: 0 !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.pl-0, .px-0 {
    padding-left: 0 !important;
}

.px-0 {
    padding-right: 0 !important;
}

.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.p-1 {
    padding: .25rem !important;
}

.pt-1 {
    padding-top: .25rem !important;
}

.pr-1 {
    padding-right: .25rem !important;
}

.pb-1 {
    padding-bottom: .25rem !important;
}

.pl-1, .px-1 {
    padding-left: .25rem !important;
}

.px-1 {
    padding-right: .25rem !important;
}

.py-1 {
    padding-top: .25rem !important;
    padding-bottom: .25rem !important;
}

.p-2 {
    padding: .5rem !important;
}

.pt-2 {
    padding-top: .5rem !important;
}

.pr-2 {
    padding-right: .5rem !important;
}

.pb-2 {
    padding-bottom: .5rem !important;
}

.pl-2, .px-2 {
    padding-left: .5rem !important;
}

.px-2 {
    padding-right: .5rem !important;
}

.py-2 {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
}

.p-3 {
    padding: 1rem !important;
}

.pt-3 {
    padding-top: 1rem !important;
}

.pr-3 {
    padding-right: 1rem !important;
}

.pb-3 {
    padding-bottom: 1rem !important;
}

.pl-3, .px-3 {
    padding-left: 1rem !important;
}

.px-3 {
    padding-right: 1rem !important;
}

.py-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.p-4 {
    padding: 1.5rem !important;
}

.pt-4 {
    padding-top: 1.5rem !important;
}

.pr-4 {
    padding-right: 1.5rem !important;
}

.pb-4 {
    padding-bottom: 1.5rem !important;
}

.pl-4, .px-4 {
    padding-left: 1.5rem !important;
}

.px-4 {
    padding-right: 1.5rem !important;
}

.py-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.p-5 {
    padding: 2rem !important;
}

.pt-5 {
    padding-top: 2rem !important;
}

.pr-5 {
    padding-right: 2rem !important;
}

.pb-5 {
    padding-bottom: 2rem !important;
}

.pl-5, .px-5 {
    padding-left: 2rem !important;
}

.px-5 {
    padding-right: 2rem !important;
}

.py-5 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

.p-6 {
    padding: 3rem !important;
}

.pt-6 {
    padding-top: 3rem !important;
}

.pr-6 {
    padding-right: 3rem !important;
}

.pb-6 {
    padding-bottom: 3rem !important;
}

.pl-6, .px-6 {
    padding-left: 3rem !important;
}

.px-6 {
    padding-right: 3rem !important;
}

.py-6 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.p-7 {
    padding: 4rem !important;
}

.pt-7 {
    padding-top: 4rem !important;
}

.pr-7 {
    padding-right: 4rem !important;
}

.pb-7 {
    padding-bottom: 4rem !important;
}

.pl-7, .px-7 {
    padding-left: 4rem !important;
}

.px-7 {
    padding-right: 4rem !important;
}

.py-7 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}

.p-8 {
    padding: 5rem !important;
}

.pt-8 {
    padding-top: 5rem !important;
}

.pr-8 {
    padding-right: 5rem !important;
}

.pb-8 {
    padding-bottom: 5rem !important;
}

.pl-8, .px-8 {
    padding-left: 5rem !important;
}

.px-8 {
    padding-right: 5rem !important;
}

.py-8 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}

.p-9 {
    padding: 6rem !important;
}

.pt-9 {
    padding-top: 6rem !important;
}

.pr-9 {
    padding-right: 6rem !important;
}

.pb-9 {
    padding-bottom: 6rem !important;
}

.pl-9, .px-9 {
    padding-left: 6rem !important;
}

.px-9 {
    padding-right: 6rem !important;
}

.py-9 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
}

.p-10 {
    padding: 7rem !important;
}

.pt-10 {
    padding-top: 7rem !important;
}

.pr-10 {
    padding-right: 7rem !important;
}

.pb-10 {
    padding-bottom: 7rem !important;
}

.pl-10, .px-10 {
    padding-left: 7rem !important;
}

.px-10 {
    padding-right: 7rem !important;
}

.py-10 {
    padding-top: 7rem !important;
    padding-bottom: 7rem !important;
}

.p-11 {
    padding: 8rem !important;
}

.pt-11 {
    padding-top: 8rem !important;
}

.pr-11 {
    padding-right: 8rem !important;
}

.pb-11 {
    padding-bottom: 8rem !important;
}

.pl-11, .px-11 {
    padding-left: 8rem !important;
}

.px-11 {
    padding-right: 8rem !important;
}

.py-11 {
    padding-top: 8rem !important;
    padding-bottom: 8rem !important;
}

.p-12 {
    padding: 9rem !important;
}

.pt-12 {
    padding-top: 9rem !important;
}

.pr-12 {
    padding-right: 9rem !important;
}

.pb-12 {
    padding-bottom: 9rem !important;
}

.pl-12, .px-12 {
    padding-left: 9rem !important;
}

.px-12 {
    padding-right: 9rem !important;
}

.py-12 {
    padding-top: 9rem !important;
    padding-bottom: 9rem !important;
}


/* Colors */
.bg-teal {
    background: #5AB6B2 !important;
    color: #fff;
}

.bg-light {
    background: ghostwhite !important;
    color: #000 !important;
}

/* Login */

.login .content {
    width: 800px;
    height: 420px;
    background-color: #fff;
    position: absolute; /*it can be fixed too*/
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    overflow: hidden !important;
    /*this to solve "the content will not be cut when the window is smaller than the content": */
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
    text-align: center;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: inset 0px 0px 10px 1px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 0px 0px 10px 1px rgba(0,0,0,0.75);
    box-shadow: inset 0px 0px 10px 1px rgba(0,0,0,0.75);
}

.login .alertContent {
    height: 440px;
}

.login .content img {
    margin-top: 30px;
}

.login .content .form {
    display: block;
    padding-top: 25px;
}

    .login .content .form input,
    .login .content .form a.btn {
        width: 90%;
        padding: 8px 8px 8px 30px;
        border: 1px solid #bbb;
        font-size: 12px;
        margin: 8px;
        color: #666;
    }

.login .iconspan {
    float: left;
    position: absolute;
    z-index: 2;
    left: 20px;
    margin-top: 17px;
    color: #666;
}

.login .btn {
    /*background: #2689FF;*/
    color: #fff;
    font-weight: bold;
}

.login .alert-error {
    width: 830px;
    height: 210px;
    top: 604px !important;
    position: absolute; /*it can be fixed too*/
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: white;
    opacity: .7;
    background: url(../../img/501.gif) center no-repeat #fff;
}


.height-100 {
    height: 100%;
}

.width-100 {
    width: 100%;
}

.text-primarySurvey {
    font-size: 22px;
    /*color: #337ab7;*/
}

.footerHR {
    margin-top: 5px;
    margin-bottom: 5px;
}

.morehelpContent {
    line-height: 40px;
    background-color: #ddd;
    margin-top: 2.5rem;
}

.morehelpInnerContent {
    line-height: 25px;
}


.customHeading {
    font-weight: 700;
}

.invisible {
    /*visibility:hidden;*/
    display: none;
}

.display-none {
    display: none;
}

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


.footerLine {
    padding-bottom: 5px;
}

.alert-div {
    width: 800px;
    height: 40px;
    vertical-align: top;
    /*position: absolute;*/ /*it can be fixed too*/
    margin: auto;
    top: 0;
    bottom: 430px;
    right: 0;
    left: 0;
    /*this to solve "the content will not be cut when the window is smaller than the content": */
    text-align: center;
}

.surveyOptions td {
    vertical-align: middle !important;
}

.surveypages {
    padding-bottom: 65px;
}

.bg-white {
    background-color: #fff;
    border-color: #fff;
}

.text-teal {
    color: #5AB6B2 !important;
}

.text-white {
    color: #fff !important;
}

.text-copyright {
    font-size: 12px;
}

.arrow-container {
    width: 100px;
    height: 90px;
    margin: 0 auto;
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
}



.arrow-2 {
    width: 40px;
    height: 40px;
    background: #5ab6b2;
    border-radius: 50%;
    position: absolute;
    left: 30px;
    z-index: 1;
    display: table;
}




    .arrow-2:before {
        width: 40px;
        height: 40px;
        content: "";
        border: 2px solid #006064;
        border-radius: 50%;
        position: absolute;
        top: 0px;
        left: 0px;
    }

    .arrow-2 i.fa {
        font-size: 30px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        color: #ffffff;
    }


#ddlLanguage {
    width: 90%;
    padding: 8px 8px 8px 8px;
    border: 1px solid #bbb;
    font-size: 12px;
    margin: 0px 8px 10px;
    color: #666;
}

#ddlLanguageOther {
    padding: 8px 8px 8px 8px;
    border: 1px solid #bbb;
    font-size: 12px;
    margin: 0px 0px 10px;
    color: #666;
    float:right;
}

.loginLeft {
    height:420px;
}