/***** Global Css ******/
body {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 400 !important;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    font-size: 15px;
    color: #666 !important;
}

::-moz-placeholder { /* Firefox 19+ */
    font-size: 15px;
    color: #666 !important;
}

:-ms-input-placeholder { /* IE 10+ */
    font-size: 15px;
    color: #666 !important;
}

:-moz-placeholder { /* Firefox 18- */
    font-size: 15px;
    color: #666 !important;
}

.hero-wrap.pageTitleSection {
    height: 100%;
    min-height: 360px;
    background-color: #00254a;
}

    .hero-wrap.pageTitleSection .pageTitle {
        position: absolute;
        bottom: 65px;
        left: 0;
        right: 0;
        margin: 0px;
        text-align: center;
        color: #ffffff;
        text-transform: capitalize;
        font-size: 36px;
    }

input, textarea, select {
    border: 1px solid #2c5d8f !important;
}

.form-select {
    height: 45px;
}
/***** /About Us Page Css *****/
/***** Contact Us Page css *****/
#contactusPage {
    background: url('../images/contactpage-bg.jpg') center center no-repeat;
    background-size: cover;
}

    #contactusPage .contentWrap {
        background: #fff;
    }

        #contactusPage .contentWrap .formWrap h5 {
            letter-spacing: 5px;
            font-family: Raleway, sans-serif;
            font-weight: 300;
            font-size: 16px;
            position: relative;
            color: #2c5d8f;
        }

            #contactusPage .contentWrap .formWrap h5:after {
                content: '';
                width: 100%;
                height: 1px;
                background: #2c5d8f;
                position: absolute;
                left: 0;
                bottom: -8px;
            }

        #contactusPage .contentWrap .formWrap h2 {
            letter-spacing: 4px;
            font-size: 28px;
            font-family: Raleway, sans-serif;
            font-weight: 700;
            color: #2c5d8f;
        }

        #contactusPage .contentWrap .formWrap input,
        #contactusPage .contentWrap .formWrap textarea {
            border: 0;
            border-bottom: 1px solid #2c5d8f;
            border-radius: 0;
        }

            #contactusPage .contentWrap .formWrap input:focus,
            #contactusPage .contentWrap .formWrap textarea:focus {
                border: 1px solid #2c5d8f;
            }

        #contactusPage .contentWrap .formWrap button {
            border-radius: 0;
            border: 1px solid #2c5d8f;
            color: #2c5d8f;
            transition: .3s all ease-in-out;
            font-size: 14px;
            letter-spacing: 4px;
        }

            #contactusPage .contentWrap .formWrap button:hover {
                background-color: #2c5d8f;
                color: #fff;
            }

        #contactusPage .contentWrap .contactDetail h3 {
            font-size: 22px;
            font-family: Raleway, sans-serif;
            font-weight: 500;
            color: #2c5d8f;
            display: inline-block;
            border-bottom: 2px solid #2c5d8f;
            margin-bottom: 20px;
            text-transform: uppercase;
        }

        #contactusPage .contentWrap .contactDetail ul li {
            font-size: 15px;
            line-height: 32px;
            font-family: Raleway, sans-serif;
            font-weight: 300;
        }

            #contactusPage .contentWrap .contactDetail ul li:first-child {
                line-height: 22px;
            }

            #contactusPage .contentWrap .contactDetail ul li i {
                color: #2c5d8f;
                width: 25px;
                text-align: center;
            }

            #contactusPage .contentWrap .contactDetail ul li span {
                display: inline-block;
            }

            #contactusPage .contentWrap .contactDetail ul li a,
            #contactusPage .contentWrap .contactDetail ul li a:hover {
                color: #212529
            }
/***** /Contact Us Page Css *****/

/***** Login / Reset Password Page Css *****/
.login-page, .resetPassword-page {
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    height: auto;
    -ms-flex-pack: center;
    justify-content: center;
}

.login-box, .resetPassword-box {
    width: 450px;
    border: 2px solid #2c5d8f;
    box-shadow: 0px 16px 21px -18px #2c5d99;
}

    .login-box .card, .resetPassword-box .card {
        border: none;
    }

.login-card-body, .resetPassword-card-body {
    background: #fff;
    border-top: 0;
    color: #666;
    padding: 20px;
}

.login-box-msg, .resetPassword-box-msg {
    margin: 0;
    padding: 0 20px 20px;
}

.login-card-body .input-group > input {
    border: 1px solid #2c5d8f;
}

.login-card-body .input-group .input-group-text,
.resetPassword-card-body .input-group .input-group-text {
    background-color: transparent;
    border-bottom-right-radius: .25rem;
    border-left: 0;
    border-top-right-radius: .25rem;
    color: #777;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    height: 100%;
    border: 1px solid #2c5d8f;
}
/***** /Login / Reset Password Page Css *****/

/***** Instructor Portal Index page Css *****/
#instructorPortal .contentSection .skybg {
    background-color: #d5e5ff !important;
    border: 1px solid #d5e5ff;
}

#instructorPortal .contentSection .greybg {
    background-color: #f9f9f9 !important;
    border: 1px solid #f9f9f9;
    color: #212529;
}

#instructorPortal .contentSection .accordion a:hover {
    color: #234c7a;
}

#instructorPortal .contentSection .accordion .accordion-button:not(.collapsed):after {
    color: #234c7a;
}

#instructorPortal .contentSection .accordion .accordion-item {
    border: none;
}

    #instructorPortal .contentSection .accordion .accordion-item .accordion-collapse {
        border-width: 0 1px 1px 1px;
    }

    #instructorPortal .contentSection .accordion .accordion-item .accordion-body {
    }

        #instructorPortal .contentSection .accordion .accordion-item .accordion-body ul {
        }

            #instructorPortal .contentSection .accordion .accordion-item .accordion-body ul li {
                line-height: 32px;
            }

                #instructorPortal .contentSection .accordion .accordion-item .accordion-body ul li a {
                    color: #212529;
                    transition: .3s all ease-in-out;
                }

                    #instructorPortal .contentSection .accordion .accordion-item .accordion-body ul li a:hover {
                        color: #234c7a;
                    }

#instructorPortal .rightsideNav {
    background-color: #f9f9f9;
}

    #instructorPortal .rightsideNav a {
        border-bottom: 1px solid #dbdbdb;
        color: #313131;
    }

        #instructorPortal .rightsideNav a:hover {
            color: #4282ca;
        }

        #instructorPortal .rightsideNav a:last-child {
            border-bottom: none;
        }
/***** /Instructor Portal Index page Css *****/

/**** Instructor Contact Page Css *****/
#contactusInstructorPage {
    background: url('../images/contactpage-bg.jpg') center center no-repeat;
    background-size: cover;
}

#contactusInstructorPage .contentWrap {
    background-color: #fff;
    padding-bottom: 10px;
}

#contactusInstructorPage .contentWrap .formWrap h2 {
    letter-spacing: 4px;
    font-size: 28px;
    font-family: Raleway, sans-serif;
    font-weight: 700;
    color: #2c5d8f;
}

#contactusInstructorPage .contentWrap .formWrap input,
#contactusInstructorPage .contentWrap .formWrap textarea {
    border: 0;
    border-bottom: 1px solid #2c5d8f;
    border-radius: 0;
}

#contactusInstructorPage .contentWrap .formWrap input:focus,
#contactusInstructorPage .contentWrap .formWrap textarea:focus {
    border: 1px solid #2c5d8f;
}


#contactusInstructorPage .contentWrap .contactDetail ul li {
    font-size: 15px;
    line-height: 32px;
    font-family: Raleway, sans-serif;
    font-weight: 300;
}

#contactusInstructorPage .contentWrap .contactDetail ul li:first-child {
    line-height: 22px;
}

#contactusInstructorPage .contentWrap .contactDetail ul li i {
    color: #2c5d8f;
    width: 25px;
    text-align: center;
}

#contactusInstructorPage .contentWrap .contactDetail ul li span {
    display: inline-block;
}

#contactusInstructorPage .contentWrap .contactDetail ul li a,
#contactusInstructorPage .contentWrap .contactDetail ul li a:hover {
    color: #212529
}

#contactusInstructorPage .contentWrap .formWrap button{
    border-radius: 0;
    border: 1px solid #2c5d8f;
    color: #2c5d8f;
    transition: .3s all ease-in-out;
    font-size: 14px;
    letter-spacing: 4px;
}

#contactusInstructorPage .contentWrap .formWrap button:hover {
    background-color: #2c5d8f;
    color: #fff;
}
/**** /Instructor Contact Page Css *****/

/***** DataTable Css *****/
.dataTableContainer {
}

    .dataTableContainer table {
        border: 1px solid #ebebeb !important;
    }

        .dataTableContainer table thead {
            /*background-color: #efefef;*/
            background-color: #1f4c7a;
            color:white;
        }

            .dataTableContainer table thead tr th {
                font-family: 'Roboto', sans-serif !important;
                font-weight: 500 !important;
                /*color: #4c4848;*/
                color: white;
                font-size: 15px;
                border-bottom: 1px solid #ebebeb !important;
            }

        .dataTableContainer table tbody {
            border-top: none !important;
        }

            .dataTableContainer table tbody tr td {
                font-family: 'Roboto', sans-serif !important;
                font-weight: 400 !important;
                color: #4c4848;
                font-size: 14px;
            }

                .dataTableContainer table tbody tr td button.btn-outline-dark {
                    font-weight: normal;
                    text-transform: capitalize;
                    border: 1px solid #b5b5b5;
                }

                    .dataTableContainer table tbody tr td button.btn-outline-dark:hover {
                        background-color: #b5b5b5;
                        color: #313131 !important;
                    }

                .dataTableContainer table tbody tr td i:hover {
                    cursor: pointer;
                }
/***** /DataTable Css *****/

/***** Instructor/AddCalendarEvent page Css *****/
#msform {
    text-align: center;
    position: relative;
    margin-top: 20px
}

    #msform fieldset {
        background: white;
        border: 0 none;
        border-radius: 0.5rem;
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        padding-bottom: 20px;
        position: relative
    }

.form-card {
    text-align: left
}

#msform fieldset:not(:first-of-type) {
    display: none
}


#msform .action-button {
    float: left;
}
#msform .action-button-previous {
    float: left;
}
.card {
    z-index: 0;
    border: none;
    position: relative
}

.fs-title {
    font-size: 25px;
    color: #673AB7;
    margin-bottom: 15px;
    font-weight: normal;
    text-align: left
}

.purple-text {
    color: #673AB7;
    font-weight: normal
}

.steps {
    font-size: 25px;
    color: gray;
    margin-bottom: 10px;
    font-weight: normal;
    text-align: right
}

.fieldlabels {
    color: gray;
    text-align: left
}

#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    color: darkgray;
    padding: 0px;
}

    #progressbar .active {
        color: #2c5d8f;
    }

    #progressbar li {
        list-style-type: none;
        font-size: 15px;
        width: 20%;
        float: left;
        position: relative;
        font-weight: 400
    }

    #progressbar #instructorInfo:before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f129"
    }

    #progressbar #courseName:before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f02d"
    }

    #progressbar #courseType:before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f5da"
    }

    #progressbar #courseLocation:before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f124"
    }

    #progressbar #verification:before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f00c"
    }

    #progressbar li:before {
        width: 50px;
        height: 50px;
        line-height: 45px;
        display: block;
        font-size: 20px;
        color: #ffffff;
        background: darkgray;
        border-radius: 50%;
        margin: 0 auto 10px auto;
        padding: 2px
    }

    #progressbar li:after {
        content: '';
        width: 100%;
        height: 2px;
        background: lightgray;
        position: absolute;
        left: 0;
        top: 25px;
        z-index: -1
    }

    #progressbar li.active:before,
    #progressbar li.active:after {
        background: #2c5d8f;
    }

.progress {
    height: 20px
}

.progress-bar {
    background-color: #673AB7
}

.fit-image {
    width: 100%;
    object-fit: cover
}

.myUTCM-form-container {
    background: #d5e5ff;
    color: black;
    border: 1px solid #dee2e6 !important;
}

/***** /Instructor/AddCalendarEvent page Css *****/