/* Minification failed. Returning unminified contents.
(11806,1): run-time error CSS1019: Unexpected token, found '@import'
(11806,9): run-time error CSS1019: Unexpected token, found 'url('https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap')'
 */
@keyframes jumpIn {
    0% {
        transform: scale(0) translateY(-200px);
        opacity: 0;
    }

    50% {
        transform: scale(1.05) translateY(20px);
        opacity: 1;
    }

    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

@keyframes bounceIn {
    0% {
        transform: scale(0.3) translateY(-1000px);
        opacity: 0;
    }

    50% {
        transform: scale(1.1) translateY(30px);
        opacity: 1;
    }

    70% {
        transform: scale(0.95) translateY(-10px);
    }

    100% {
        transform: scale(1) translateY(0);
    }
}

@keyframes slideUpIn {
    0% {
        transform: translateY(100%); /* Start off-screen at the bottom */
        opacity: 0;
    }

    100% {
        transform: translateY(0); /* Move to the final position */
        opacity: 1;
    }
}

#smart_tag_modal {
    animation: jumpIn 0.8s ease-out forwards; /* Animation applied when modal is shown */
}

.unlockPanEmail {
    animation: slideUpIn 0.6s ease-out forwards; /* Animation applied when modal is shown */
}
.exam-form-wrapper {
    max-width: 90%;
    margin: 40px auto;
    padding: 30px;
    background: linear-gradient(to bottom right, #ffffff, #f5faff);
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    font-family: 'Segoe UI', sans-serif;
}

    .exam-form-wrapper h2 {
        text-align: center;
        color: #2c3e50;
        margin-bottom: 25px;
        font-size: 28px;
    }

    .exam-form-wrapper .form-group {
        margin-bottom: 20px;
    }

    .exam-form-wrapper label {
        display: block;
        font-weight: 600;
        margin-bottom: 6px;
        color: #34495e;
    }

    .exam-form-wrapper input[type="text"],
    .exam-form-wrapper input[type="email"],
    .exam-form-wrapper select,
    .exam-form-wrapper textarea {
        width: 100%;
        padding: 12px 15px;
        border-radius: 12px;
        border: 1px solid #ccc;
        background-color: #fdfdfd;
        font-size: 15px;
        transition: all 0.3s ease;
        box-sizing: border-box;
    }

        .exam-form-wrapper input:focus,
        .exam-form-wrapper select:focus,
        .exam-form-wrapper textarea:focus {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 5px rgba(52, 152, 219, 0.2);
        }

    .exam-form-wrapper textarea {
        resize: vertical;
        min-height: 100px;
    }

    .exam-form-wrapper .form-footer {
        text-align: center;
        margin-top: 30px;
    }

    .exam-form-wrapper .btn-submit {
        background: linear-gradient(to right, #3498db, #6dd5fa);
        color: white;
        padding: 12px 30px;
        font-size: 16px;
        border: none;
        border-radius: 30px;
        cursor: pointer;
        transition: background 0.3s ease, transform 0.2s ease;
    }

        .exam-form-wrapper .btn-submit:hover {
            background: linear-gradient(to right, #2980b9, #57c1eb);
            transform: scale(1.05);
        }

    .exam-form-wrapper .note {
        text-align: center;
        color: #888;
        font-size: 14px;
        margin-top: 10px;
    }

/*---------------------------ASSIGNMENT BAR FOR STUDENT START------------------------------------------*/
.cssAssignmentBar {
    display: flex; /* Use flexbox for alignment */
    flex-wrap: wrap; /* Wrap items to next line if needed */
    gap: 20px; /* Consistent spacing between items */
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0;
    justify-content: left; /* Center align items */
}

    .cssAssignmentBar .cssItem {
        display: flex;
        flex-direction: column; /* Stack icon, title, and description */
        align-items: center; /* Center content */
        justify-content: space-between;
        margin: 10px;
        background: linear-gradient(135deg, #65CEA7, #2D9A76); /* Modern gradient */
        border-radius: 10px; /* Rounded corners */
        padding: 20px;
        width: 220px;
        height: 120px;
        position: relative;
        border: solid 1px #dcdcdc;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

        .cssAssignmentBar .cssItem:hover {
            transform: translateY(-5px); /* Subtle hover lift */
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Add depth */
        }

        /* Icon styles */
        .cssAssignmentBar .cssItem .cssIcon {
            background-image: url('https://cdn-icons-png.flaticon.com/512/1828/1828884.png'); /* Replaceable CDN icon */
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            height: 50px;
            width: 50px;
            margin-bottom: 10px;
        }

        /* Notification badge */
        .cssAssignmentBar .cssItem .cssNotificationIcon {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #e74c3c; /* Bright red for notifications */
            color: white;
            font-weight: bold;
            font-size: 12px;
            width: 24px;
            height: 24px;
            position: absolute;
            top: 10px;
            right: 10px;
            border-radius: 50%; /* Circular badge */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Slight shadow for depth */
        }

        /* Title styles */
        .cssAssignmentBar .cssItem .cssTitle {
            margin: 10px 0;
            font-weight: bold;
            font-size: 16px;
            text-align: center;
            color: #ffffff;
            text-transform: uppercase;
        }

            .cssAssignmentBar .cssItem .cssTitle a {
                text-decoration: none;
                color: inherit; /* Inherit color from parent */
                transition: color 0.3s ease;
            }

                .cssAssignmentBar .cssItem .cssTitle a:hover {
                    color: #f1c40f; /* Golden highlight on hover */
                }

        /* Description styles */
        .cssAssignmentBar .cssItem .cssDescription {
            font-style: italic;
            font-size: 14px;
            color: #dcdcdc;
            text-align: center;
        }

/* Responsive design */
@media (max-width: 768px) {
    .cssAssignmentBar .cssItem {
        width: 100%; /* Full width on smaller screens */
    }
}

/*---------------------------ASSIGNMENT BAR FOR STUDENT END------------------------------------------*/
body {
    background-color: #EFF0F4;
    padding: 0px;
    margin: 0px;
    font-family: erpRubik;
    padding-bottom: 100px;
    vertical-align: middle;
    zoom: 90%;
}

.compLogo2 {
    background-image: url('../images/logo.png');
    background-size: contain !important;
    background-repeat: no-repeat;
    height: 100px;
    width: 100%;
    position: relative;
    z-index: 15;
    background-position: center;
    margin-bottom: 20px;
    margin-top: 20px;
}

fieldset {
    border-radius: 2px;
    border: solid 1px #c1c1c1;
    margin-bottom: 20px;
}

legend {
    margin-left: 20px;
    padding-left: 5px;
    padding-right: 5px;
}

* {
    margin: 0px;
    padding: 0px;
}

sup {
    text-transform: lowercase !important;
}

h3 {
    margin-bottom: 10px;
}

button {
    outline: none;
}

a {
    cursor: pointer;
}

td ol, td ul {
    margin-left: 20px;
}

#growls {
    z-index: 70000 !important;
}

.select2-container--open {
    z-index: 30003 !important;
}

.select2-container .select2-selection--single {
    height: unset !important;
}

.select2-selection {
    border-radius: 0px !important;
}

.select2-dropdown {
    text-transform: uppercase !important;
    min-width: 400px !important;
}

div.mce-fullscreen {
    top: 51px !important;
    left: 50px !important;
    z-index: 10 !important;
}

.amount {
    text-align: right;
}

.activeRecord {
    background-color: #65CEA7;
}

.suspendRecord {
    background-color: #FC8675;
}

.inlineHelp {
    font-family: erpRubik;
    font-size: 14px;
    font-style: italic;
    color: gray;
    display: block;
    margin-top: 5px;
}

.inlineHelp2 {
    font-family: erpRubik;
    font-size: 12px;
    font-style: italic;
    color: gray;
    display: block;
    margin-top: 5px;
    text-transform: initial !important;
}

.inline-italic-black {
    font-family: erpRubik;
    font-size: x-small;
    font-style: italic;
    color: #333;
    display: block;
    margin-top: 5px;
}

.cssIncompatibleBrowser {
    color: black;
    background-color: yellow;
    border: solid 1px #ffd800;
    margin-left: 4px;
    margin-right: 4px;
    font-size: 14px;
    padding: 5px;
    color: Black;
    background: -webkit-linear-gradient(90deg,yellow,#fff); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(yellow,#fff); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(yellow,#fff); /* For Firefox 3.6 to 15 */
    background: linear-gradient(left top,yellow,#fff); /* Standard syntax */
    margin-bottom: 20px;
}

.subDivName {
    display: block;
    color: gray;
    font-size: x-small;
    text-transform: uppercase;
    margin-top: 2px;
}

.subDivName2 {
    display: block;
    font-size: x-small;
    text-transform: uppercase;
    margin-top: 10px;
    background-color: #EFF0F4;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 5px;
}

#aForgorPwd:hover {
    text-decoration: underline;
}

#bodyBg {
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    position: fixed;
    display: none;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 80%;
    height: 100%;
}

#newsSec {
    background-color: #f8f8f8;
    /*padding: 10px;*/
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 24px 0px #a1a1a1;
    top: 0px;
    left: 200px;
    right: 200px;
    bottom: 0px;
    position: fixed;
    z-index: 29998;
    overflow: auto;
    margin-top: 56px;
}

.css-modal-header {
    background-color: #51D4CC;
    text-align: center;
    padding: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
    top: 0px;
    left: 200px;
    right: 200px;
    position: fixed;
    display: block;
    z-index: 29999;
    /*border-radius: 0px 0px 5px 5px;*/
    text-transform: uppercase;
    color: white;
    border-top: none;
}

.css-modal-close {
    height: 20px;
    width: 20px;
    background-image: url(../../Images/icons/close-white.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 14px 14px;
    display: inline-block;
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
}

#lLogHistory {
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
    top: 100px;
    left: 200px;
    right: 200px;
    position: fixed;
    z-index: 29999;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Soft shadow */
}

.lLogHistory {
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 14px 0px #a1a1a1;
    top: 100px;
    left: 200px;
    right: 200px;
    position: fixed;
    z-index: 29999;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Soft shadow */
}

#themeImgSec {
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
    top: 100px;
    left: 200px;
    right: 200px;
    position: fixed;
    z-index: 29999;
    overflow: hidden;
}

.imgThemeIcon {
    height: 120px;
    width: 120px;
    border: solid 1px #ccc;
    border-radius: 10px;
    margin: 10px;
    display: inline-block;
    position: relative;
    background-size: 100% 100%;
}

    .imgThemeIcon:hover {
        -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
        -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
        box-shadow: 0px 0px 4px 0px #a1a1a1;
        cursor: pointer;
    }

    .imgThemeIcon span {
        background-color: #65CEA7;
        border-radius: 30px;
        padding: 10px;
        position: absolute;
        top: -10px;
        left: -10px;
        display: block;
        height: 15px;
        width: 15px;
    }

.tImagBack {
    top: -10px;
    bottom: -10px;
    right: -10px;
    position: relative;
    background-attachment: fixed;
    width: 480px;
    background-color: white;
    z-index: 100000;
    opacity: 0.9;
    height: 110%;
    background-image: url('../../images/textures/blueprint.png');
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
    display: none;
}

.postedDet {
    border: solid 1px #c1c1c1;
    padding: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 5px;
    font-size: 14px;
}

.facClassV_Name {
    padding: 5px;
    border-radius: 4px 4px 4px 4px;
    background-color: #5AB6DF;
    color: white;
    text-transform: uppercase;
    text-align: left;
    display: block;
    margin-top: 10px;
}

.facClassV_Day {
    text-align: left;
    font-weight: bold;
    text-transform: uppercase;
    margin-left: 10px;
    margin-top: 10px;
}

.facClassV_H {
    padding: 5px;
    border-radius: 4px 4px 4px 4px;
    background-color: #29447e;
    color: white;
    text-transform: uppercase;
    text-align: left;
    display: block;
    margin-bottom: 5px;
}

.facClassV {
    display: inline-block;
    background-color: white;
    margin: 10px;
    padding: 5px;
    border-radius: 4px 4px 4px 4px;
    text-transform: capitalize;
    text-align: left;
    width: 200px;
    border: solid 1px #c1c1c1;
    vertical-align: top;
    position: relative;
}

.markAtten {
    display: block;
    height: 20px;
    width: 20px;
    background-size: 80% 80%;
    background-repeat: no-repeat;
    background-image: url('../../images/icons/class-attendance.png');
    background-position: center center;
    padding: 5px;
    right: -15px;
    bottom: 5px;
    position: absolute;
    cursor: pointer;
    background-color: #fff;
    border-radius: 20px;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
    border: solid 2px #fff;
}

.css-my-students {
    display: block;
    height: 20px;
    width: 20px;
    background-size: 80% 80%;
    background-repeat: no-repeat;
    background-image: url('../../images/icons/user_manage.png');
    background-position: center center;
    padding: 5px;
    right: -15px;
    bottom: 45px;
    position: absolute;
    cursor: pointer;
    background-color: #fff;
    border-radius: 20px;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
    border: solid 2px #fff;
}

.css-syllabus-coverage {
    display: block;
    height: 20px;
    width: 20px;
    background-size: 80% 80%;
    background-repeat: no-repeat;
    background-image: url('../../images/icons/onlineExam-panel.png');
    background-position: center center;
    padding: 5px;
    right: -15px;
    bottom: 125px;
    position: absolute;
    cursor: pointer;
    background-color: #fff;
    border-radius: 20px;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
    border: solid 2px #fff;
}

.css-configure-online-class-meeting {
    display: block;
    height: 20px;
    width: 20px;
    background-size: 80% 80%;
    background-repeat: no-repeat;
    background-image: url('../../images/icons/online-class.png');
    background-position: center center;
    padding: 5px;
    right: -15px;
    bottom: 85px;
    position: absolute;
    cursor: pointer;
    background-color: #EFF0F4;
    border-radius: 20px;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
    border: solid 2px #fff;
}

#mTop {
    height: 30px;
    width: 30px;
    display: none;
    background-image: url('../../images/icons/scrollUp.png');
    background-size: 100% 100%;
    right: 10px;
    bottom: 65px;
    position: fixed;
    cursor: pointer;
}

#mDown {
    height: 30px;
    width: 30px;
    display: none;
    background-image: url('../../images/icons/scrollDown.png');
    background-size: 100% 100%;
    right: 10px;
    bottom: 100px;
    position: fixed;
    cursor: pointer;
}

.periodClash_Settings {
    height: 20px;
    width: 20px;
    background-image: url('../../images/icons/settingsDark.png');
    background-size: 100% 100%;
    cursor: pointer;
    display: block;
    bottom: 0px;
    right: 0px;
    position: absolute;
    z-index: 1000;
}

.resetSeat {
    float: right;
    height: 18px;
    width: 18px;
    background-image: url('../../images/refresh.png');
    background-size: 100% 100%;
    display: block;
    cursor: pointer;
}

.seatDet {
    margin-bottom: 10px;
}

.makeDesSubj {
    height: 28px;
    width: 28px;
    float: right;
    cursor: pointer;
    background-image: url('../../images/icons/make_dicision.png');
    background-size: 100% 100%;
}

.lnkSyllabus {
    text-decoration: none;
    background-image: url('../../images/icons/subjectSel.png');
    background-size: 24px 24px;
    background-repeat: no-repeat;
    color: black;
    background-position-x: 0px;
    background-position-y: 0px;
    padding-left: 30px;
    cursor: pointer;
    min-height: 24px;
    display: inline-block;
}

    .lnkSyllabus:hover {
        text-decoration: underline;
    }

.lnkSearch {
    text-decoration: none;
    background-image: url('../../images/basics-19-32.png');
    background-size: 16px 16px;
    background-repeat: no-repeat;
    color: black;
    background-position-x: 0px;
    background-position-y: 0px;
    padding-left: 18px;
    cursor: pointer;
}

    .lnkSearch:hover {
        text-decoration: underline;
    }

#lockTim {
    text-align: center;
    font-size: 60px;
    color: white;
    top: -150px;
    position: absolute;
    height: 200px;
    width: 100%;
}

.helpClose {
    display: block;
    height: 40px;
    width: 40px;
    background-color: white;
    background-image: url('../../images/bullet_deny.png');
    background-size: 24px 24px;
    background-position-x: 8px;
    background-position-y: 8px;
    position: absolute;
    top: -15px;
    right: -20px;
    cursor: pointer;
    background-repeat: no-repeat;
    border-radius: 30px 30px 30px 30px;
}

.curStart {
    color: Orange;
}

.curPage {
    color: #990000;
}

#pPath {
    font-size: 10px;
    float: right;
}

.requiredCSS::after {
    content: ' *';
    color: red;
    font-weight: normal;
    vertical-align: top;
}

.noteH {
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    text-transform: none;
    color: #808080;
    font-family: erpRubik;
}

    .noteH ol, .noteH ul {
        margin-left: 20px;
    }

.tprintIcon {
    display: block;
    height: 32px;
    width: 32px;
    background-image: url('../../images/Print.png');
    background-size: 100% 100%;
    cursor: pointer;
    top: 0px;
    right: 23px;
    position: absolute;
}

.temailIcon {
    display: block;
    height: 32px;
    width: 32px;
    background-image: url('../../images/icons/emailat.png');
    background-size: 100% 100%;
    cursor: pointer;
    top: 5px;
    right: 73px;
    position: absolute;
}

.busSeat {
    background-color: white;
    padding: 5px;
    margin: 10px;
    border-radius: 2px 2px 2px 2px;
    border: solid 1px #c1c1c1;
}

    .busSeat:hover {
        -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
        -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
        box-shadow: 0px 0px 4px 0px #a1a1a1;
    }

.seatno {
    font-family: erpRubik;
    font-size: 14px;
    color: #808080;
}

.divLabel {
    height: 120px;
    width: 320px;
    /*border:solid 1px #333;*/
    display: inline-block;
    margin-right: 10px;
    overflow: hidden;
}

.elrule {
    color: #424F63;
    float: right;
    font-style: italic;
    font-weight: normal;
    margin-right: 20px;
    font-size: 14px;
}

/* Container for the role list */
#divRoleList {
    max-width: 1200px;
    margin: 80px auto 30px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 0 20px;
}

/* Styling for individual role items */
.rolecss {
    background-color: #ffffff;
    border: solid 1px #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    width: 280px;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    overflow: hidden;
}

    .rolecss::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
        transition: opacity 0.3s ease;
        opacity: 0;
        pointer-events: none;
    }

    .rolecss:hover::before {
        opacity: 1;
    }

    .rolecss:hover {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        transform: translateY(-5px);
        border-left: solid 5px #4bb78f;
    }

/* Styling for the role logo */
.rolelogo {
    height: 50px;
    width: 50px;
    background-image: url('../../images/icons/faculty.png');
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    display: block;
}

.rolecss:hover .rolelogo {
    transform: rotate(360deg);
}

/* Styling for text inside the role item */
.roletext {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    color: #333333;
    transition: color 0.3s ease;
}

.rolecss:hover .roletext {
    color: #007BFF;
}


.modalBackground {
    background-color: #ccc;
    filter: alpha(opacity=70);
    opacity: 0.7;
}

.mNameplate {
    background-color: white;
    border-radius: 2px 2px 2px 2px;
    margin: 0px;
    margin-bottom: 10px;
    height: 100px;
}

.redBox {
    color: #000;
    background-color: red;
    border: solid 1px #FC8675;
    font-weight: bold;
    margin-left: 4px;
    margin-right: 4px;
    font-size: 14px;
    padding: 2px;
}

.greenBox {
    color: black;
    background-color: #4bb78f;
    border: solid 1px green;
    font-weight: bold;
    margin-left: 4px;
    margin-right: 4px;
    font-size: 14px;
    padding: 2px;
}

.yellowBox {
    color: black;
    background-color: yellow;
    border: solid 1px #ffd800;
    font-weight: bold;
    margin-left: 4px;
    margin-right: 4px;
    font-size: 14px;
    padding: 2px;
}

.red {
    color: red !important;
    font-weight: bold;
    margin-left: 4px;
    margin-right: 4px;
    font-size: 14px;
}

.red-tr {
    color: #fff !important;
    background-color: red !important;
}

    .red-tr .subDivName {
        color: #fff !important;
    }

    .red-tr a {
        color: #fff !important;
    }

    .red-tr .dropdown-menu a {
        color: black !important;
    }

    .red-tr .smarttag {
        background-image: url(../../Images/icons/user-alt-white.png) !important;
    }

    .red-tr .red {
        color: #fff !important;
    }

    .red-tr .pink {
        color: #fff !important;
    }

.black {
    color: black !important;
    font-weight: bold;
    margin-left: 4px;
    margin-right: 4px;
    font-size: 14px;
}

.green {
    color: green !important;
    font-weight: bold;
    margin-left: 4px;
    margin-right: 4px;
    font-size: 14px;
}

.yellow {
    color: #FC8675;
    font-weight: bold;
    margin-left: 4px;
    margin-right: 4px;
    font-size: 14px;
}

.yellowcss {
    color: yellow;
    font-weight: bold;
    margin-left: 4px;
    margin-right: 4px;
    font-size: 14px;
}

.green2 {
    color: #4bb78f !important;
    font-weight: bold;
    margin-left: 4px;
    margin-right: 4px;
    font-size: 14px;
}

.pink {
    color: #FC8675 !important;
    font-weight: bold;
    margin-left: 4px;
    margin-right: 4px;
    font-size: 14px;
}

#topBar {
    background-color: white;
    top: 0px;
    right: 0px;
    left: 50px;
    position: fixed;
    padding: 0px;
    margin: 0px;
    z-index: 20000;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
}

.hBar {
    background-image: url('../../Images/icons/parallel-lines.png');
    height: 30px;
    width: 30px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-right: 20px;
}

    .hBar:hover {
        cursor: pointer;
    }

.urightImg {
    background-color: #EFF0F4;
    height: 25px;
    width: 25px;
    margin-right: 10px;
    background-image: url('../../images/icons/user.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 4px 4px 4px 4px;
}

.urightNamePImg {
    background-color: #EFF0F4;
    height: 40px;
    width: 40px;
    margin-right: 10px;
    background-image: url('../../images/icons/user.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 4px 4px 4px 4px;
}
/*---------------------TOP RIGHT MENU-------------------------------------------*/
#topRightMenu {
    list-style: none;
    position: relative;
    font-family: erpRubik;
    font-size: 14px;
    margin-right: 20px;
    float: right;
}

    #topRightMenu li {
        display: table-cell;
        vertical-align: middle;
        position: relative;
    }

        #topRightMenu li #unreadNotifications, #birthdayUnreadNotifications {
            padding: 4px;
            background-color: red;
            color: #fff;
            display: inline-block;
            height: auto;
            width: auto;
            position: absolute;
            right: 5px;
            top: 2px;
            border-radius: 10px;
            display: none;
            border: solid 1px #fff;
            font-size: 10px;
        }

        #topRightMenu li a {
            display: block;
            color: black;
            text-decoration: none;
            padding: 12px;
            position: relative;
        }

        #topRightMenu li ul {
            display: none;
            background-color: #65CEA7;
            text-align: left;
            width: 220px;
        }

            #topRightMenu li ul li {
                display: block;
                padding-left: 10px;
                margin: 5px;
            }

                #topRightMenu li ul li:hover {
                    border-radius: 4px 4px 4px 4px;
                    cursor: pointer;
                }

                #topRightMenu li ul li a {
                    padding: 5px;
                    padding-left: 30px;
                    background-size: 18px 18px;
                    background-repeat: no-repeat;
                    background-position: left;
                }

        #topRightMenu li:hover ul {
            display: block;
            position: absolute;
            right: 0px;
            top: 48px;
            padding-top: 10px;
        }

        #topRightMenu li:hover a {
            color: white;
        }

        #topRightMenu li:hover {
            background-color: #424F63;
            color: white;
        }

            #topRightMenu li:hover span {
                color: white;
            }
/*---------------------------------END OF TOP BAR-----------------------------------*/
.css-notifications-show {
    display: block !important;
}
/*---------------------------------START OF LEFT MENU BAR----------------------------*/
#leftBar1 {
    top: 0px;
    bottom: 0px;
    left: 0px;
    width: 50px;
    position: fixed;
    background-color: #424F63;
    z-index: 20000;
    overflow-y: auto;
    overflow-x: hidden;
    /*background-image: url('../../Images/UsersThemes/backgrounds/6.jpg');
    background-attachment:fixed;
    background-size:100% 100%;*/
}

.leftBar1-selected {
    background-color: #4bb78f;
    border-radius: 4px 0px 0px 4px;
}

.leftBar2-selected {
    background-color: #4bb78f;
}

#leftBar2 {
    top: 0px;
    bottom: 0px;
    left: -200px;
    width: 200px;
    position: fixed;
    background-color: #424F63;
    display: block;
    z-index: 20001;
    overflow-y: auto;
    overflow-x: hidden;
    /*background-image: url('../../Images/UsersThemes/backgrounds/6.jpg');
    background-attachment:fixed;
    background-size:100% 100%;
    background-position:right center;*/
}
/*--------------------------------END OF LEFT MENU BAR-------------------------------*/
/*---------------------------------LEFT ICON BAR 1-----------------------------------*/
#leftIconVBar {
    list-style: none;
    margin-top: 90px;
    margin-left: 5px;
    margin-bottom: 0px;
}

    #leftIconVBar li {
        display: table-row;
        height: 39px;
        width: 40px;
    }

        #leftIconVBar li a {
            background-image: url('../../images/icons/maleUser.png');
            background-size: 24px 24px;
            background-position-x: 2px;
            background-position-y: 2px;
            padding: 15px;
            padding-left: 30px;
            padding-bottom: 2px;
            background-repeat: no-repeat;
        }

            #leftIconVBar li a::selection {
                background-color: red;
                color: yellow;
            }

            #leftIconVBar li a:hover {
                background-color: #65CEA7;
                border-radius: 4px 0px 0px 4px;
            }
/*---------------------------------END LEFT ICON BAR 1-------------------------------*/
/*---------------------------------LEFT ICON Text BAR 2-----------------------------------*/
#leftIconTextVBar {
    list-style: none;
    margin-top: 10px;
    margin-left: 0px;
}

    #leftIconTextVBar li {
        display: table;
        margin-bottom: 5px;
        padding-left: 5px;
        vertical-align: top;
        position: relative;
        width: 195px;
        padding-top: 5px;
    }

        #leftIconTextVBar li a {
            background-image: url('../../images/icons/maleUser.png');
            background-size: 24px 24px;
            background-position-x: 2px;
            background-position-y: 2px;
            padding: 7px;
            padding-left: 50px;
            padding-bottom: 7px;
            background-repeat: no-repeat;
            color: white;
            font-family: erpRubik;
            font-size: 14px;
            display: table;
            width: 130px;
            vertical-align: top;
        }

            #leftIconTextVBar li a:hover {
                color: #65CEA7;
                background-color: #353F4F;
            }

        #leftIconTextVBar li:hover {
            color: #65CEA7;
            background-color: #353F4F;
        }
        /*Level-1 Child*/
        #leftIconTextVBar li ul {
            display: none;
            position: relative;
            background-color: #65CEA7;
            padding: 5px;
        }

        #leftIconTextVBar li:hover ul {
            display: block;
            left: 200px;
            top: -40px;
            position: absolute;
        }
        /*Level-2 Child*/
        #leftIconTextVBar li ul li ul {
            display: none;
            position: relative;
            background-color: red;
            padding: 5px;
        }

        #leftIconTextVBar li ul li:hover ul {
            display: block;
            left: 200px;
            top: -40px;
            position: absolute;
        }
        /*Level-3 Child*/
        #leftIconTextVBar li ul li ul li ul {
            display: none;
            position: relative;
            background-color: green;
            padding: 5px;
        }

        #leftIconTextVBar li ul li ul li:hover ul {
            display: block;
            left: 200px;
            top: -40px;
            position: absolute;
        }
/*---------------------------------END LEFT ICON TEXT BAR 2-------------------------------*/
#divMainContent {
    margin-top: 40px;
    padding-top: 60px;
    padding-left: 200px;
}

#childMenuPan {
    top: 50px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    position: fixed;
    padding-top: 60px;
    padding-left: 220px;
    padding-bottom: 50px;
    z-index: 10;
    overflow: auto;
    background-color: #EFF0F4;
    display: none;
}

.childMenuItem {
    padding: 10px 15px;
    border: none;
    border-radius: 8px;
    margin: 10px;
    background: linear-gradient(135deg, #65CEA7, #4FBF95);
    display: inline-block;
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
    color: #353F4F;
    width: 210px;
    height: 90px;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    position: relative;
    overflow: hidden;
    vertical-align: top;
}

    .childMenuItem:hover {
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
        transform: translateY(-5px);
        background: linear-gradient(135deg, #4FBF95, #3CAE86);
    }

    .childMenuItem::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.1);
        transform: skewX(-45deg);
        transition: all 0.4s ease-in-out;
    }

    .childMenuItem:hover::before {
        left: 100%;
    }

    .childMenuItem .childMenuIcon {
        height: 32px;
        width: 32px;
        margin-right: 10px;
        vertical-align: middle;
        transition: transform 0.3s ease;
    }

    .childMenuItem:hover .childMenuIcon {
        transform: scale(1.2);
    }

    .childMenuItem a {
        text-decoration: none;
        color: #353F4F;
        text-transform: capitalize;
        vertical-align: middle;
        display: inline-block;
        transition: color 0.3s ease;
    }

        .childMenuItem a:hover {
            color: #ffffff;
            text-decoration: none;
        }


.childMenuHeading {
    font-family: erpRubik;
    text-transform: uppercase;
    width: 98%;
    border-bottom: solid 1px lightgrey;
    padding-bottom: 5px;
}

.childMenuHint {
    font-family: erpRubik;
    font-size: smaller;
    font-style: italic;
    text-align: center;
}

.childMenuIcon {
    display: block;
    background-image: url('../../images/icons/pencil-128.png');
    background-repeat: no-repeat;
    background-size: 32px 32px;
    margin-right: 10px;
    height: 32px;
    width: 32px;
}

#uLockScreen {
    display: none;
}

.unlockSection {
    left: 0px;
    right: 0px;
    top: 100px;
    position: fixed;
    text-align: center;
    z-index: 30001;
    cursor: no-drop;
}

.unlockPan {
    height: 140px;
    width: 400px;
    background-color: white;
    border-radius: 4px;
    padding: 10px;
    cursor: default;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 8px 0px #a1a1a1;
}

    .unlockPan .heading {
        display: block;
        background-color: #07294D;
        color: #FFF;
        padding: 20px;
        padding-top: 15px;
        padding-bottom: 15px;
        position: absolute;
        top: -13px;
        margin-left: 20px;
        border-radius: 5px 5px 0px 0px;
        text-transform: uppercase;
        font-size: 12px;
        font-weight: bold;
    }

    .unlockPan .content {
        padding: 10px;
        border: solid 1px #f1f1f1;
        border-radius: 4px;
    }

    .unlockPan .footer {
        margin-top: 10px;
    }

.pLockBackPan0 {
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    position: fixed;
    z-index: 29998;
    background-image: url('../../images/bg.png');
    background-color: #65CEA7;
    opacity: 0.2;
    cursor: no-drop;
}

.pLockBackPan {
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    position: fixed;
    z-index: 30000;
    background-image: url('../../images/bg.png');
    background-color: #65CEA7;
    opacity: 0.2;
    cursor: no-drop;
}

.pLockBackPan_Dark {
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    position: fixed;
    z-index: 30000;
    background-image: url('../../images/bg/astro-home-bg.jpg');
    background-color: #65CEA7;
    opacity: 1.0;
    cursor: no-drop;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.pLockBackPan_Full {
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    position: fixed;
    z-index: 30200;
    background-image: url('../../images/bg.png');
    background-color: #65CEA7;
    opacity: 0.2;
    cursor: no-drop;
}

.pLockBackPan_Form {
    top: 50px;
    left: 50px;
    right: 0px;
    bottom: 0px;
    position: fixed;
    z-index: 2;
    background-image: url('../../images/bg.png');
    background-color: #65CEA7;
    opacity: 0.2;
    cursor: no-drop;
}

.unlockSection_Form {
    left: 50px;
    right: 0px;
    top: 200px;
    position: fixed;
    text-align: center;
    z-index: 3;
    cursor: no-drop;
}

.unlockSection_Full {
    left: 50px;
    right: 0px;
    top: 200px;
    position: fixed;
    text-align: center;
    z-index: 30201;
    cursor: no-drop;
}

.unlockPan_Form {
    width: 400px;
    background-color: white;
    border-radius: 4px 4px 4px 4px;
    padding: 10px;
    cursor: default;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 14px 0px #a1a1a1;
    border: solid 1px #5AB6DF;
}

.unlockPanEmail {
    right: 10px;
    bottom: 0px;
    position: fixed;
    width: 750px;
    background-color: white;
    padding: 10px;
    cursor: default;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 14px 0px #a1a1a1;
    border: solid 1px #5AB6DF;
    border-bottom: none;
}

#divSubject {
    background-color: #c1c1c1;
    padding: 5px;
    font-size: 14px;
    width: auto;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.divSubject {
    background-color: #EFF0F4;
    padding: 5px;
    font-size: 14px;
    width: auto;
    margin-bottom: 5px;
    border: solid 1px #999;
}

#mailContent {
    height: 500px;
    overflow: auto;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 5px;
}

.mailContent {
    height: 500px;
    overflow: auto;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 5px;
}

div[name='SideModalSubject'] {
    background-color: lavender;
    padding: 10px;
    font-size: 14px;
    width: auto;
    text-align: left;
    text-transform: uppercase;
}

div[name='SideModalContent'] {
    max-height: 500px;
    overflow: auto;
    position: relative;
    margin-top: 10px;
    margin-bottom: 30px;
    text-align: left;
}

div[name='SideModalButtons'] {
    text-align: left;
    bottom: 0px;
    position: relative;
}

.usPic {
    display: block;
    height: 90px;
    width: 90px;
    background-color: #fff;
    border: solid 6px #fff;
    border-radius: 50px 50px 50px 50px;
    top: -70px;
    position: relative;
    background-image: url('../../images/icons/common-face-user.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.usLock {
    display: inline-block;
    height: 30px;
    width: 30px;
    background-color: #fff;
    border: solid 6px #fff;
    border-radius: 20px 20px 20px 20px;
    top: -90px;
    position: relative;
    background-image: url('../../images/icons/lock.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.uploadSection {
    width: 420px;
    background-color: white;
    border-radius: 4px 4px 4px 4px;
    padding: 10px;
    cursor: default;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 14px 0px #a1a1a1;
    border: solid 1px #5AB6DF;
}

.tHeading {
    text-align: right;
    width: 100%;
    font-family: erpRubik;
    font-size: large;
    font-weight: bold;
    color: #29447e;
}

/*--------------BOTTOM MENU AT index.aspx--------------------------*/
.bottomM {
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 10;
    position: absolute;
    font-family: erpRubik;
    font-size: 14px;
}

    .bottomM a {
        font-family: erpRubik;
        color: white;
        margin-left: 0px;
    }

        .bottomM a:hover {
            text-decoration: underline;
        }

.bottomMenu {
    background-color: #65CEA7;
    padding-top: 10px;
    padding-left: 20px;
    cursor: pointer;
    font-size: 14px;
}

    .bottomMenu:hover {
        opacity: 0.8;
    }

.bottomCpyR {
    border-top: solid 1px #e9e9e9;
    background-color: #353F4F;
    padding: 10px;
    padding-left: 20px;
    font-family: erpRubik;
    font-size: 14px;
    color: white;
}

.bmenu {
    background-color: #07294D;
    background-image: url('../../images/bg/pattern2.png');
    display: none;
    padding-left: 20px;
    padding-top: 10px;
    text-align: left;
}

    .bmenu ul {
        list-style: none;
        text-align: left;
    }

        .bmenu ul li a {
            font-size: 14px;
        }
/*-------------------------------------------------------------------------------*/
#bLogn {
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    position: fixed;
    z-index: 1500;
    background-color: #65CEA7;
    opacity: 0.4;
}

.logpan {
    padding: 20px;
    border-radius: 5px 5px 5px 5px;
    background-color: white;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
    width: 360px;
    z-index: 1600;
}

.cphw {
    text-align: right;
    width: 100%;
    border-bottom: solid 2px #0BD3E7;
    margin-top: 10px;
    padding-bottom: 10px;
    font-family: erpRubik;
    font-size: large;
    font-weight: bold;
    color: #29447e;
    margin-bottom: 20px;
}

.plinks {
    color: #006CB5;
    font-family: erpRubik;
    font-size: 14px;
    text-decoration: none;
}

    .plinks:hover {
        text-decoration: underline;
        color: red;
    }

/*-------------------------------INDEX PAGE NEWS-----------------------------------*/
#divNewsBack {
    top: 0px;
    bottom: 0px;
    left: 0px;
    background-color: white;
    opacity: 0.2;
    position: fixed;
    width: 320px;
    z-index: 8;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
}

#divNews {
    top: 0px;
    bottom: 0px;
    left: 10px;
    position: fixed;
    width: 300px;
    background-color: white;
    opacity: 0.6;
    z-index: 9;
}

    #divNews:hover {
        opacity: .9;
    }

#linkBack {
    top: 140px;
    bottom: 0px;
    right: 20px;
    background-color: white;
    opacity: 0.2;
    position: fixed;
    width: 420px;
    z-index: 8;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
    border-radius: 4px 4px 0px 0px;
}

#linkContent {
    top: 150px;
    bottom: 0px;
    right: 30px;
    background-color: white;
    position: fixed;
    width: 400px;
    z-index: 9;
    opacity: 0.6;
    border-radius: 4px 4px 0px 0px;
}

#linkContent2State {
    top: 150px;
    bottom: 0px;
    right: 30px;
    position: fixed;
    width: 380px;
    z-index: 10;
    padding: 10px;
    padding-top: 30px;
    border-radius: 4px 4px 0px 0px;
}

    #linkContent2State ul {
        list-style: none;
        margin-left: 30px;
        margin-bottom: 10px;
        margin-top: 5px;
    }

        #linkContent2State ul li a {
            text-decoration: none;
            color: black;
            font-family: erpRubik;
            font-size: 14px;
            text-transform: uppercase;
            background-image: url('../../images/bullet-arrow-right.png');
            background-position-x: 5px;
            background-position-y: 3px;
            background-repeat: no-repeat;
            padding-left: 25px;
        }

            #linkContent2State ul li a:hover {
                text-decoration: underline;
                color: green;
            }

.compLogo {
    background-image: url('../../images/kit-logo.png');
    background-size: 65% 80%;
    background-repeat: no-repeat;
    height: 80px;
    width: 250px;
    top: 10px;
    left: 20px;
    position: fixed;
    z-index: 15;
}

#divShadow {
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 300px;
    background-image: url('../../images/shadow/pattern.png');
    position: fixed;
}
/*--------------------------------------END----------------------------------------*/
/*---------------------------------STUDENT DASHBOARD-------------------------------*/
#studentDashboard {
    margin-top: 20px;
}

.studentDashboard {
    margin: 10px;
    display: inline-table;
    width: 330px;
    background-color: #ffffff;
    border-radius: 4px 4px 4px 4px;
    padding: 5px;
}

    .studentDashboard:hover {
        -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
        -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
        box-shadow: 0px 0px 4px 0px #a1a1a1;
    }

.SDHeading {
    padding: 10px;
    width: 100%;
    font-family: erpRubik;
    font-size: medium;
}

.SDContent {
    border: solid 1px #fff;
    border-top: none;
    border-radius: 0px 0px 4px 4px;
    background-color: #51D4CC;
    font-family: erpRubik;
    font-size: 14px;
    height: 280px;
    padding: 10px;
    overflow: hidden;
    position: relative;
}

    .SDContent:hover {
        overflow: auto;
    }
/*---------------------------------Employee DASHBOARD-------------------------------*/
#employeeDashboard {
    margin-top: 20px;
}

.employeeDashboard {
    margin: 10px;
    display: inline-table;
    width: 330px;
    background-color: #ffffff;
    border-radius: 4px 4px 4px 4px;
    padding: 5px;
}

    .employeeDashboard:hover {
        -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
        -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
        box-shadow: 0px 0px 4px 0px #a1a1a1;
    }

.EDHeading {
    padding: 10px;
    width: 100%;
    font-family: erpRubik;
    font-size: medium;
}

.EDContent {
    border: solid 1px #fff;
    border-top: none;
    border-radius: 0px 0px 4px 4px;
    background-color: #5AB6DF;
    font-family: erpRubik;
    font-size: 14px;
    height: 280px;
    padding: 10px;
    overflow: hidden;
    position: relative;
}

    .EDContent:hover {
        overflow: auto;
    }
/*---------------------------BUTTON CSS---------------------------------------------------------------*/
.cssdisabled {
    padding: 8px;
    padding-left: 40px;
    padding-right: 30px;
    background-color: #5CB85C;
    border: solid 1px green;
    border-radius: 4px 4px 4px 4px;
    cursor: pointer;
    margin: 5px;
    color: white;
    background-image: url('../../images/tick.png');
    background-size: 18px 18px;
    background-position-x: 10px;
    background-position-y: 8px;
    background-repeat: no-repeat;
    font-weight: bold;
    outline: none;
    background-color: #808080;
    cursor: no-drop;
    border: solid 1px #333;
    color: white;
}

.csssearch {
    padding: 8px;
    padding-left: 40px;
    padding-right: 30px;
    background-color: #5BC0DE;
    border: solid 1px #349AB8;
    border-radius: 2px;
    cursor: pointer;
    margin: 5px;
    color: white;
    background-image: url('../../images/basics-19-32.png');
    background-size: 18px 18px;
    background-position-x: 10px;
    background-position-y: 8px;
    background-repeat: no-repeat;
    font-weight: bold;
    outline: none;
    box-shadow: 2px 2px #999;
}

    .csssearch:hover {
        background-color: #3DB1D4;
    }

    .csssearch:focus {
        background-color: #3DB1D4;
    }

    .csssearch:active {
        box-shadow: 2px 2px #999;
        transform: translateY(1px);
    }

    .csssearch:disabled {
        background-color: #808080;
        cursor: no-drop;
        border: solid 1px #333;
        color: white;
    }

.csssave {
    padding: 8px;
    padding-left: 40px;
    padding-right: 30px;
    background-color: #5CB85C;
    border: solid 1px green;
    border-radius: 2px;
    cursor: pointer;
    margin: 5px;
    color: white;
    background-image: url('../../images/tick.png');
    background-size: 18px 18px;
    background-position-x: 10px;
    background-position-y: 8px;
    background-repeat: no-repeat;
    font-weight: bold;
    outline: none;
    box-shadow: 2px 2px #999;
}

    .csssave:hover {
        background-color: #47A447;
    }

    .csssave:focus {
        background-color: #47A447;
    }

    .csssave:active {
        box-shadow: 2px 2px #999;
        transform: translateY(1px);
    }

    .csssave:disabled {
        background-color: #808080;
        cursor: no-drop;
        border: solid 1px #333;
        color: white;
    }

.cssadd {
    padding: 8px;
    padding-left: 40px;
    padding-right: 30px;
    background-color: #5CB85C;
    border: solid 1px green;
    border-radius: 2px;
    cursor: pointer;
    margin: 5px;
    color: white;
    background-image: url('../../images/icons/addplus.png');
    background-size: 18px 18px;
    background-position-x: 10px;
    background-position-y: 8px;
    background-repeat: no-repeat;
    font-weight: bold;
    outline: none;
    box-shadow: 2px 2px #999;
}

    .cssadd:hover {
        background-color: #47A447;
    }

    .cssadd:focus {
        background-color: #47A447;
    }

    .cssadd:active {
        box-shadow: 2px 2px #999;
        transform: translateY(1px);
    }

    .cssadd:disabled {
        background-color: #808080;
        cursor: no-drop;
        border: solid 1px #333;
        color: white;
    }

.cssdownload {
    padding: 8px;
    padding-left: 40px;
    padding-right: 30px;
    background-color: #51D4CC;
    border: solid 1px #0fa49a;
    border-radius: 2px;
    cursor: pointer;
    margin: 5px;
    color: white;
    background-image: url('../../images/arrow_down.png');
    background-size: 18px 18px;
    background-position-x: 10px;
    background-position-y: 8px;
    background-repeat: no-repeat;
    font-weight: bold;
    outline: none;
    box-shadow: 2px 2px #999;
}

    .cssdownload:hover {
        background-color: #26c3b9;
    }

    .cssdownload:focus {
        background-color: #26c3b9;
    }

    .cssdownload:active {
        box-shadow: 2px 2px #999;
        transform: translateY(1px);
    }

    .cssdownload:disabled {
        background-color: #808080;
        cursor: no-drop;
        border: solid 1px #333;
        color: white;
    }

.cssrun {
    padding: 8px;
    padding-left: 40px;
    padding-right: 30px;
    background-color: #ffe547;
    border: solid 1px orange;
    border-radius: 2px;
    cursor: pointer;
    margin: 5px;
    color: #000;
    background-image: url('../../images/icons/next.png');
    background-size: 18px 18px;
    background-position-x: 10px;
    background-position-y: 8px;
    background-repeat: no-repeat;
    font-weight: bold;
    outline: none;
    box-shadow: 2px 2px #999;
}

    .cssrun:hover {
        background-color: #fedb0c;
    }

    .cssrun:active {
        box-shadow: 2px 2px #999;
        transform: translateY(1px);
    }

    .cssrun:disabled {
        background-color: #808080;
        cursor: no-drop;
        border: solid 1px #333;
        color: white;
    }

.cssmeeting {
    padding: 8px;
    padding-left: 40px;
    padding-right: 30px;
    background-color: #ffe547;
    border: solid 1px orange;
    border-radius: 2px;
    cursor: pointer;
    margin: 5px;
    color: #000;
    background-image: url('../../images/icons/newTab.png');
    background-size: 18px 18px;
    background-position-x: 10px;
    background-position-y: 8px;
    background-repeat: no-repeat;
    font-weight: bold;
    outline: none;
    box-shadow: 2px 2px #999;
}

    .cssmeeting:hover {
        background-color: #fedb0c;
    }

    .cssmeeting:active {
        box-shadow: 2px 2px #999;
        transform: translateY(1px);
    }

    .cssmeeting:disabled {
        background-color: #808080;
        cursor: no-drop;
        border: solid 1px #333;
        color: white;
    }

.cssok {
    padding: 8px;
    padding-left: 40px;
    padding-right: 30px;
    background-color: #e9e9e9;
    border: solid 1px #e9e9e9;
    border-radius: 2px;
    cursor: pointer;
    margin: 5px;
    color: #333;
    background-image: url('../../images/tick.png');
    background-size: 18px 18px;
    background-position-x: 10px;
    background-position-y: 8px;
    background-repeat: no-repeat;
    font-weight: bold;
    outline: none;
    box-shadow: 2px 2px #999;
}

    .cssok:hover {
        background-color: #EFF0F4;
    }

    .cssok:active {
        box-shadow: 2px 2px #999;
        transform: translateY(1px);
    }

    .cssok:disabled {
        background-color: #808080;
        cursor: no-drop;
        border: solid 1px #333;
        color: white;
    }

.cssupload {
    padding: 8px;
    padding-left: 40px;
    padding-right: 30px;
    background-color: #e9e9e9;
    border: solid 1px #e9e9e9;
    border-radius: 2px;
    cursor: pointer;
    margin: 5px;
    color: #333;
    background-image: url('../../images/icons/upload.png');
    background-size: 18px 18px;
    background-position-x: 10px;
    background-position-y: 8px;
    background-repeat: no-repeat;
    font-weight: bold;
    outline: none;
    box-shadow: 2px 2px #999;
}

    .cssupload:hover {
        background-color: #EFF0F4;
    }

    .cssupload:active {
        box-shadow: 2px 2px #999;
        transform: translateY(1px);
    }

    .cssupload:disabled {
        background-color: #808080;
        cursor: no-drop;
        border: solid 1px #333;
        color: white;
    }

.cssrefresh {
    padding: 8px;
    padding-left: 40px;
    padding-right: 30px;
    background-color: #e9e9e9;
    border: solid 1px #e9e9e9;
    border-radius: 2px;
    cursor: pointer;
    margin: 5px;
    color: #333;
    background-image: url('../../images/loading_dark_small.gif');
    background-size: auto auto;
    background-position-x: 0px;
    background-position-y: -4px;
    background-repeat: no-repeat;
    font-weight: bold;
    outline: none;
    box-shadow: 2px 2px #999;
}

    .cssrefresh:hover {
        background-color: #EFF0F4;
    }

    .cssrefresh:active {
        box-shadow: 2px 2px #999;
        transform: translateY(1px);
    }

    .cssrefresh:disabled {
        background-color: #808080;
        cursor: no-drop;
        border: solid 1px #333;
        color: white;
    }

.cssemail {
    padding: 8px;
    padding-left: 45px;
    padding-right: 30px;
    background-color: #51D4CC;
    border: solid 1px #4bb78f;
    border-radius: 2px;
    cursor: pointer;
    margin: 5px;
    color: white;
    background-image: url('../../images/mail-icon-128.png');
    background-size: 28px 28px;
    background-position-x: 10px;
    background-position-y: 1px;
    background-repeat: no-repeat;
    font-weight: bold;
    outline: none;
    box-shadow: 2px 2px #999;
}

    .cssemail:hover {
        background-color: #4bb78f;
    }

    .cssemail:active {
        box-shadow: 2px 2px #999;
        transform: translateY(1px);
    }

    .cssemail:disabled {
        background-color: #808080;
        cursor: no-drop;
        border: solid 1px #333;
        color: white;
    }

.csssms {
    padding: 8px;
    padding-left: 45px;
    padding-right: 30px;
    background-color: #51D4CC;
    border: solid 1px #4bb78f;
    border-radius: 2px;
    cursor: pointer;
    margin: 5px;
    color: white;
    background-image: url('../../images/icons/sms.png');
    background-size: 28px 28px;
    background-position-x: 10px;
    background-position-y: 1px;
    background-repeat: no-repeat;
    font-weight: bold;
    outline: none;
    box-shadow: 2px 2px #999;
}

    .csssms:hover {
        background-color: #4bb78f;
    }

    .csssms:active {
        box-shadow: 2px 2px #999;
        transform: translateY(1px);
    }

    .csssms:disabled {
        background-color: #808080;
        cursor: no-drop;
        border: solid 1px #333;
        color: white;
    }

.csspdf {
    padding: 8px;
    padding-left: 45px;
    padding-right: 30px;
    background-color: #51D4CC;
    border: solid 1px #4bb78f;
    border-radius: 2px;
    cursor: pointer;
    margin: 5px;
    color: white;
    background-image: url('../../images/icons/pdf.png');
    background-size: 28px 28px;
    background-position-x: 10px;
    background-position-y: 1px;
    background-repeat: no-repeat;
    font-weight: bold;
    outline: none;
    box-shadow: 2px 2px #999;
}

    .csspdf:hover {
        background-color: #4bb78f;
    }

    .csspdf:active {
        box-shadow: 2px 2px #999;
        transform: translateY(1px);
    }

    .csspdf:disabled {
        background-color: #808080;
        cursor: no-drop;
        border: solid 1px #333;
        color: white;
    }

.csscopy {
    padding: 8px;
    padding-left: 45px;
    padding-right: 30px;
    background-color: #51D4CC;
    border: solid 1px #4bb78f;
    border-radius: 2px;
    cursor: pointer;
    margin: 5px;
    color: white;
    background-image: url('../../images/icons/page_white_copy.png');
    background-size: 28px 28px;
    background-position-x: 10px;
    background-position-y: 1px;
    background-repeat: no-repeat;
    font-weight: bold;
    outline: none;
    box-shadow: 2px 2px #999;
}

    .csscopy:hover {
        background-color: #4bb78f;
    }

    .csscopy:active {
        box-shadow: 2px 2px #999;
        transform: translateY(1px);
    }

    .csscopy:disabled {
        background-color: #808080;
        cursor: no-drop;
        border: solid 1px #333;
        color: white;
    }

.csspaste {
    padding: 8px;
    padding-left: 45px;
    padding-right: 30px;
    background-color: #51D4CC;
    border: solid 1px #4bb78f;
    border-radius: 2px;
    cursor: pointer;
    margin: 5px;
    color: white;
    background-image: url('../../images/icons/paste_plain.png');
    background-size: 28px 28px;
    background-position-x: 10px;
    background-position-y: 1px;
    background-repeat: no-repeat;
    font-weight: bold;
    outline: none;
    box-shadow: 2px 2px #999;
}

    .csspaste:hover {
        background-color: #4bb78f;
    }

    .csspaste:active {
        box-shadow: 2px 2px #999;
        transform: translateY(1px);
    }

    .csspaste:disabled {
        background-color: #808080;
        cursor: no-drop;
        border: solid 1px #333;
        color: white;
    }

.cssexport {
    padding: 8px;
    padding-left: 40px;
    padding-right: 30px;
    background-color: #51D4CC;
    border: solid 1px #65CEA7;
    border-radius: 2px;
    cursor: pointer;
    margin: 5px;
    color: white;
    background-image: url('../../images/file_extension_xls.png');
    background-size: 28px 28px;
    background-position-x: 4px;
    background-position-y: 2px;
    background-repeat: no-repeat;
    font-weight: bold;
    outline: none;
    box-shadow: 2px 2px #999;
}

    .cssexport:hover {
        background-color: #65CEA7;
    }

    .cssexport:active {
        box-shadow: 2px 2px #999;
        transform: translateY(1px);
    }

    .cssexport:disabled {
        background-color: #808080;
        cursor: no-drop;
        border: solid 1px #333;
        color: white;
    }

.csszip {
    padding: 8px;
    padding-left: 40px;
    padding-right: 30px;
    background-color: #51D4CC;
    border: solid 1px #65CEA7;
    border-radius: 2px;
    cursor: pointer;
    margin: 5px;
    color: white;
    background-image: url('../../images/icons/file_extension_zip.png');
    background-size: 28px 28px;
    background-position-x: 4px;
    background-position-y: 2px;
    background-repeat: no-repeat;
    font-weight: bold;
    outline: none;
    box-shadow: 2px 2px #999;
}

    .csszip:hover {
        background-color: #65CEA7;
    }

    .csszip:disabled {
        background-color: #808080;
        cursor: no-drop;
        border: solid 1px #333;
        color: white;
    }

    .csszip:active {
        box-shadow: 2px 2px #999;
        transform: translateY(1px);
    }

.cssreset {
    padding: 8px;
    padding-left: 40px;
    padding-right: 30px;
    background-color: #fff;
    border: solid 1px #c1c1c1;
    border-radius: 2px;
    cursor: pointer;
    margin: 5px;
    color: black;
    background-image: url('../../images/refresh.png');
    background-size: 18px 18px;
    background-position-x: 10px;
    background-position-y: 8px;
    background-repeat: no-repeat;
    font-weight: bold;
    outline: none;
    box-shadow: 2px 2px #999;
}

    .cssreset:hover {
        background-color: #f1f1f1;
    }

    .cssreset:focus {
        background-color: #f1f1f1;
    }

    .cssreset:disabled {
        background-color: #808080;
        cursor: no-drop;
        border: solid 1px #333;
        color: white;
    }

    .cssreset:active {
        box-shadow: 2px 2px #999;
        transform: translateY(1px);
    }

.csspassive {
    padding: 8px;
    padding-left: 40px;
    padding-right: 30px;
    background-color: #fff;
    border: solid 1px #c1c1c1;
    border-radius: 2px;
    cursor: pointer;
    margin: 5px;
    color: black;
    background-image: url('../../images/icons/Less_2-64.png');
    background-size: 18px 18px;
    background-position-x: 10px;
    background-position-y: 8px;
    background-repeat: no-repeat;
    font-weight: bold;
    outline: none;
    box-shadow: 2px 2px #999;
}

    .csspassive:hover {
        background-color: #f1f1f1;
    }

    .csspassive:disabled {
        background-color: #808080;
        cursor: no-drop;
        border: solid 1px #333;
        color: white;
    }

    .csspassive:active {
        box-shadow: 2px 2px #999;
        transform: translateY(1px);
    }

.cssremove {
    padding: 8px;
    padding-left: 40px;
    padding-right: 30px;
    background-color: #FC8675;
    border: solid 1px red;
    border-radius: 2px;
    cursor: pointer;
    margin: 5px;
    color: white;
    background-image: url('../../images/bullet_deny.png');
    background-size: 18px 18px;
    background-position-x: 10px;
    background-position-y: 8px;
    background-repeat: no-repeat;
    font-weight: bold;
    outline: none;
    box-shadow: 2px 2px #999;
}

    .cssremove:hover {
        background-color: red;
    }

    .cssremove:active {
        box-shadow: 2px 2px #999;
        transform: translateY(1px);
    }

    .cssremove:disabled {
        background-color: #808080;
        cursor: no-drop;
        border: solid 1px #333;
        color: white;
    }

.cssblock {
    padding: 8px;
    padding-left: 40px;
    padding-right: 30px;
    background-color: #FC8675;
    border: solid 1px red;
    border-radius: 2px;
    cursor: pointer;
    margin: 5px;
    color: white;
    background-image: url('../../images/icons/block.png');
    background-size: 18px 18px;
    background-position-x: 10px;
    background-position-y: 8px;
    background-repeat: no-repeat;
    font-weight: bold;
    outline: none;
    box-shadow: 2px 2px #999;
}

    .cssblock:hover {
        background-color: red;
    }

    .cssblock:active {
        box-shadow: 2px 2px #999;
        transform: translateY(1px);
    }

    .cssblock:disabled {
        background-color: #808080;
        cursor: no-drop;
        border: solid 1px #333;
        color: white;
    }

.cssprint {
    padding: 8px;
    padding-left: 40px;
    padding-right: 30px;
    background-color: #65CEA7;
    border: solid 1px #4bb78f;
    border-radius: 2px;
    cursor: pointer;
    margin: 5px;
    color: white;
    background-image: url('../../images/print.png');
    background-size: 18px 18px;
    background-position-x: 10px;
    background-position-y: 8px;
    background-repeat: no-repeat;
    font-weight: bold;
    outline: none;
    box-shadow: 2px 2px #999;
}

    .cssprint:hover {
        background-color: #4bb78f;
    }

    .cssprint:active {
        box-shadow: 2px 2px #999;
        transform: translateY(1px);
    }

    .cssprint:disabled {
        background-color: #808080;
        cursor: no-drop;
        border: solid 1px #333;
        color: white;
    }

.cssback {
    padding: 8px;
    padding-left: 40px;
    padding-right: 30px;
    background-color: #fff;
    border: solid 1px #c1c1c1;
    border-radius: 2px;
    cursor: pointer;
    margin: 5px;
    color: black;
    background-image: url('../../images/undo.png');
    background-size: 18px 18px;
    background-position-x: 10px;
    background-position-y: 8px;
    background-repeat: no-repeat;
    font-weight: bold;
    outline: none;
    box-shadow: 2px 2px #999;
}

    .cssback:hover {
        background-color: #f1f1f1;
    }

    .cssback:active {
        box-shadow: 2px 2px #999;
        transform: translateY(1px);
    }

    .cssback:disabled {
        background-color: #808080;
        cursor: no-drop;
        border: solid 1px #333;
        color: white;
    }

.cssedit {
    padding: 8px;
    padding-left: 40px;
    padding-right: 30px;
    background-color: #fff;
    border: solid 1px #c1c1c1;
    border-radius: 2px;
    cursor: pointer;
    margin: 5px;
    color: black;
    background-image: url('../../images/editcontact.png');
    background-size: 18px 18px;
    background-position-x: 10px;
    background-position-y: 8px;
    background-repeat: no-repeat;
    font-weight: bold;
    outline: none;
    box-shadow: 2px 2px #999;
}

    .cssedit:hover {
        background-color: #f1f1f1;
    }

    .cssedit:focus {
        background-color: #f1f1f1;
    }

    .cssedit:disabled {
        background-color: #808080;
        cursor: no-drop;
        border: solid 1px #333;
        color: white;
    }

    .cssedit:active {
        box-shadow: 2px 2px #999;
        transform: translateY(1px);
    }

.cssattendance {
    padding: 8px;
    padding-left: 40px;
    padding-right: 30px;
    background-color: #FC8675;
    border: solid 1px red;
    border-radius: 2px;
    cursor: pointer;
    margin: 5px;
    color: white;
    background-image: url('../../images/icons/markAttendance.png');
    background-size: 18px 18px;
    background-position-x: 10px;
    background-position-y: 8px;
    background-repeat: no-repeat;
    font-weight: bold;
    outline: none;
    box-shadow: 2px 2px #999;
}

    .cssattendance:hover {
        background-color: #ff0000;
    }

    .cssattendance:active {
        box-shadow: 2px 2px #999;
        transform: translateY(1px);
    }

    .cssattendance:disabled {
        background-color: #808080;
        cursor: no-drop;
        border: solid 1px #333;
        color: white;
    }

.csssaveICON {
    padding: 4px;
    padding-left: 0px;
    padding-right: 0px;
    background-color: #5CB85C;
    border: solid 1px green;
    border-radius: 4px 4px 4px 4px;
    cursor: pointer;
    margin: 5px;
    color: white;
    background-image: url('../../images/correct.png');
    background-size: 24px 24px;
    background-position-x: 4px;
    background-position-y: 4px;
    background-repeat: no-repeat;
    font-weight: bold;
    height: 35px;
    width: 35px;
    outline: none;
}

    .csssaveICON:hover {
        background-color: #47A447;
    }

.cssaddICON {
    padding: 4px;
    padding-left: 0px;
    padding-right: 0px;
    background-color: #5CB85C;
    border: solid 1px green;
    border-radius: 4px 4px 4px 4px;
    cursor: pointer;
    margin: 5px;
    color: white;
    background-image: url('../../images/icons/addplus.png');
    background-size: 24px 24px;
    background-position-x: 4px;
    background-position-y: 4px;
    background-repeat: no-repeat;
    font-weight: bold;
    height: 35px;
    width: 35px;
    outline: none;
}

    .cssaddICON:hover {
        background-color: #47A447;
    }

.cssSettingICON {
    padding: 4px;
    padding-left: 0px;
    padding-right: 0px;
    background-color: #fff;
    border: solid 1px #c1c1c1;
    border-radius: 4px 4px 4px 4px;
    cursor: pointer;
    margin: 5px;
    color: white;
    background-image: url('../../images/icons/settingsDark.png');
    background-size: 24px 24px;
    background-position-x: 4px;
    background-position-y: 4px;
    background-repeat: no-repeat;
    font-weight: bold;
    height: 35px;
    width: 35px;
    outline: none;
}

    .cssSettingICON:hover {
        background-color: #EFF0F4;
    }
/*----------------------------END BUTTON STYLE-----------------------------------*/
.gridTable {
    border-collapse: collapse;
    width: 98%;
    font-family: erpRubik;
    font-size: 14px;
    /*margin-left: 10px;*/
}

    .gridTable:hover {
        -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
        -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
        box-shadow: 0px 0px 2px 0px #a1a1a1;
    }

    .gridTable tr th {
        border: solid 1px #c1c1c1;
        padding: 8px;
        padding-left: 5px;
        background-color: #5AB6DF;
        font-weight: bold;
        font-size: 14px;
        color: white;
        text-transform: uppercase;
        text-align: left;
        padding-top: 12px;
        padding-bottom: 12px;
    }

        .gridTable tr th.header {
            background-image: url(../../tablesorter/images/bg.gif);
            background-repeat: no-repeat;
            background-position: right center;
            padding-right: 20px;
            cursor: pointer;
        }

        .gridTable tr th.headerSortUp {
            background-image: url(../../tablesorter/images/asc.gif);
            background-color: #FC8675;
        }

        .gridTable tr th.headerSortDown {
            background-image: url(../../tablesorter/images/desc.gif);
            background-color: #65CEA7;
        }

    .gridTable tr td {
        border: solid 1px #c1c1c1;
        padding: 8px;
        padding-left: 5px;
        text-transform: uppercase;
        vertical-align: top;
    }

    .gridTable tbody tr:hover {
        background-color: white;
    }

    .gridTable .highlight {
        background-color: yellow;
    }
/*---------------------------GRID TABLE GRAY START------------------------------*/
.gridTable3 {
    border-collapse: collapse;
    width: 98%;
    font-family: erpRubik;
    font-size: 14px;
    /*margin-left: 10px;*/
}

    .gridTable3:hover {
        /*-moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
        -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
        box-shadow: 0px 0px 2px 0px #a1a1a1;*/
    }

    .gridTable3 tr th {
        border: solid 1px #a1a1a1;
        padding: 8px;
        padding-left: 5px;
        background-color: #c1c1c1;
        font-weight: bold;
        font-size: 14px;
        color: #333;
        text-transform: uppercase;
        text-align: left;
        padding-top: 12px;
        padding-bottom: 12px;
    }

        .gridTable3 tr th.header {
            background-image: url(../../tablesorter/images/bg.gif);
            background-repeat: no-repeat;
            background-position: right center;
            padding-right: 20px;
            cursor: pointer;
        }

        .gridTable3 tr th.headerSortUp {
            background-image: url(../../tablesorter/images/asc.gif);
            background-color: #FC8675;
        }

        .gridTable3 tr th.headerSortDown {
            background-image: url(../../tablesorter/images/desc.gif);
            background-color: #65CEA7;
        }

    .gridTable3 tr td {
        border: solid 1px #c1c1c1;
        padding: 8px;
        padding-left: 5px;
        text-transform: uppercase;
        vertical-align: top;
    }

    .gridTable3 tbody tr:hover {
        background-color: white;
    }
/*---------------------------GRID TABLE GRAY END------------------------------*/
/*--------------------------------GRID TABLE 2------------------------------*/
.gridTable2 {
    border-collapse: collapse;
    width: 98%;
    font-family: erpRubik;
    font-size: 14px;
    /*margin-left: 10px;*/
}

    .gridTable2:hover {
        -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
        -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
        box-shadow: 0px 0px 2px 0px #a1a1a1;
    }

    .gridTable2 tr th {
        border: solid 1px #333;
        padding: 8px;
        padding-left: 5px;
        background-color: #424F63;
        font-weight: bold;
        font-size: 14px;
        color: white;
        text-transform: uppercase;
        padding-top: 12px;
        padding-bottom: 12px;
    }

        .gridTable2 tr th.header {
            background-image: url(../../tablesorter/images/sort.png);
            background-repeat: no-repeat;
            background-position: right center;
            padding-right: 20px;
            cursor: pointer;
        }

        .gridTable2 tr th.headerSortUp {
            background-image: url(../../tablesorter/images/sort-desc.png);
            background-color: #FC8675;
        }

        .gridTable2 tr th.headerSortDown {
            background-image: url(../../tablesorter/images/sort-asc.png);
            background-color: #65CEA7;
        }

    .gridTable2 tr td {
        border: solid 1px #333;
        padding: 8px;
        padding-left: 5px;
        text-transform: uppercase;
        vertical-align: top;
    }

    .gridTable2 tr:hover {
        background-color: white;
    }

    .gridTable2 .highlight {
        background-color: yellow;
    }
/*--------------------------------------END--------------------------------*/
/*--------------------------------GRID TABLE Red------------------------------*/
.gridTableRed {
    border-collapse: collapse;
    width: 98%;
    font-family: erpRubik;
    font-size: 14px;
    /*margin-left: 10px;*/
}

    .gridTableRed:hover {
        -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
        -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
        box-shadow: 0px 0px 2px 0px #a1a1a1;
    }

    .gridTableRed tr th {
        border: solid 1px #FC8675;
        padding: 8px;
        padding-left: 5px;
        background-color: red;
        font-weight: bold;
        font-size: 14px;
        color: white;
        text-transform: uppercase;
        padding-top: 12px;
        padding-bottom: 12px;
    }

        .gridTableRed tr th.header {
            background-image: url(../../tablesorter/images/sort.png);
            background-repeat: no-repeat;
            background-position: right center;
            padding-right: 20px;
            cursor: pointer;
        }

        .gridTableRed tr th.headerSortUp {
            background-image: url(../../tablesorter/images/sort-desc.png);
            background-color: #FC8675;
        }

        .gridTableRed tr th.headerSortDown {
            background-image: url(../../tablesorter/images/sort-asc.png);
            background-color: #65CEA7;
        }

    .gridTableRed tr td {
        border: solid 1px #FC8675;
        padding: 8px;
        padding-left: 5px;
        text-transform: uppercase;
        vertical-align: top;
    }

    .gridTableRed tr:hover {
        background-color: white;
    }

    .gridTableRed .highlight {
        background-color: yellow;
    }
/*--------------------------------------END--------------------------------*/
/*--------------------------------GRID Time TABLE------------------------------*/
.gridTimeTable {
    border-collapse: collapse;
    width: 98%;
    font-family: erpRubik;
    font-size: 14px;
    /*margin-left: 10px;*/
}

    .gridTimeTable tr th {
        border: solid 1px #333;
        padding: 8px;
        padding-left: 5px;
        background-color: #424F63;
        font-weight: bold;
        font-size: 14px;
        color: white;
        text-transform: uppercase;
        vertical-align: top;
    }

    .gridTimeTable tr td {
        border: solid 1px #333;
        padding: 0px;
        text-transform: uppercase;
        vertical-align: top;
    }

        .gridTimeTable tr td:hover {
            background-color: white;
        }

        .gridTimeTable tr td hr {
            border: 0px;
            border-top: solid 1px black;
        }

/*--------------------------------------END--------------------------------*/
/*----------------------------------LINK STYLE-----------------------------*/
.lnkChange {
    text-decoration: none;
    color: black;
    background-image: url('../../images/loading_dark_small.gif');
    background-size: 34px 34px;
    background-repeat: no-repeat;
    padding-left: 30px;
    background-position-x: 0px;
    background-position-y: -9px;
    cursor: pointer;
}

    .lnkChange:hover {
        text-decoration: underline;
    }

.lnkRoute {
    text-decoration: none;
    color: black;
    background-image: url('../../images/icons/prgbranch.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    padding-left: 25px;
    background-position-x: 0px;
    background-position-y: -2px;
    cursor: pointer;
}

    .lnkRoute:hover {
        text-decoration: underline;
    }

.lnkView {
    text-decoration: none;
    color: black;
    background-image: url('../../images/view-32.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    padding-left: 25px;
    background-position-x: 0px;
    background-position-y: -2px;
    cursor: pointer;
}

    .lnkView:hover {
        text-decoration: underline;
    }

.lnkSubjects {
    text-decoration: none;
    color: black;
    background-image: url('../../images/icons/subjectSel.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    padding-left: 25px;
    background-position-x: 0px;
    background-position-y: -2px;
    cursor: pointer;
}

    .lnkSubjects:hover {
        text-decoration: underline;
    }

.lnkMarksheet {
    text-decoration: none;
    color: black;
    background-image: url('http://cdn.asteroid365.com/images/icons/result-sheet.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    padding-left: 25px;
    background-position-x: 0px;
    background-position-y: -2px;
    cursor: pointer;
}

    .lnkMarksheet:hover {
        text-decoration: underline;
    }

.lnkChart {
    text-decoration: none;
    color: black;
    background-image: url('../../images/icons/piechart.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    padding-left: 25px;
    background-position-x: 0px;
    background-position-y: -2px;
    cursor: pointer;
}

    .lnkChart:hover {
        text-decoration: underline;
    }

.lnkComments {
    text-decoration: none;
    color: black;
    background-image: url('../../images/icons/comments-2.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    padding-left: 25px;
    background-position-x: 0px;
    background-position-y: -2px;
    cursor: pointer;
}

    .lnkComments:hover {
        text-decoration: underline;
    }

.lnkShare {
    text-decoration: none;
    color: black;
    background-image: url('../../images/icons/share.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    padding-left: 25px;
    background-position-x: 0px;
    background-position-y: -2px;
    cursor: pointer;
}

    .lnkShare:hover {
        text-decoration: underline;
    }

.lnkFreezeView {
    text-decoration: none;
    color: black;
    background-image: url('../../images/icons/stopwatch.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    padding-left: 25px;
    background-position-x: 0px;
    background-position-y: -2px;
    cursor: pointer;
}

    .lnkFreezeView:hover {
        text-decoration: underline;
    }

.lnkCard {
    text-decoration: none;
    color: black;
    background-image: url('../../images/icons/profile.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    padding-left: 25px;
    background-position-x: 0px;
    background-position-y: -2px;
}

    .lnkCard:hover {
    }

.lnkEmail {
    text-decoration: none;
    color: black;
    background-image: url('../../images/icons/emailat.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    padding-left: 25px;
    background-position-x: 0px;
    background-position-y: 0px;
    cursor: pointer;
}

    .lnkEmail:hover {
        text-decoration: underline;
    }

.lnkMobile {
    text-decoration: none;
    color: black;
    background-image: url('../../images/icons/phone.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    padding-left: 25px;
    background-position-x: 0px;
    background-position-y: 0px;
    cursor: pointer;
}

    .lnkMobile:hover {
        text-decoration: underline;
    }

.lnkPrevious {
    background-color: #fff;
    padding: 10px;
    text-decoration: none;
    border: solid 1px #c1c1c1;
    color: black;
    background-image: url('../../images/icons/previous.png');
    background-size: 16px 16px;
    background-repeat: no-repeat;
    padding-left: 25px;
    background-position: center left;
    cursor: pointer;
    text-transform: uppercase;
}

    .lnkPrevious:hover {
        background-color: yellow;
        color: #000;
    }

.lnkStop {
    background-color: #fff;
    padding: 10px;
    text-decoration: none;
    border: solid 1px #c1c1c1;
    color: black;
    background-image: url('../../images/bullet_yellow.png');
    background-size: 20px 20px;
    background-repeat: no-repeat;
    padding-left: 25px;
    background-position: center left;
    cursor: pointer;
    text-transform: uppercase;
}

    .lnkStop:hover {
        background-color: yellow;
        color: #000;
    }

.lnkNext {
    background-color: #fff;
    padding: 10px;
    text-decoration: none;
    border: solid 1px #c1c1c1;
    color: black;
    background-image: url('../../images/icons/next.png');
    background-size: 16px 16px;
    background-repeat: no-repeat;
    padding-right: 25px;
    background-position: center right;
    cursor: pointer;
    text-transform: uppercase;
}

    .lnkNext:hover {
        background-color: #65CEA7;
        color: #fff;
    }

.lnkAdd {
    text-decoration: none;
    color: black;
    background-image: url('../../images/icons/addplus.png');
    background-size: 16px 16px;
    background-repeat: no-repeat;
    padding-left: 25px;
    background-position-x: 0px;
    background-position-y: 0px;
    cursor: pointer;
}

    .lnkAdd:hover {
        text-decoration: underline;
    }

.lnkAddMore {
    text-decoration: none;
    color: #fff;
    background-image: url('../../images/icons/addplus.png');
    background-size: 16px 16px;
    background-repeat: no-repeat;
    padding-left: 25px;
    background-position-x: 0px;
    background-position-y: 0px;
    cursor: pointer;
}

    .lnkAddMore:hover {
        text-decoration: underline;
    }

.lnkPrint {
    text-decoration: none;
    color: black;
    background-image: url('../../images/print.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    padding-left: 25px;
    background-position-x: 0px;
    background-position-y: -2px;
    cursor: pointer;
}

    .lnkPrint:hover {
        text-decoration: underline;
    }

.lnkViewStu {
    text-decoration: none;
    color: black;
    background-image: url('../../images/User_group.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    padding-left: 25px;
    background-position-x: 0px;
    background-position-y: -2px;
    cursor: pointer;
}

    .lnkViewStu:hover {
        text-decoration: underline;
    }

.lnkRecover {
    text-decoration: none;
    color: black;
    background-image: url('../../images/recover.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    padding-left: 25px;
    background-position-x: 0px;
    background-position-y: -2px;
    cursor: pointer;
}

    .lnkRecover:hover {
        text-decoration: underline;
    }

.lnkAction {
    text-decoration: none;
    color: black;
    background-image: url('../../images/tick.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    padding-left: 25px;
    background-position-x: 0px;
    background-position-y: -2px;
    cursor: pointer;
}

    .lnkAction:hover {
        text-decoration: underline;
    }

.lnkEdit {
    text-decoration: none;
    color: black;
    background-image: url('../../images/editcontact.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    padding-left: 25px;
    background-position-x: 0px;
    background-position-y: -2px;
    cursor: pointer;
}

    .lnkEdit:hover {
        text-decoration: underline;
    }

.lnkLock {
    text-decoration: none;
    color: black;
    background-image: url('../../images/icons/security_lock.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    padding-left: 25px;
    background-position-x: 0px;
    background-position-y: 0px;
    cursor: pointer;
}

    .lnkLock:hover {
        text-decoration: underline;
    }

.lnkUnlock {
    text-decoration: none;
    color: black;
    background-image: url('../../images/icons/security_unlock.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    padding-left: 25px;
    background-position-x: 0px;
    background-position-y: 0px;
    cursor: pointer;
}

    .lnkUnlock:hover {
        text-decoration: underline;
    }

.lnkPayFee {
    text-decoration: none;
    color: yellow;
    background-image: url('../../images/icons/Money.png');
    background-size: 22px 22px;
    background-repeat: no-repeat;
    padding-left: 25px;
    background-position-x: 0px;
    background-position-y: -2px;
    cursor: pointer;
    padding-bottom: 20px !important;
}

    .lnkPayFee:hover {
        text-decoration: underline;
    }

.lnkGeneral {
    text-decoration: none;
    color: black;
    background-image: url('../../images/icons/link.png');
    background-size: 28px 13px;
    background-repeat: no-repeat;
    padding-left: 30px;
    background-position-x: 0px;
    background-position-y: 2px;
    cursor: pointer;
}

    .lnkGeneral:hover {
        text-decoration: underline;
        color: red;
    }

.lnkCopy {
    text-decoration: none;
    color: black;
    background-image: url('../../images/icons/page_white_copy.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    padding-left: 25px;
    background-position-x: 0px;
    background-position-y: -2px;
    cursor: pointer;
}

    .lnkCopy:hover {
        text-decoration: underline;
    }

.lnkRemove {
    text-decoration: none;
    color: black;
    background-image: url('../../images/bullet_deny.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    padding-left: 25px;
    padding-top: 10px;
    background-position-x: 0px;
    background-position-y: 8px;
    cursor: pointer;
}

    .lnkRemove:hover {
        text-decoration: underline;
    }

.lnkMapping {
    text-decoration: none;
    color: black;
    background-image: url('https://cdn.asteroid365.com/images/icons/mapping.png');
    background-size: 24px 24px;
    background-repeat: no-repeat;
    padding-left: 25px;
    padding-top: 10px;
    background-position-x: 5px !important;
    background-position-y: 5px !important;
    cursor: pointer;
}

    .lnkMapping:hover {
        text-decoration: underline;
    }

.lnkDeactivate {
    text-decoration: none;
    color: black;
    background-image: url('../../images/icons/notification_error.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    padding-left: 25px;
    padding-top: 10px;
    background-position-x: 0px;
    background-position-y: 8px;
    cursor: pointer;
}

    .lnkDeactivate:hover {
        text-decoration: underline;
    }

.lnkActivate {
    text-decoration: none;
    color: black;
    background-image: url('../../images/icons/notification_done.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    padding-left: 25px;
    padding-top: 10px;
    background-position-x: 0px;
    background-position-y: 8px;
    cursor: pointer;
}

    .lnkActivate:hover {
        text-decoration: underline;
    }

.lnkPassive {
    text-decoration: none;
    color: black;
    background-image: url('../../images/icons/Less_2-64.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    padding-left: 25px;
    padding-top: 10px;
    background-position-x: 0px;
    background-position-y: 8px;
    cursor: pointer;
}

    .lnkPassive:hover {
        text-decoration: underline;
    }

.lnkActive {
    text-decoration: none;
    color: black;
    background-image: url('../../images/icons/Plus-64.png');
    background-size: 16px 16px;
    background-repeat: no-repeat;
    padding-left: 25px;
    padding-top: 10px;
    background-position-x: 0px;
    background-position-y: 8px;
    cursor: pointer;
}

    .lnkActive:hover {
        text-decoration: underline;
    }

.lnkActiveGreen {
    text-decoration: none;
    color: black;
    background-image: url('../../images/icons/plusGreen-64.png');
    background-size: 16px 16px;
    background-repeat: no-repeat;
    padding-left: 25px;
    padding-top: 10px;
    background-position-x: 0px;
    background-position-y: 8px;
    cursor: pointer;
}

    .lnkActiveGreen:hover {
        text-decoration: underline;
    }

.lnkReturn {
    text-decoration: none;
    color: black;
    background-image: url('../../images/icons/transfer.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    padding-left: 25px;
    padding-top: 10px;
    background-position-x: 0px;
    background-position-y: 8px;
    cursor: pointer;
}

    .lnkReturn:hover {
        text-decoration: underline;
    }

.lnkUse {
    text-decoration: none;
    color: black;
    background-image: url('../../images/useit.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    padding-left: 25px;
    padding-top: 10px;
    background-position-x: 0px;
    background-position-y: 8px;
    cursor: pointer;
}

    .lnkUse:hover {
        text-decoration: underline;
    }

.lnkDownload {
    text-decoration: none;
    color: black;
    background-image: url('../../images/arrow_down.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    padding-left: 25px;
    padding-top: 10px;
    background-position-x: 0px;
    background-position-y: 8px;
    cursor: pointer;
}

    .lnkDownload:hover {
        text-decoration: underline;
    }

.lnkLetter {
    text-decoration: none;
    color: black;
    background-image: url('../../images/icons/stuCertificate.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    padding-left: 25px;
    padding-top: 10px;
    background-position-x: 0px;
    background-position-y: 8px;
    cursor: pointer;
}

    .lnkLetter:hover {
        text-decoration: underline;
    }

.lnkSms {
    text-decoration: none;
    color: black;
    background-image: url('../../images/icons/sms.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    padding-left: 25px;
    padding-top: 10px;
    background-position-x: 0px;
    background-position-y: 8px;
    cursor: pointer;
}

    .lnkSms:hover {
        text-decoration: underline;
    }

.lnkExcel {
    text-decoration: none;
    color: black;
    background-image: url('../../images/file_extension_xls.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    padding-left: 25px;
    padding-top: 10px;
    background-position-x: 0px;
    background-position-y: 8px;
    cursor: pointer;
}

    .lnkExcel:hover {
        text-decoration: underline;
    }

.lnkWebLink {
    text-decoration: none;
    color: black;
    background-image: url('../../images/icons/www_page.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    padding-left: 25px;
    padding-top: 10px;
    background-position-x: 0px;
    background-position-y: 8px;
    cursor: pointer;
}

    .lnkWebLink:hover {
        text-decoration: underline;
    }

.lnkLink {
    text-decoration: none;
    color: black;
    background-image: url('../../images/icons/newTab.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    padding-left: 25px;
    padding-top: 10px;
    background-position-x: 0px;
    background-position-y: 8px;
    cursor: pointer;
}

    .lnkLink:hover {
        text-decoration: underline;
    }

.lnkLink2 {
    text-decoration: none;
    color: black;
    background-image: url('../../images/icons/chain-link.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    padding-left: 25px;
    padding-top: 10px;
    background-position-x: 0px;
    background-position-y: 8px;
    cursor: pointer;
}

    .lnkLink2:hover {
        text-decoration: underline;
    }

.lnkTimeTable {
    text-decoration: none;
    color: black;
    background-image: url('https://cdn.asteroid365.com/images/icons/calendar-icon.png');
    background-size: 24px 24px;
    background-repeat: no-repeat;
    padding-left: 25px;
    padding-top: 10px;
    background-position-x: 0px;
    background-position-y: 8px;
    cursor: pointer;
}

    .lnkTimeTable:hover {
        text-decoration: underline;
    }

.lnkUsers {
    text-decoration: none;
    color: black;
    background-image: url('../../images/icons/user_manage.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    padding-left: 25px;
    padding-top: 10px;
    background-position-x: 0px;
    background-position-y: 8px;
    cursor: pointer;
}

    .lnkUsers:hover {
        text-decoration: underline;
    }

.lnkUser {
    text-decoration: none;
    color: black;
    background-image: url('../../images/icons/user.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    padding-left: 25px;
    padding-top: 10px;
    background-position-x: 0px;
    background-position-y: 8px;
    cursor: pointer;
}

    .lnkUser:hover {
        text-decoration: underline;
    }

.lnkQuestion {
    text-decoration: none;
    color: black;
    background-image: url('../../images/icons/applications.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    padding-left: 25px;
    padding-top: 10px;
    background-position-x: 0px;
    background-position-y: 8px;
    cursor: pointer;
}

    .lnkQuestion:hover {
        text-decoration: underline;
    }

.lnkSettings {
    text-decoration: none;
    color: black;
    background-image: url('../../images/icons/basics-30-64.png');
    background-size: 22px 22px;
    background-repeat: no-repeat;
    padding-left: 25px;
    padding-top: 10px;
    background-position-x: 0px;
    background-position-y: 8px;
    cursor: pointer;
}

    .lnkSettings:hover {
        text-decoration: underline;
    }

.lnkProject {
    text-decoration: none;
    color: black;
    background-image: url('../../images/icons/workProfile.png');
    background-size: 22px 22px;
    background-repeat: no-repeat;
    padding-left: 25px;
    padding-top: 10px;
    background-position-x: 0px;
    background-position-y: 8px;
    cursor: pointer;
}

    .lnkProject:hover {
        text-decoration: underline;
    }

.lnkPdf {
    text-decoration: none;
    color: black;
    background-image: url('../../images/icons/pdf.png');
    background-size: 22px 22px;
    background-repeat: no-repeat;
    padding-left: 25px;
    padding-top: 10px;
    background-position-x: 0px;
    background-position-y: 8px;
    cursor: pointer;
}

    .lnkPdf:hover {
        text-decoration: underline;
    }

.lnkSchedule {
    text-decoration: none;
    color: black;
    background-image: url('https://cdn.asteroid365.com/images/icons/schedule.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    padding-left: 25px;
    padding-top: 10px;
    background-position-x: 0px;
    background-position-y: 8px;
    cursor: pointer;
}

    .lnkSchedule:hover {
        text-decoration: underline;
    }
/*----------------------------------END------------------------------------*/
.pageSection {
    padding-top: 20px;
    width: 800px;
    margin-bottom: 40px;
}

#pTitleHeading {
    text-align: left;
    margin-left: 10px;
    margin-right: 10px;
    font-family: erpRubik-bold;
    font-size: 14px;
    text-transform: uppercase;
    border-bottom: solid 1px lightgrey;
    padding-bottom: 5px;
}

.pTitleHeading {
    text-align: left;
    margin-left: 10px;
    margin-right: 10px;
    font-family: erpRubik-bold;
    font-size: 14px;
    text-transform: uppercase;
    border-bottom: solid 1px lightgrey;
    padding-bottom: 5px;
}

#pTitleHeading #pPath {
    font-family: erpRubik !important;
}
/*----------------------------------------------------------------------------*/
.bottomControls {
    margin-top: 30px;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    bottom: -1px;
    z-index: 3 !important; /*Keep this, as this helps to view actions on top of freeze table header*/
}

    .bottomControls .dropdown {
        -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
        -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
        box-shadow: 0px 0px 4px 0px #a1a1a1;
        box-shadow: 2px 2px #999;
        border-radius: 2px !important;
        margin: 5px !important;
    }

        .bottomControls .dropdown button {
            padding: 5px !important;
            padding-left: 20px !important;
            padding-right: 20px !important;
            border-radius: 2px !important;
            font-weight: bold !important;
            padding-bottom: 5px !important;
        }

.bottomControlsFreezeColor {
    background-color: white;
    border: solid 1px #a1a1a1;
    border-bottom: none;
    border-radius: 5px 5px 0px 0px;
    display: inline-block;
    padding: 0px;
    padding-left: 10px;
    padding-right: 10px;
    z-index: 4 !important;
    background-color: #EFF0F4;
    display: block;
    border: none;
    border-radius: 0px;
    padding-bottom: 10px;
    padding-top: 10px;
    /*position: fixed !important;*/
    /*width: 95% !important;*/
    width: auto !important;
    left: 0px !important;
}
/*---------------------------PROGRESS BAR START--------------------------------------------*/
#divProg {
    position: fixed;
    top: 50px;
    left: 50px;
    right: 0px;
    opacity: 0.8;
    z-index: 2000;
    overflow: hidden;
    display: none;
}

.prgStyle_Slide {
    background-image: url('../../images/gifimages/animation.gif');
    width: 100%;
    padding: 1px;
    padding-left: 10px;
    margin-bottom: 10px;
    font-family: erpRubik;
    font-size: xx-small;
    color: white;
    text-align: left;
}

#yProg {
    width: 400px;
    height: 2px;
    background-color: yellow;
    padding: 2px;
    position: relative;
    top: 0px;
    left: 0px;
    right: 0px;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
}

#gProg {
    width: 400px;
    height: 2px;
    background-color: #4cff00;
    padding: 2px;
    position: relative;
    top: -6px;
    left: 0px;
    right: 0px;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
}

#rProg {
    width: 400px;
    height: 2px;
    background-color: #f00;
    padding: 2px;
    position: relative;
    top: -12px;
    left: 0px;
    right: 0px;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
}

#bProg {
    width: 400px;
    height: 2px;
    background-color: #0094ff;
    padding: 2px;
    position: relative;
    top: -18px;
    left: 0px;
    right: 0px;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
}

#nProg {
    width: 400px;
    height: 2px;
    background-color: #fff;
    padding: 2px;
    position: relative;
    top: -24px;
    left: 0px;
    right: 0px;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
}
/*---------------------------PROGRESS BAR END---------------------------------------------*/
.menu2Logo {
    background-color: #EFF0F4;
    height: 80px;
    width: 100%;
}
/*---------------------------------HOME NEWS--------------------------------------------*/
.newsCss {
    list-style: none;
}

    .newsCss li {
        display: block;
        background-image: url('../../images/icons/Fire.png');
        background-size: 18px 18px;
        background-repeat: no-repeat;
        padding: 10px;
        padding-left: 30px;
        background-position-x: 5px;
        background-position-y: 5px;
        margin-bottom: 5px;
    }

        .newsCss li:hover {
            background-color: white;
            border-radius: 4px 4px 4px 4px;
            border: solid 1px #c1c1c1;
        }
/*---------------------------------END-------------------------------------------------*/
.fieldExpCss {
    list-style: none;
    width: 100%;
    text-align: left;
    margin-left: 20px;
}

    .fieldExpCss li {
        display: inline-block;
        width: 200px;
        vertical-align: top;
    }

.newsSlit {
    background-color: #0BD3E7;
    width: 405px;
    left: -30px;
    position: relative;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
    font-family: erpRubik;
    text-transform: uppercase;
    font-size: 14px;
    color: #003366;
    padding: 5px;
    padding-left: 30px;
}

.newsTri_left {
    width: 0;
    height: 0;
    border-right: 10px solid #EFF0F4;
    border-top: 10px solid #EFF0F4;
    border-left: 10px solid transparent;
    border-bottom: 10px solid transparent;
    left: -30px;
    position: relative;
    z-index: 0;
}

.newsTri_right {
    width: 0;
    height: 0;
    border-right: 10px solid transparent;
    border-top: 10px solid transparent;
    border-left: 10px solid #EFF0F4;
    border-bottom: 10px solid #EFF0F4;
    right: -390px;
    position: relative;
    z-index: 0;
}

.redSection {
    border: dashed 1px #c1c1c1;
    background-color: #ffcccc;
    padding: 3px;
    padding-left: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: left;
    font-family: erpRubik;
    font-size: smaller;
    font-style: italic;
    width: 100%;
}

/* Base Style for Note Section */
.css-note-section {
    border: dashed 2px #c1c1c1;
    background: linear-gradient(135deg, #ffe6e6, #ffcccc);
    padding: 15px;
    margin: 10px auto;
    text-align: justify;
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
    width: 95%;
    font-weight: 400;
    text-transform: capitalize;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding-top: 30px;
    margin-top: 20px !important;
}

    /* Hover Effect for Note Section */
    .css-note-section:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
        border-color: #ff9999;
    }

    /* Decorative Element for Note Section */
    .css-note-section:before {
        content: "📝";
        position: absolute;
        top: -15px;
        left: 15px;
        font-size: 20px;
        background: #ffcccc;
        border: 2px dashed #c1c1c1;
        border-radius: 50%;
        padding: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .css-note-section ul {
        margin-top: 10px;
        margin-left: 20px;
    }

/* Base Style for Warning Section */
.css-note-section-warning {
    border: dashed 2px #e6b800;
    background: linear-gradient(135deg, #fff4e5, #ffe0b3);
    padding: 15px;
    margin: 10px auto;
    text-align: justify;
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
    width: 95%;
    font-weight: 400;
    text-transform: capitalize;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding-top: 30px;
    margin-top: 20px !important;
}

    /* Hover Effect for Warning Section */
    .css-note-section-warning:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
        border-color: #ffcc00;
    }

    /* Decorative Element for Warning Section */
    .css-note-section-warning:before {
        content: "⚠️";
        position: absolute;
        top: -15px;
        left: 15px;
        font-size: 20px;
        background: #ffe0b3;
        border: 2px dashed #e6b800;
        border-radius: 50%;
        padding: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .css-note-section-warning ul {
        margin-top: 10px;
        margin-left: 20px;
    }

/* Green Note Section */
.css-note-section-green {
    border: dashed 2px #4bb78f;
    background: linear-gradient(135deg, #65cea7, #4bb78f);
    color: #fff;
    padding: 15px;
    margin: 10px auto;
    text-align: left;
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
    width: 95%;
    font-weight: 400;
    text-transform: capitalize;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding-top: 30px;
    margin-top: 20px !important;
}

    /* Hover Effect for Green Note Section */
    .css-note-section-green:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
        border-color: #39865e;
    }

    /* Decorative Element for Green Note Section */
    .css-note-section-green:before {
        content: "✅";
        position: absolute;
        top: -15px;
        left: 15px;
        font-size: 20px;
        background: #4bb78f;
        border: 2px dashed #39865e;
        border-radius: 50%;
        padding: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

/* Responsive Styling */
@media (max-width: 768px) {
    .css-note-section,
    .css-note-section-green {
        font-size: 14px;
        padding: 10px;
    }
}

/*------------------------CLASS MATES START------------------------*/
.cmatesDet {
    position: relative;
    margin-bottom: 30px;
    font-size: 14px;
    display: block;
}

.cmatesPic {
    height: 50px;
    width: 50px;
    border: solid 4px #fff;
    border-radius: 40px;
    background-image: url('../../images/icons/user-alt-64.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: white;
    text-align: center;
    display: inline-block;
}

    .cmatesPic .initials {
        position: relative;
        top: 18px; /* 25% of parent */
        font-size: 20px; /* 50% of parent */
        line-height: 12px; /* 50% of parent */
        color: #999;
        font-family: erpRubik;
        text-transform: uppercase;
    }

.cmatesArrow {
    width: 0;
    height: 0;
    border-right: 20px solid rgba(211,287,205,0.9);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    position: relative;
    left: -12px;
}

.cmatesInfo {
    background-color: rgba(211,287,205,0.9);
    border-radius: 4px 4px 4px 4px;
    width: 220px;
    float: right;
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-left: 8px;
    top: 0px;
    position: absolute;
    font-size: smaller;
}
/*------------------EMPLOYEE NAME CARD--------------------------*/
.empNameCard {
    background-color: white;
    height: 250px;
    width: 100%;
    display: none;
    top: -250px;
    left: 0px;
    position: absolute;
    z-index: 10;
    border-radius: 4px 4px 0px 0px;
}

.empPicCircle {
    height: 100px;
    width: 100px;
    border: solid 3px #65CEA7;
    background-size: 100% 100%;
    border-radius: 60px 60px 60px 60px;
    top: -50px;
    position: relative;
    background-color: white;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
}

.empNameCard_Details {
    top: -40px;
    position: relative;
    padding: 10px;
    text-align: left;
}

    .empNameCard_Details ul {
        list-style: none;
    }

        .empNameCard_Details ul li {
            display: block;
            margin-bottom: 5px;
        }

/* Disabled State */
.noDrop {
    background-color: #e9e9e9;
    cursor: not-allowed;
    border: 1px solid #c1c1c1;
    color: #a1a1a1;
    opacity: 0.8;
    text-align: center;
    padding: 10px;
    transition: all 0.3s ease;
}

    .noDrop:hover {
        background-color: #dcdcdc;
        border-color: #b0b0b0;
    }

/* Generic Open Section */
.openAll {
    background-color: #f2f1f1;
    border: 1px solid #c1c1c1;
    border-radius: 0px 0px 8px 8px;
    padding: 15px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    /*position: relative;
    z-index: 4;*/ /*Adding z-index and position to ensure the help icons inside the box should display correctly, and should not hide behind any button or other fields.*/
}

    .openAll:hover {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        /*transform: translateY(-2px);*/
    }

.openAll-footer {
    background-color: ghostwhite;
    border: 1px solid #c1c1c1;
    border-top: 0px;
    border-radius: 0px 0px 8px 8px;
    padding: 15px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    width: 100%;
    /*position: relative;
    z-index: 4;*/ /*Adding z-index and position to ensure the help icons inside the box should display correctly, and should not hide behind any button or other fields.*/
}

.no-round {
    border-radius: 0px !important;
}

/* Tabs Section */
.openAllTab {
    background-color: lightslategrey;
    border: 1px solid #a1a1a1;
    border-bottom: none;
    padding: 15px;
    width: 100%;
    color: #ffffff;
    /*font-weight: bold;
    
    text-align: center;*/
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    /* Hover Effect with Animation */
    .openAllTab:hover div {
        color: #ececec;
        animation: fadeIn 0.3s ease-in-out; /* Apply the shake animation */
    }

/* Open White Section */
.openWhite {
    background-color: #ffffff;
    border: 1px solid #c1c1c1;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

    .openWhite:hover {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

/*-------------------------ROLE USER MENU-----------------------*/
.pmenu {
    background-color: white;
    border-radius: 2px 2px 2px 2px;
    padding: 10px;
    width: 95%;
    margin-top: 10px;
    text-align: left;
    text-transform: uppercase;
}

    .pmenu:hover {
        -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
        -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
        box-shadow: 0px 0px 4px 0px #a1a1a1;
    }

    .pmenu span {
        padding: 10px;
        border: solid 1px green;
        border-radius: 4px 4px 4px 4px;
        margin: 10px;
        background-color: #65CEA7;
        display: inline-block;
        font-family: erpRubik;
        font-size: 14px;
        vertical-align: top;
        width: 200px;
    }

.mmtitle {
    font-size: 14px;
    text-align: left;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    font-weight: bold;
}

.mmActionC {
    background-color: #f2f1f1;
    padding: 10px;
    margin-top: 20px;
    border: solid 1px #fff;
    border-bottom: none;
}

.pcmenuList {
    border: solid 1px #fff;
    border-top: none;
    border-radius: 0px 0px 4px 4px;
    background-color: #51D4CC;
    font-family: erpRubik;
    font-size: 14px;
    padding: 10px;
}

.sbjSelL {
    list-style: none;
}

    .sbjSelL li {
        display: block;
        padding-bottom: 30px;
    }

.darkMsg {
    font-family: erpRubik;
    font-size: 14px;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
}

.ttdHeading {
    margin-top: 20px;
}

.fieldSection {
    width: 250px;
    right: 10px;
    bottom: 0px;
    position: fixed;
    background-color: white;
    padding: 5px;
    border-radius: 4px 4px 0px 0px;
    border: solid 1px #c1c1c1;
    border-bottom: none;
}

.fieldHeading {
    background-color: #f1f1f2;
    padding: 4px;
    border-radius: 4px 4px 4px 4px;
    cursor: pointer;
    text-transform: uppercase;
}

    .fieldHeading:hover {
        font-weight: bold;
    }

.fieldList {
    margin-top: 5px;
    background-color: #f1f1f2;
    padding: 4px;
    display: none;
    border-radius: 4px 4px 4px 4px;
    font-size: 14px;
}

    .fieldList a {
        font-size: 14px;
        color: black;
        text-decoration: none;
    }

        .fieldList a:hover {
            text-decoration: underline;
            color: red;
        }

hr {
    /*border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(101, 206, 167, 1.0), rgba(0,0,0,0));
    background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(101, 206, 167, 1.0), rgba(0,0,0,0));
    background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(101, 206, 167, 1.0), rgba(0,0,0,0));
    background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(101, 206, 167, 1.0), rgba(0,0,0,0));*/
    border-top: solid 1px #c1c1c1;
    height: 1px;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    background-image: none !important;
}

.hr {
    border-top: solid 1px #c1c1c1;
    height: 1px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-image: none !important;
}

.sentTim {
    font-size: smaller;
    text-align: left;
    color: gray;
    text-transform: uppercase;
    margin-top: 2px;
    font-style: italic;
}

.divMSuggest {
    background-color: white;
    width: 350px;
    height: 300px;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
    position: absolute;
    overflow: auto;
    display: none;
}

.topMenuSearch {
    list-style: none;
    margin: 10px;
}

    .topMenuSearch li {
        display: block;
        margin-bottom: 10px;
        background-color: #f1f1f1;
        padding: 4px;
        font-size: 14px;
        border-radius: 2px 2px 2px 2px;
    }

.topMenuA {
    text-decoration: none;
    color: black;
}

.topMenuSearch li:hover {
    background-color: #65CEA7;
}



#sortable {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    position: relative;
}

    #sortable li {
        margin: 0 3px 3px 3px;
        padding: 2px;
        padding-left: 5px;
        font-size: 1.4em;
        position: relative;
        display: block;
        margin-bottom: 30px;
    }

        #sortable li span {
            position: relative;
            margin-left: 5px;
        }

#navTSearch #selectedItem {
    background-color: #65CEA7;
    color: white;
}

.prog {
    display: block;
    height: 18px;
    width: 18px;
    background-image: url('../../images/progress.gif');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    display: none;
}

.rme {
    display: inline-block;
    height: 20px;
    width: 20px;
    background-image: url('../../images/bullet_deny.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    cursor: pointer;
    display: none;
}

.dnl {
    display: inline-block;
    height: 20px;
    width: 20px;
    background-image: url('../../images/arrow_down.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-left: 10px;
    cursor: pointer;
    display: none;
}
/*------------------------FORMS-------------------------------------*/
.divArea {
    background-color: white;
    padding-top: 50px;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
    padding: 10px;
    vertical-align: top;
}

#divCtrlPreview {
    padding: 10px;
    border: dashed 1px #0BD3E7;
    background-color: #f1f1f2;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 90%;
}

.ques {
    padding: 10px;
    margin-bottom: 10px;
}

    .ques:hover {
        background-color: #EFF0F4;
    }

.quesRemove {
    display: none;
    background-image: url('../../images/closegray.png');
    background-size: 15px auto;
    background-repeat: no-repeat;
    background-position-x: 5px;
    background-position-y: 5px;
    cursor: pointer;
    height: 24px;
    width: 24px;
    background-color: red;
    top: 10px;
    right: 10px;
    position: absolute;
    border-radius: 10px 10px 10px 10px;
    background-color: white;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
}

.ques:hover .quesRemove {
    display: block;
}

.quesEdit {
    display: none;
    background-image: url('../../images/editcontact.png');
    background-size: 15px auto;
    background-repeat: no-repeat;
    background-position-x: 5px;
    background-position-y: 5px;
    cursor: pointer;
    height: 24px;
    width: 24px;
    background-color: red;
    top: 10px;
    right: 45px;
    position: absolute;
    border-radius: 10px 10px 10px 10px;
    background-color: white;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
}

.ques:hover .quesEdit {
    display: block;
}

.dynmBody {
    /*background-image:url('../../images/background-texture/background.jpg');*/
    background-repeat: repeat;
    background-attachment: fixed;
}

.dynmPage {
    width: 800px;
    margin: 10px;
}

.dynmPageContent {
    background-color: white;
    padding: 10px;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 14px 0px #a1a1a1;
    border-radius: 10px 10px 10px 10px;
    font-family: erpRubik;
    margin-top: 20px;
    margin-bottom: 20px;
    border: solid 5px #f4feff;
}

.dynPtitle {
    text-align: center;
    font-size: large;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.quesHlptxt {
    color: #c1c1c1;
    font-family: 'Arial Unicode MS';
    font-size: 14px;
    font-weight: normal;
}

.quesBody {
    text-align: left;
    margin-top: 30px;
    padding-top: 20px;
    padding-left: 20px;
    padding-bottom: 20px;
    border-top: dashed 1px #65CEA7;
    border-bottom: dashed 1px #65CEA7;
}

    .quesBody dd {
        padding-left: 20px;
        margin-top: 5px;
        margin-bottom: 10px;
    }
/*------------------------------------------------------------------------------------*/
.rounderHeading {
    background-color: #fff;
    border-radius: 5px 5px 5px 5px;
    margin: 10px;
    padding: 10px;
    text-align: left;
    font-weight: bold;
}

.rounded-heading {
    background-color: #fff;
    border-radius: 5px 5px 0px 0px;
    margin-top: 10px;
    padding: 10px;
    text-align: left;
    font-weight: bold;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 2px 0px #a1a1a1;
}
/*------------------------TIME TABLE DRAGGING------------------------------*/
.periodDrag {
    z-index: 999;
}

    .periodDrag:hover {
        cursor: move;
    }

.drop-hover {
    background-color: yellow;
}
/*------------------------SEATING ARRANGEMENT---------------------------------*/
.classSeat {
    background-color: white;
    border: dashed 1px #f7f7f7;
    padding: 10px;
    margin: 10px;
}

    .classSeat:hover {
        -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
        -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
        box-shadow: 0px 0px 8px 0px #a1a1a1;
    }

.classRoom_AllSeat {
    padding: 10px;
    margin: 10px;
    background-color: #fff;
}

.rptclassSeat {
    background-color: white;
    border: dashed 1px #f7f7f7;
    padding: 4px;
    margin: 2px;
}

    .rptclassSeat:hover {
        -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
        -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
        box-shadow: 0px 0px 8px 0px #a1a1a1;
    }

.seatFooter {
    font-size: smaller;
    color: #a1a1a1;
    font-family: erpRubik;
    display: block;
    font-style: italic;
    background-color: #f7f7f7;
    margin-top: 2px;
    padding: 1px;
    vertical-align: bottom;
}

/*-------------------------------------------------------------------------*/
.myClassCss {
    padding: 10px;
    display: inline-block;
    margin: 10px;
    min-width: 350px;
    font-size: 14px;
}

    .myClassCss:hover {
        -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
        -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
        box-shadow: 0px 0px 8px 0px #a1a1a1;
        border-radius: 5px;
    }

.myClassRb {
    border: solid 1px #c1c1c1;
    border-radius: 5px;
    background-color: white;
    padding: 10px;
    font-size: medium;
}

.uroleSwitch {
    height: 25px;
    width: 25px;
    margin-right: 10px;
    background-image: url('../../images/icons/icard.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.prgCurItem {
    display: inline-table;
    width: 200px;
}

.payFeeBtn {
    color: red;
    font-weight: bold;
    background-color: yellow;
    border-radius: 5px;
    padding: 4px;
    padding-left: 20px;
    padding-right: 20px;
    border: solid thin #fff;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
    margin-left: 10px;
    cursor: pointer;
}

    .payFeeBtn:hover {
        -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
        -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
        box-shadow: 0px 0px 8px 0px #a1a1a1;
    }

#divStuPreferencePan {
    bottom: 0px;
    right: 60px;
    position: fixed;
    background-color: yellow;
    border: solid thin #333;
    padding-bottom: 10px;
    border-bottom: none;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
    border-radius: 5px 5px 0px 0px;
    display: none;
    z-index: 1;
}

.polls {
    padding: 10px;
    padding-left: 30px;
    border: dashed thin #c1c1c1;
    margin-bottom: 10px;
    position: relative;
}

    .polls:hover {
        background-color: #fff;
        -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
        -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
        box-shadow: 0px 0px 8px 0px #a1a1a1;
    }

.plogo {
    display: block;
    position: absolute;
    left: -20px;
    top: 10px;
    background-image: url('../../images/icons/Analytics-128.png');
    background-size: 90% 90%;
    height: 40px;
    width: 40px;
    background-color: #c1c1c1;
    background-repeat: no-repeat;
    border-radius: 20px;
}

.cssVersion {
    right: 10px;
    bottom: 5px;
    position: fixed;
    font-family: erpRubik;
    font-size: 10px;
}

.loginEvent {
    background-image: url('../../images/loginEvent/login-event.png');
    background-size: 85% 100%;
    background-repeat: no-repeat;
    height: 80px;
    width: 250px;
    position: relative;
    z-index: 15;
    background-position: center;
    margin-bottom: 20px;
}

.olLogHis {
    font-family: erpRubik;
    padding-left: 20px;
}

    .olLogHis li {
        margin-bottom: 10px;
    }

#evntMsg {
    top: 50px;
    left: 10px;
    position: fixed;
    padding: 10px;
    z-index: 99999;
    background-color: #65CEA7;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
    border-radius: 10px;
    padding-left: 140px;
    width: 280px;
    height: 100px;
    opacity: 0;
}

.ulFAQ {
    list-style: none;
}

    .ulFAQ li {
        margin-bottom: 10px;
    }

        .ulFAQ li a {
            background-image: url('../../images/icons/question.png');
            background-size: 16px 16px;
            padding-left: 30px;
            background-repeat: no-repeat;
            text-decoration: none;
            color: black;
            font-family: erpRubik;
        }

            .ulFAQ li a:hover {
                text-decoration: underline;
            }

.clsULAssignment {
    list-style: none;
}

    .clsULAssignment li {
        background-image: url('../../images/icons/Address-book.png');
        background-size: 16px 16px;
        padding-left: 30px;
        background-repeat: no-repeat;
        text-decoration: none;
        color: black;
        font-family: erpRubik;
        margin-bottom: 20px;
    }

        .clsULAssignment li:hover {
        }

.grayTTmsg {
    background-color: #f1f1f1;
    color: #333;
    padding: 2px;
    border: solid 2px gray;
    border-radius: 5px;
    position: absolute;
    bottom: -15px;
    right: -10px;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
    font-size: smaller;
    text-transform: uppercase;
}

.redTTmsg {
    background-color: red;
    color: white;
    padding: 2px;
    border: solid 2px #9d0b0b;
    border-radius: 5px;
    position: absolute;
    bottom: -15px;
    right: -10px;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
    font-size: smaller;
    text-transform: uppercase;
}

.greenTTMsg {
    background-color: #65CEA7;
    color: white;
    padding: 2px;
    border: solid 2px green;
    border-radius: 5px;
    position: absolute;
    bottom: -15px;
    right: -10px;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
    font-size: smaller;
    text-transform: uppercase;
}

#divRunningTime {
    right: 10px;
    bottom: 0px;
    position: fixed;
    text-transform: uppercase;
    font-weight: bold;
    background-color: white;
    padding: 5px;
    border-radius: 5px 5px 0px 0px;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
}

/*----------------FEEDBACK FORM QUESTION OPTIONS CSS START----------------------------*/
.feedbackQuesOption {
    list-style: none;
    vertical-align: top;
    display: table;
}

    .feedbackQuesOption li {
        display: table-row; /*For Vertical Repeatation of Options orderwise use table-cell for horizontal repeatation*/
    }
/*----------------FEEDBACK FORM QUESTION OPTIONS CSS END----------------------------*/

/*------------------------ONLINE EXAM ANSWER SHEET START----------------------------------*/
.quesSection {
    border: dashed thin #a1a1a1;
    margin-bottom: 20px;
}

    .quesSection:hover {
        -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
        -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
        box-shadow: 0px 0px 4px 0px #a1a1a1;
    }

.quesOnly {
    padding: 10px;
    margin-bottom: 10px;
    border-bottom: dashed thin #a1a1a1;
}

.quesFooter {
    padding: 10px;
    background-color: #e9e9e9;
    margin-top: 20px;
}

.quesOptions {
    padding-left: 20px;
}

    .quesOptions ul {
        list-style: none;
    }

        .quesOptions ul li {
            margin-top: 10px;
        }
/*------------------------ONLINE EXAM ANSWER SHEET END----------------------------------*/
#goBackOffice {
    top: 0px;
    right: 5px;
    position: fixed;
    z-index: 1000;
    background-color: white;
    padding: 5px;
    border-radius: 0px;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
}

.iconRotate {
    height: 25px;
    width: 25px;
    background-color: white;
    background-image: url('../../images/icons/basics-30-64.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 20px;
    -moz-animation: spin 2s infinite linear;
    -o-animation: spin 2s infinite linear;
    -webkit-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
    background-position-x: 0px;
    background-position-y: 0px;
    display: block;
}

@-moz-keyframes spin {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(359deg);
    }
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
    }
}

@-ms-keyframes spin {
    0% {
        -ms-transform: rotate(0deg);
    }

    100% {
        -ms-transform: rotate(359deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(359deg);
    }
}

.icon-rotate-90:before {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

.icon-rotate-180:before {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

.icon-rotate-270:before {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.icon-flip-horizontal:before {
    -webkit-transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

.icon-flip-vertical:before {
    -webkit-transform: scale(1, -1);
    -moz-transform: scale(1, -1);
    -ms-transform: scale(1, -1);
    -o-transform: scale(1, -1);
    transform: scale(1, -1);
}

a .icon-rotate-90:before, a .icon-rotate-180:before, a .icon-rotate-270:before, a .icon-flip-horizontal:before, a .icon-flip-vertical:before {
    display: inline-block;
}

/*---------------------------------TABULER UL START---------------------------*/
.tabulerUL {
    list-style: none;
    display: table;
    width: 100%;
}

    .tabulerUL li {
        display: inline-block;
        width: 50%;
    }

.tabulerUL4 {
    list-style: none;
    display: table;
    width: 100%;
}

    .tabulerUL4 li {
        display: inline-block;
        width: 25%;
    }

.tabulerUL7 {
    list-style: none;
    display: table;
    width: 100%;
    text-align: left;
}

    .tabulerUL7 li {
        display: inline-block;
        width: 14%;
        text-align: left;
    }

.tabulerUL-row {
    list-style: none;
    display: table;
    width: 100%;
}

    .tabulerUL-row li {
        display: block;
        width: 100%;
        margin-top: 5px;
    }
/*---------------------------------TABULER UL END---------------------------*/
/*---------------------------------CAREER HEADER START-------------------------*/
#googleMap {
    height: 450px;
}

.careerHeader {
    top: 0px;
    left: 0px;
    right: 0px;
    height: 350px;
    position: absolute;
    z-index: 3;
}

.careerFooter {
    min-height: 200px;
    position: relative;
    background-color: #444444;
    z-index: 14;
    padding-bottom: 30px;
}

    .careerFooter h2 {
        font-family: erpRubik;
        font-size: 20px;
        color: #EFF0F4;
        display: block;
        margin-bottom: 20px;
        font-weight: normal;
    }

.careerFooterHeading {
    padding: 1px;
    background-color: #51D4CC;
    font-weight: bold;
    text-transform: uppercase;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
}

.careerHeaderBG {
    top: 0px;
    left: 0px;
    right: 0px;
    height: 350px;
    position: absolute;
    border-bottom: solid 5px #65CEA7;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
    background-image: url('../../images/bg/1.jpg');
    background-size: 100% auto;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-origin: content-box;
    z-index: 1;
}

.careerFooterBG {
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 410px;
    position: absolute;
    border-bottom: solid 5px #65CEA7;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
    background-image: url('../../images/bg/1.jpg');
    background-size: 100% auto;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-origin: content-box;
    z-index: 1;
}

.careerHeaderTransparancy {
    top: 0px;
    left: 0px;
    right: 0px;
    height: 350px;
    position: absolute;
    background-color: white;
    opacity: 0.6;
    z-index: 2;
}

.careerForm {
    margin-top: 280px;
}
/*---------------------------------CAREER HEADER END-------------------------*/
/*-----------------------Gadget Box Start--------------------------*/
.gadgetBox {
    margin: 20px auto;
    padding: 5px;
    border: 1px solid #c2c0b8;
    background-color: #fff;
    -webkit-box-shadow: 0 0 60px 10px rgba(0, 0, 0, .1) inset, 0 5px 0 -4px #fff, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #fff, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #fff, 0 17px 0 -11px #c2c0b8;
    -moz-box-shadow: 0 0 60px 10px rgba(0, 0, 0, .1) inset, 0 5px 0 -4px #fff, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #fff, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #fff, 0 17px 0 -11px #c2c0b8;
    box-shadow: 0 0 60px 10px rgba(0, 0, 0, .1) inset, 0 5px 0 -4px #fff, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #fff, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #fff, 0 17px 0 -11px #c2c0b8;
}

.gadgetBox2 {
    margin: 20px auto;
    padding: 10px;
    position: relative;
    background: -webkit-gradient(linear, 100% 100%, 50% 10%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
    border: 1px solid #ccc;
    -webkit-box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);
    -webkit-border-bottom-right-radius: 60px 5px;
    margin-top: 0px;
}

    .gadgetBox2:before {
        content: '';
        width: 98%;
        z-index: -1;
        height: 100%;
        padding: 0 0 1px 0;
        position: absolute;
        bottom: 0;
        right: 0;
        background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f9f9f9), color-stop(.1,#fff));
        border: 1px solid #ccc;
        -webkit-box-shadow: 1px 1px 8px rgba(0,0,0, 0.1);
        -webkit-border-bottom-right-radius: 60px 5px;
        -webkit-transform: skew(2deg,2deg) translate(3px,8px);
    }

    .gadgetBox2:after {
        content: '';
        width: 98%;
        z-index: -1;
        height: 98%;
        padding: 0 0 1px 0;
        position: absolute;
        bottom: 0;
        right: 0;
        background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#f3f3f3), to(#f6f6f6), color-stop(.1,#fff));
        border: 1px solid #ccc;
        -webkit-box-shadow: 0px 0px 8px rgba(0,0,0, 0.1);
        -webkit-transform: skew(2deg,2deg) translate(-1px,2px);
    }
/*-----------------------Gadget Box End--------------------------*/
/*-------------------------APPLICANT START----------------------------*/
.applicantList {
    list-style: none;
}

    .applicantList li {
        display: inline-block;
        width: 300px;
    }

.applicantCard {
    background-color: #fff;
    padding: 10px;
    margin-right: 20px;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
    text-align: center;
    font-size: 14px;
    text-align: left;
}

.applicantCV {
    background-color: #65CEA7;
    margin-bottom: 30px;
    padding: 10px;
    text-align: center;
    margin-right: 20px;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
}

.applicantPhoto {
    border: double 2px #65CEA7;
    border-radius: 80px;
    height: 80px;
    width: 80px;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}
/*-------------------------APPLICANT END----------------------------*/
.careerHelpIcon {
    right: 0px;
    top: 50px;
    position: fixed;
    z-index: 20;
    background-color: white;
    background-color: #fff;
    padding: 10px;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
    background-image: url('../../Images/Icons/question.png');
    background-size: 24px auto;
    background-repeat: no-repeat;
    background-position-x: 5px;
    background-position-y: center;
    padding-left: 40px;
    border-left: solid 5px orange;
}

    .careerHelpIcon:hover {
        background-color: #f1f1f1;
        cursor: pointer;
    }

.ulFacTheme {
    list-style: none;
}

    .ulFacTheme li {
        display: inline-block;
        margin: 10px;
    }

        .ulFacTheme li div {
            padding: 5px;
            color: white;
        }

.smallBox {
    width: 100px;
}

.hotkey {
    float: right;
    position: relative;
    color: white;
    font-size: x-small;
    text-align: right;
    vertical-align: middle;
}

/*---------------------------3 STEPS ONLINE REGISTRATION-------------------------------------------*/
#leftBarOnlineRegistration {
    top: 50px;
    bottom: 0px;
    left: 0px;
    width: 180px;
    position: fixed;
    background-color: transparent;
    border-right: solid 1px #f9f9f9;
    z-index: 10;
    overflow-y: auto;
    overflow-x: hidden;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
    background-color: #EFF0F4;
}

#ulLeftBarOnlineRegistration {
    list-style: none;
    padding-top: 50px;
    width: inherit;
    top: 50px;
    left: 0px;
    width: 190px;
    position: fixed;
    background-color: transparent;
    z-index: 20;
}

    #ulLeftBarOnlineRegistration .active {
        background-color: #65CEA7;
        -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
        -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
        box-shadow: 0px 0px 2px 0px #a1a1a1;
        padding-left: 10px;
        border: solid 1px #FFF;
        border-right: solid 10px #FFF;
        border-left: none;
    }

    #ulLeftBarOnlineRegistration li {
        margin-bottom: 5px;
    }

        #ulLeftBarOnlineRegistration li:hover {
            background-color: #5BC0DE;
            width: 180px;
        }

        #ulLeftBarOnlineRegistration li a {
            display: block;
            padding: 10px;
            text-decoration: none;
            background-color: #353F4F;
            width: inherit;
            color: white;
            position: relative;
            width: 160px;
        }

            #ulLeftBarOnlineRegistration li a:hover {
                background-color: #5BC0DE;
                -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
                -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
                box-shadow: 0px 0px 2px 0px #a1a1a1;
            }

.studentPhoto {
    border: solid 1px #c1c1c1;
    height: 100px;
    width: 100px;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #f9f9f9;
}

.cssBirthDayMessage {
    background-image: url('../../Images/icons/cake.png');
    background-size: 32px 32px;
    background-position: left top;
    background-repeat: no-repeat;
    padding: 10px;
    padding-left: 50px;
    margin-top: 10px;
    margin-bottom: 10px;
    height: 40px;
    margin-left: 10px;
}

    .cssBirthDayMessage i {
        font-size: smaller;
        color: gray;
    }
/*----------------------USER PHOTO RESET ITEM CSS START--------------------------*/
.cssResetUserProfilePhoto {
    list-style: none;
    position: relative;
}

    .cssResetUserProfilePhoto li {
        display: inline-block;
        margin: 10px;
        background-color: #fff;
        border: solid 1px #a1a1a1;
        position: relative;
    }

        .cssResetUserProfilePhoto li:hover {
            -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
            -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
            box-shadow: 0px 0px 4px 0px #a1a1a1;
        }

        .cssResetUserProfilePhoto li .header {
            background-color: #f2f2f2;
            padding: 10px;
        }

            .cssResetUserProfilePhoto li .header .sno {
                position: absolute;
                left: -10px;
                top: -15px;
                padding: 4px;
                background-color: #65CEA7;
                color: #FFF;
                font-weight: bold;
                border-radius: 2px;
            }

        .cssResetUserProfilePhoto li .body {
            padding: 10px;
        }

        .cssResetUserProfilePhoto li div span {
            display: block;
        }

        .cssResetUserProfilePhoto li .UserPhoto {
            height: 120px;
            width: 120px;
        }

        .cssResetUserProfilePhoto li .UserSignature {
            height: 50px;
            width: 100px;
        }
/*----------------------USER PHOTO RESET ITEM CSS END--------------------------*/
/*----------------------MOBILE APP ICON START----------------------------------*/
.AvailableOnMobileIcon {
    background-image: url('../../Images/icons/mobile_basic_green.png');
    background-size: 24px 24px;
    height: 24px;
    width: 24px;
    background-repeat: no-repeat;
}

.NotAvailableOnMobileIcon {
    background-image: url('../../Images/icons/mobile_basic_red.png');
    background-size: 24px 24px;
    height: 24px;
    width: 24px;
    background-repeat: no-repeat;
}
/*----------------------MOBILE APP ICON END----------------------------------*/
/*--------------CONSENT FORM AT ONLINE REGISTRATION START----------------------*/
#divConsentBlock {
    top: 0px;
    left: 182px;
    right: 0px;
    bottom: 0px;
    position: fixed;
    background-color: #EFF0F4;
    z-index: 10;
    display: table-cell;
    vertical-align: middle;
    overflow: auto;
    padding: 20px;
}

#divConsentContent {
    padding: 10px;
    margin-top: 70px;
    margin-bottom: 20px;
    background-color: white;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 8px 0px #a1a1a1;
    border-radius: 5px;
}

#divConsentHeading {
    padding: 10px;
    border-top: solid 1px #EFF0F4;
    border-bottom: solid 1px #EFF0F4;
}
/*--------------CONSENT FORM AT ONLINE REGISTRATION END----------------------*/
/*---------------------PAY FEE LINK START-----------------------------------*/
.lnkpayfee {
    text-decoration: none;
    color: black;
    background-image: url('../../images/icons/rupees-black.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    padding-left: 25px;
    background-position-x: 0px;
    background-position-y: 0px;
    cursor: pointer;
    display: inline-block;
    margin-top: 20px;
    margin-bottom: 20px;
}

    .lnkpayfee:hover {
        text-decoration: underline;
    }

.lnkPay {
    text-decoration: none;
    color: black;
    background-image: url('../../images/icons/rupees-black.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    padding-left: 25px;
    background-position-x: 0px;
    background-position-y: 0px;
    cursor: pointer;
    display: inline-block;
}

    .lnkPay:hover {
        text-decoration: underline;
    }
/*---------------------PAY FEE LINK END-----------------------------------*/
.paymentgatewayicon {
    max-height: 20px;
}
/*-------------------------SMART TAG CSS START---------------------*/
.smarttag {
    font-family: erpRubik;
    font-size: 14px;
    background-image: url('../../Images/icons/user-alt-64.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    background-position-x: 0px;
    background-position-y: 0px;
    padding-left: 20px;
    text-align: left;
    color: #333;
    display: block;
    text-wrap: avoid;
}

    .smarttag label:hover {
        cursor: pointer;
    }

    .smarttag:hover {
        text-decoration: underline;
    }

.smarttaggroup {
    font-family: erpRubik;
    font-size: 14px;
    background-image: url('../../Images/icons/user_manage.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    background-position-x: 0px;
    background-position-y: 0px;
    padding-left: 24px;
    text-align: left;
    color: #333;
    display: block;
    text-wrap: avoid;
}

    .smarttaggroup:hover {
        text-decoration: underline;
    }

.smart_tag_modal_back {
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    position: fixed;
    z-index: 30001;
    background-image: url('../../images/bg.png');
    background-color: #65CEA7;
    opacity: 0.2;
    cursor: no-drop;
}

.smart_tag_modal_front_container {
    top: 0px;
    left: 0px;
    right: 0px;
    height: 500px;
    display: table-cell;
    position: fixed;
    text-align: center;
    z-index: 30001;
    cursor: no-drop;
    vertical-align: middle;
}

/* Container for the modal */
.smart_tag_modal_unlocked_section {
    margin-top: 100px;
    width: auto;
    max-width: 600px;
    background-color: white;
    border-radius: 8px;
    padding: 15px;
    cursor: default;
    position: relative;
    vertical-align: middle;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); /* Softer shadow */
    transition: all 0.3s ease-in-out;
}

    .smart_tag_modal_unlocked_section:hover {
        transform: translateY(-5px); /* Subtle hover effect */
    }

/* Heading with a soft background */
.smart_tag_modal_heading {
    background-color: lightgray;
    border: solid 1px #c1c1c1;
    padding: 10px;
    border-radius: 6px;
    font-size: 1.2em;
    color: #333;
    font-weight: 600;
    transition: all 0.3s ease;
}

    .smart_tag_modal_heading:hover {
        background-color: #e0e4ea; /* Slight darkening on hover */
    }

/* Modal body with padding and left alignment */
.smart_tag_modal_body {
    padding: 20px;
    position: relative;
    padding-left: 80px; /* Increased padding for photo placement */
    word-break: break-word;
    color: #555;
    font-size: 1em;
}

    .smart_tag_modal_body table tr th {
        font-weight: bold;
        text-align: left;
    }

/* Sticky footer with contrast */
.smart_tag_modal_footer {
    margin-top: 20px;
    position: sticky;
    bottom: 0px;
    background-color: #fff;
    padding: 15px 0;
    font-size: 0.9em;
    color: #777;
}

/* User photo section */
.smart_tag_modal_user_photo, .user-photo {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    border: solid 4px #FFF;
    background-color: #f1f1f1; /* Slight gray background */
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Position the photo properly */
.smart_tag_modal_user_photo {
    position: absolute;
    left: -60px;
    top: -80px;
}

    .smart_tag_modal_user_photo:hover, .user-photo:hover {
        transform: scale(1.1); /* Slight zoom on hover */
        box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
    }

/* Additional user photo effect */
.user-photo {
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

/*-------------------------SMART TAG CSS END---------------------*/
.divFooterNote {
    bottom: 0px;
    right: 0px;
    left: 0px;
    padding: 5px;
    background-color: red;
    color: white;
    position: fixed;
    text-transform: uppercase;
    font-weight: normal;
    z-index: 2000;
    text-align: center;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
}

.divTabularControl {
    display: inline-block;
    min-width: 200px;
    background-color: #FFF;
    padding: 5px;
    margin: 10px;
    border: solid 1px #c1c1c1;
}

    .divTabularControl:hover {
        -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
        -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
        box-shadow: 0px 0px 4px 0px #a1a1a1;
    }

    .divTabularControl span {
        background-color: #EFF0F4;
        padding: 2px;
        display: block;
        border-radius: 2px;
        padding-left: 10px;
        margin-bottom: 10px;
    }

.css-attendance-register-absent-status {
    font-weight: bold;
    color: red;
}

.css-attendance-register-present-status {
    font-weight: bold;
    color: #4bb78f;
}

.css-attendance-register-leave-status {
    display: block;
    padding: 2px;
    background-color: red;
    color: #fff;
    border: solid 1px #333;
    border-radius: 2px;
    font-size: x-small;
    margin-top: 2px;
}

.css-attendance-register-remark-sandwich {
    display: block;
    padding: 2px;
    background-color: #FC8675;
    color: #333;
    border: solid 1px #333;
    border-radius: 2px;
    font-size: x-small;
    margin-top: 2px;
}

.css-attendance-register-remark-status {
    display: block;
    padding: 2px;
    background-color: yellow;
    color: #333;
    border: solid 1px #333;
    border-radius: 2px;
    font-size: x-small;
    margin-top: 2px;
}

.css-attendance-register-sandwich-off {
    display: block;
    padding: 2px;
    background-color: #FC8675;
    color: #333;
    border: solid 1px #333;
    border-radius: 2px;
    font-size: x-small;
    margin-top: 2px;
}

.css-attendance-register-week-off {
    display: block;
    padding: 2px;
    background-color: #65CEA7;
    color: #333;
    border: solid 1px #333;
    border-radius: 2px;
    font-size: x-small;
    margin-top: 2px;
}

.css-attendance-register-college-off {
    display: block;
    padding: 2px;
    background-color: #FFF;
    color: #333;
    border: solid 1px #333;
    border-radius: 2px;
    font-size: x-small;
    margin-top: 2px;
}

.css-attendance-not-marked {
    background-color: yellow;
    border: solid 1px #ffd800;
    padding: 4px;
    bottom: 0px;
    display: block;
    vertical-align: bottom;
    margin-top: 10px;
}

.css-attendance-marked-onleave {
    background-color: orange;
    border: solid 1px #ffd800;
    padding: 4px;
    bottom: 0px;
    display: block;
    vertical-align: bottom;
    margin-top: 10px;
}

.css-attendance-marked-absent {
    background-color: red;
    color: #FFF;
    border: solid 1px #9d0b0b;
    padding: 4px;
    bottom: 0px;
    display: block;
    vertical-align: bottom;
    margin-top: 10px;
}

.css-attendance-marked-present {
    background-color: #4bb78f;
    color: #FFF;
    border: solid 1px green;
    padding: 4px;
    bottom: 0px;
    display: block;
    vertical-align: bottom;
    margin-top: 10px;
}

.css-attendance-event {
    background-color: yellow;
    display: inline-block;
    padding: 5px;
    border: solid 1px #ffd800;
    color: #333;
    border-radius: 50px;
    margin-left: 10px;
}

.css-attendance-class-suspended {
    background-color: #d50a0a;
    color: #FFF;
    border: solid 1px #9d0b0b;
    padding: 4px;
    bottom: 0px;
    display: block;
    vertical-align: bottom;
    margin-top: 10px;
}

.css-freeze-attendance {
    background-color: #FC8675;
    border: solid 1px #c1c1c1;
    color: #FFF;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 2px 0px #a1a1a1;
    padding: 10px;
    border-radius: 4px;
    width: 92%;
}

/*#divPrepareDashboard {
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    position: fixed;
    z-index: 99999;
    background-color: #EFF0F4;
    display: none;
    padding-top: 50px;
    padding-left: 100px;
    font-family: erpRubik;
    font-size: 14px;*/
/*text-shadow: 2px 2px 1px #c1c1c1;*/
/*}

    #divPrepareDashboard .progressbar {
        margin-top: 10px;
        display: block;
        height: 10px;
        width: 450px;
        background-image: url('../../Images/GIFImages/animation.gif');
        background-repeat: repeat;
        border: solid 1px #FFF;
    }*/

#divPrepareDashboard {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1e88e5, #42a5f5);
    color: white;
    font-family: erpRubik;
    font-size: 18px;
    text-align: center;
    z-index: 99999;
    overflow: hidden;
    animation: fadeIn 0.2s ease;
}
    /* Icon container with background image */
    #divPrepareDashboard .icon {
        width: 64px;
        height: 64px;
        background-image: url('https://cdn.asteroid365.com/images/icons/home-icons/graph.png');
        background-size: cover;
        background-position: center;
        margin-bottom: 15px;
        animation: pulse 1.5s infinite;
    }

    #divPrepareDashboard .progressbar {
        position: relative;
        width: 80%;
        max-width: 500px;
        height: 8px;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 5px;
        margin-top: 20px;
        overflow: hidden;
    }

        #divPrepareDashboard .progressbar::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right, #81d4fa, #29b6f6, #0288d1);
            animation: progressBarAnimation 2s infinite;
            border-radius: 5px;
        }

/* Keyframes for fade-in effect */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Keyframes for progress bar animation */
@keyframes progressBarAnimation {
    0% {
        left: -100%;
    }

    50% {
        left: 0;
    }

    100% {
        left: 100%;
    }
}

.user-voice {
    /* Start the shake animation and make the animation last for 0.5 seconds */
    animation: shake 0.5s;
    /* When the animation is finished, start again */
    animation-iteration-count: 10;
}

@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

.css-important-documents {
    list-style: none;
}

    .css-important-documents li {
        display: block;
    }

        .css-important-documents li h2 {
            background-image: url('../../Images/GIFImages/gif-new.gif');
            background-size: auto 20px;
            background-repeat: no-repeat;
            background-position: left top;
            padding-left: 30px;
            font-size: 14px;
            display: block;
            min-height: 20px;
        }

        .css-important-documents li i {
            display: block;
            padding-left: 30px;
        }

        .css-important-documents li a {
            display: block;
            text-decoration: none;
            color: #FFF;
            font-weight: bold;
            margin-left: 30px;
            margin-bottom: 20px;
            margin-top: 5px;
        }

            .css-important-documents li a:hover {
                text-decoration: underline;
            }

.css-badge {
    text-align: center;
    vertical-align: central;
    background-color: red;
    display: inline-block;
    top: 5px;
    right: -10px;
    position: absolute;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    color: white;
    border-radius: 20px;
    font-size: smaller;
}

.css-badge-red {
    text-align: center;
    vertical-align: central;
    background-color: red;
    display: inline-block;
    position: relative;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 5px;
    margin-right: 5px;
    color: #FFF;
    border-radius: 20px;
    font-size: smaller;
    font-weight: bold;
}

.css-badge-green {
    text-align: center;
    vertical-align: central;
    background-color: #4bb78f;
    display: inline-block;
    position: relative;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 5px;
    margin-right: 5px;
    color: #FFF;
    border-radius: 20px;
    font-size: smaller;
    font-weight: bold;
}

.css-institute-list {
    list-style: square;
    font-family: erpRubik;
    font-size: 14px;
    margin-top: 20px;
    color: #EFF0F4;
}

    .css-institute-list li {
        margin-bottom: 10px;
    }

        .css-institute-list li a {
            text-decoration: none;
            color: #EFF0F4;
        }

            .css-institute-list li a:hover {
                text-decoration: none;
                color: #c60303;
            }

/*Institute Contact Address Start*/
.css-institute-address {
    font-family: erpRubik;
    font-size: 14px;
    color: #EFF0F4;
}

    .css-institute-address .instname {
        font-size: 15px !important;
    }

    .css-institute-address .phone {
        margin-top: 10px;
    }

    .css-institute-address .email {
        background-image: url('../../Images/icons//set1/email.png');
        background-size: 18px 18px;
        background-repeat: no-repeat;
        padding-left: 20px;
        background-position: -2px -2px;
        margin-top: 5px;
    }

    .css-institute-address .website {
        background-image: url('../../Images/icons//set1/onlineAdmission.png');
        background-size: 16px 16px;
        background-repeat: no-repeat;
        padding-left: 20px;
        background-position: 0px 0px;
        margin-top: 10px;
    }

.css-user-guide {
    list-style: none;
}

    .css-user-guide li {
        display: inline-block;
        width: 200px;
        border: solid 1px #c1c1c1;
        padding: 10px;
        margin: 10px;
    }

        .css-user-guide li .title {
            display: block;
            background-image: url('../../images/icons/pdf.png');
            background-size: 24px auto;
            background-repeat: no-repeat;
            background-position: top top;
            min-height: 30px;
            padding-left: 30px;
            vertical-align: top;
        }

        .css-user-guide li .description {
            display: block;
            font-style: italic;
            font-size: smaller;
        }

        .css-user-guide li a {
            margin-top: 10px;
            display: block;
            background-color: #65CEA7;
            color: #fff;
            text-decoration: none;
            padding: 5px;
            text-align: center;
        }

            .css-user-guide li a:hover {
                background-color: #4bb78f;
            }

.css-table-total-record-heading {
    color: #999;
    font-family: erpRubik;
    text-transform: uppercase;
    font-size: 12px;
    margin-bottom: 10px;
}


/*-------------Bootstrap Start-------------*/
.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 5px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid \9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    top: -1px !important;
    position: relative;
}

.customdropdown {
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
    box-shadow: 2px 2px #999;
    border-radius: 2px !important;
    top: -2px !important;
}

    .customdropdown button {
        padding: 5px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        border-radius: 2px !important;
        font-weight: bold !important;
        padding-bottom: 5px !important;
    }

.dropdown {
    position: relative;
}

.dropdown-toggle {
    padding-top: 2px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 2px !important;
    border-radius: 0px !important;
    font-size: small !important;
}

    .dropdown-toggle:focus {
        outline: none !important;
    }

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

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

    .dropdown-menu .divider {
        height: 1px;
        /*margin: 9px 0;*/
        overflow: hidden;
        background-color: #e5e5e5;
    }

    .dropdown-menu > li > a {
        display: block;
        padding: 10px 20px;
        clear: both;
        font-weight: 400;
        line-height: 1.42857143;
        color: #333333;
        white-space: nowrap;
        padding-left: 35px;
        background-position-x: 10px;
        background-position-y: center;
        font-size: small !important;
    }

        .dropdown-menu > li > a:hover,
        .dropdown-menu > li > a:focus {
            color: #262626;
            text-decoration: none;
            background-color: #f5f5f5;
        }

    .dropdown-menu > .active > a,
    .dropdown-menu > .active > a:hover,
    .dropdown-menu > .active > a:focus {
        color: #fff;
        text-decoration: none;
        background-color: #337ab7;
        outline: 0;
    }

    .dropdown-menu > .disabled > a,
    .dropdown-menu > .disabled > a:hover,
    .dropdown-menu > .disabled > a:focus {
        color: #777777;
    }

        .dropdown-menu > .disabled > a:hover,
        .dropdown-menu > .disabled > a:focus {
            text-decoration: none;
            cursor: not-allowed;
            background-color: transparent;
            background-image: none;
            filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
        }

.open > .dropdown-menu {
    display: block;
}

.open > a {
    outline: 0;
}

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

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

.dropdown-header {
    display: block;
    padding: 3px 20px;
    font-size: 12px;
    line-height: 1.42857143;
    color: #777777;
    white-space: nowrap;
}

.dropdown-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 990;
}

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

.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
    content: "";
    border-top: 0;
    border-bottom: 4px dashed;
    border-bottom: 4px solid \9;
}

.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
    top: auto;
    bottom: 100%;
    margin-bottom: 2px;
}

@media (min-width: 768px) {
    .navbar-right .dropdown-menu {
        right: 0;
        left: auto;
    }

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

.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

    .btn-default:focus,
    .btn-default.focus {
        color: #333;
        background-color: #e6e6e6;
        border-color: #8c8c8c;
    }

    .btn-default:hover {
        color: #333;
        background-color: #e6e6e6;
        border-color: #adadad;
    }

    .btn-default:active,
    .btn-default.active,
    .open > .dropdown-toggle.btn-default {
        color: #333;
        background-color: #e6e6e6;
        background-image: none;
        border-color: #adadad;
    }

        .btn-default:active:hover,
        .btn-default.active:hover,
        .open > .dropdown-toggle.btn-default:hover,
        .btn-default:active:focus,
        .btn-default.active:focus,
        .open > .dropdown-toggle.btn-default:focus,
        .btn-default:active.focus,
        .btn-default.active.focus,
        .open > .dropdown-toggle.btn-default.focus {
            color: #333;
            background-color: #d4d4d4;
            border-color: #8c8c8c;
        }

    .btn-default.disabled:hover,
    .btn-default[disabled]:hover,
    fieldset[disabled] .btn-default:hover,
    .btn-default.disabled:focus,
    .btn-default[disabled]:focus,
    fieldset[disabled] .btn-default:focus,
    .btn-default.disabled.focus,
    .btn-default[disabled].focus,
    fieldset[disabled] .btn-default.focus {
        background-color: #fff;
        border-color: #ccc;
    }

    .btn-default .badge {
        color: #fff;
        background-color: #333;
    }

.btn > .caret,
.dropup > .btn > .caret {
    border-top-color: #000 !important;
}

.btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .btn:focus,
    .btn:active:focus,
    .btn.active:focus,
    .btn.focus,
    .btn:active.focus,
    .btn.active.focus {
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px;
    }

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

    .btn:active,
    .btn.active {
        background-image: none;
        outline: 0;
        -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    }

    .btn.disabled,
    .btn[disabled],
    fieldset[disabled] .btn {
        cursor: not-allowed;
        filter: alpha(opacity=65);
        opacity: 0.65;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

a.btn.disabled,
fieldset[disabled] a.btn {
    pointer-events: none;
}

.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

    .btn-default:focus,
    .btn-default.focus {
        color: #333;
        background-color: #e6e6e6;
        border-color: #8c8c8c;
    }

    .btn-default:hover {
        color: #333;
        background-color: #e6e6e6;
        border-color: #adadad;
    }

    .btn-default:active,
    .btn-default.active,
    .open > .dropdown-toggle.btn-default {
        color: #333;
        background-color: #e6e6e6;
        background-image: none;
        border-color: #adadad;
    }

        .btn-default:active:hover,
        .btn-default.active:hover,
        .open > .dropdown-toggle.btn-default:hover,
        .btn-default:active:focus,
        .btn-default.active:focus,
        .open > .dropdown-toggle.btn-default:focus,
        .btn-default:active.focus,
        .btn-default.active.focus,
        .open > .dropdown-toggle.btn-default.focus {
            color: #333;
            background-color: #d4d4d4;
            border-color: #8c8c8c;
        }

    .btn-default.disabled:hover,
    .btn-default[disabled]:hover,
    fieldset[disabled] .btn-default:hover,
    .btn-default.disabled:focus,
    .btn-default[disabled]:focus,
    fieldset[disabled] .btn-default:focus,
    .btn-default.disabled.focus,
    .btn-default[disabled].focus,
    fieldset[disabled] .btn-default.focus {
        background-color: #fff;
        border-color: #ccc;
    }

    .btn-default .badge {
        color: #fff;
        background-color: #333;
    }

.btn-xs,
.btn-group-xs > .btn {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

.css-admin-summary-control {
    list-style: none;
    position: relative;
    margin-left: 8px;
    width: 96%;
    display: table;
    border-collapse: separate;
    border-spacing: 5px;
}

    .css-admin-summary-control li:hover {
        -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
        -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
        box-shadow: 0px 0px 3px 0px #a1a1a1;
    }

    .css-admin-summary-control li {
        display: inline-table;
        padding: 5px;
        margin-right: 10px;
        border: solid 1px #FFF;
        border-radius: 5px;
        height: 100px;
        width: 23%;
        text-align: center;
        vertical-align: top;
        background-color: #fff;
        background-size: cover;
        background-repeat: no-repeat;
        color: #FFF;
        position: relative;
        font-family: erpRubik;
        margin-bottom: 10px;
    }

        .css-admin-summary-control li div {
            background-size: cover;
            background-repeat: no-repeat;
            border-radius: 10px;
            min-height: 100px;
            position: relative;
        }

        .css-admin-summary-control li h2 {
            display: block;
            background-color: rgba(0, 0, 0, 0.8);
            color: #fff !important;
            border-radius: 5px 5px 0px 0px;
            padding: 10px;
            font-family: erpRubik;
            font-size: 12px;
            text-transform: uppercase;
            border-bottom: none;
            text-align: left;
        }

        .css-admin-summary-control li .shape {
            width: 130px;
            height: 0;
            border-bottom: 50px solid #fff;
            border-right: 50px solid transparent;
            display: block;
            margin-top: 60px;
            text-align: left;
        }

        .css-admin-summary-control li label {
            color: #fdbf07;
            font-size: 40px !important;
            font-weight: bold;
            margin-left: 10px;
        }

        .css-admin-summary-control li a {
            color: #FC8675;
            font-size: 12px !important;
            font-weight: bold;
            text-decoration: none;
            display: block;
            background-color: #fff;
            padding: 10px;
            border-radius: 4px;
            margin-top: 10px;
            background-image: url('../../Images/icons/right-arrow.png');
            background-position: right center;
            background-repeat: no-repeat;
            background-size: auto 50%;
        }

.css-bus-chart {
    top: 140px !important;
    /*left: 0px !important;
    right: 0px !important;*/
    min-height: 200px !important;
    height: auto !important;
    /*width: auto !important;*/
    position: fixed !important;
    background-color: #FFF !important;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 8px 0px #a1a1a1;
    z-index: 30001 !important;
    border-radius: 0px !important;
    display: none;
}

.css-room-seat {
    list-style: none;
    display: inline-block;
}

    .css-room-seat input[type='radio'] {
        display: none;
    }

    .css-room-seat label {
        display: inline-block;
        padding: 5px;
        border: solid 1px #f1f1f1;
        border-radius: 5px;
        margin: 5px;
        margin-right: 50px;
        width: 100px;
        height: 200px;
    }

        .css-room-seat label:hover {
            background-color: aliceblue;
            cursor: pointer;
        }

.css-bus-seat {
    list-style: none;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

    .css-bus-seat input[type='radio'] {
        display: none;
    }

    .css-bus-seat label {
        display: list-item;
        padding: 5px;
        border: solid 1px #f1f1f1;
        border-radius: 5px;
        margin: 5px;
        max-width: 30px;
    }

        .css-bus-seat label:hover {
            background-color: aliceblue;
            cursor: pointer;
        }

    .css-bus-seat .lobby {
        display: list-item;
        padding: 5px;
        margin: 5px;
        height: 16px;
    }

.css-bus-seat-around-driver {
    list-style: none;
    display: block;
    padding-bottom: 13px;
}

    .css-bus-seat-around-driver input[type='radio'] {
        display: none;
    }

    .css-bus-seat-around-driver label {
        display: inline-block;
        padding: 5px;
        border: solid 1px #f1f1f1;
        border-radius: 5px;
        margin: 5px;
        width: 30px;
    }

        .css-bus-seat-around-driver label:hover {
            background-color: aliceblue;
            cursor: pointer;
        }

    .css-bus-seat-around-driver .lobby {
        display: list-item;
        padding: 5px;
        margin: 5px;
        height: 16px;
    }

.css-driver-seat {
    top: 25px;
    position: absolute;
    border: solid 1px #f1f1f1;
    border-radius: 5px;
    display: inline-block;
    padding: 5px;
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Safari prior 9.0 */
    transform: rotate(-90deg); /* Standard syntax */
}

.css-vehicle-entry {
    right: -25px;
    position: absolute;
    display: inline-block;
    padding: 5px;
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Safari prior 9.0 */
    transform: rotate(-90deg); /* Standard syntax */
    background-color: #07294d;
    color: #fff;
    text-transform: uppercase;
    right: -55px;
    bottom: 30px;
}

input[name='preferredSeat']:checked + label {
    background-color: yellow;
}

input[name='preferredSeat']:disabled + label {
    background-color: #EFF0F4;
}

.css-transport-success {
    background-image: url('../../Images/icons/verified.png');
    background-size: 50px auto;
    background-repeat: no-repeat;
    padding: 10px;
    padding-left: 60px;
    margin-left: 10px;
    background-position: 5px 5px;
    border-radius: 5px;
}

.css-hostel-success {
    background-image: url('../../Images/icons/verified.png');
    background-size: 50px auto;
    background-repeat: no-repeat;
    padding: 10px;
    padding-left: 60px;
    margin-left: 10px;
    background-position: 5px 5px;
    border-radius: 5px;
}

#divCheckAvailability {
    background-image: url('../../Images/loading_dark_small.gif');
    background-size: 34px auto;
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 30px;
}

.css-modal-textbox {
    margin-top: 10px;
    margin-bottom: 20px;
    min-width: 98%;
    max-width: 98%;
    padding: 5px !important;
}

.css-label-success {
    display: inline;
    padding: 6px;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
    font-family: erpRubik;
    background-color: #5cb85c;
    margin-left: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.css-label-danger {
    display: inline;
    padding: 6px;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
    font-family: erpRubik;
    background-color: #d9534f;
    margin-left: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.css-label-info {
    display: inline;
    padding: 6px;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
    font-family: erpRubik;
    background-color: #5bc0de;
    margin-left: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.css-label-warning {
    display: inline;
    padding: 6px;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
    font-family: erpRubik;
    background-color: #f0ad4e;
    margin-left: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.css-total-leaves-availed {
    margin-left: 20px;
}

    .css-total-leaves-availed .footer {
        margin-top: 10px;
        color: green;
    }

#divUserNotificationMessages {
    overflow-y: auto;
    top: 10px;
    bottom: 10px;
    margin-top: 10px;
    position: absolute;
    text-align: left;
    width: 400px;
}

#divUserNotifications {
    right: 0px;
    top: 50px;
    bottom: 0px;
    position: fixed;
    width: 400px;
    background-color: #fff;
    display: none;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 24px 0px #a1a1a1;
    font-family: erpRubik;
    font-size: 14px;
    padding-top: 20px !important;
    z-index: 10;
    text-align: center;
}

.css-notifications-messages {
    list-style: none;
}

    .css-notifications-messages li {
        display: block;
        padding: 10px;
        padding-top: 20px;
        padding-bottom: 20px;
        border-bottom: dashed 1px #c1c1c1;
        font-family: erpRubik;
        font-size: 14px;
        color: #000;
    }

        .css-notifications-messages li a {
            text-decoration: none;
            color: #000;
        }

        .css-notifications-messages li:hover {
            background-color: aliceblue;
        }

.notification-date {
    text-align: right;
    display: block;
    font-size: smaller;
    color: #c1c1c1;
}

.css-user-tasks {
    border: dashed 1px #c1c1c1;
    padding: 5px;
    min-height: 20px;
}



.css-field-help {
    height: 24px;
    width: 24px;
    display: inline-block;
    background-image: url(../../Images/icons/info.png);
    background-size: 18px auto;
    background-repeat: no-repeat;
    background-position: top;
    position: absolute;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
    margin-left: 5px;
    /* z-index: 6;*/
    text-transform: none;
    vertical-align: middle;
}

    .css-field-help:hover {
        /*transform: scale(1.2);*/ /* Slightly increase icon size on hover for effect */
    }

    .css-field-help p, .css-field-help div {
        display: none;
        position: absolute;
        background-color: #fff;
        color: #333;
        padding: 12px;
        border-radius: 8px; /* Rounded corners for a modern look */
        margin-left: 25px; /* Space from icon */
        /*min-width: 280px;*/
        width: max-content;
        max-width: 280px;
        font-size: 14px;
        font-weight: normal;
        text-align: justify;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Soft shadow */
        z-index: 5;
        border: 1px solid #ddd;
        opacity: 0;
        transition: opacity 0.3s ease-in-out; /* Fade-in effect */
        overflow-wrap: break-word;
    }

    .css-field-help:hover p, .css-field-help:hover div {
        display: block;
        opacity: 1; /* Tooltip becomes visible */
    }

    .css-field-help div {
        font-style: italic;
        line-height: 1.4;
    }

    .css-field-help p {
        font-style: normal;
    }

/*----------------Amount Help Icon----------------------*/
.css-field-amount {
    height: 24px;
    width: 24px;
    display: inline-block;
    background-image: url(https://cdn.asteroid365.com/images/icons/rupees-black.png);
    background-size: 18px auto;
    background-repeat: no-repeat;
    background-position: top;
    position: absolute;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
    margin-left: 5px;
    z-index: 6;
    text-transform: none;
    vertical-align: middle;
}

    .css-field-amount:hover {
        transform: scale(1.2); /* Slightly increase icon size on hover for effect */
    }

    .css-field-amount p, .css-field-amount div {
        display: none;
        position: absolute;
        background-color: #fff;
        color: #333;
        padding: 12px;
        border-radius: 8px; /* Rounded corners for a modern look */
        margin-left: 25px; /* Space from icon */
        /*min-width: 280px;*/
        width: max-content;
        max-width: 280px;
        font-size: 12px;
        font-weight: normal;
        text-align: justify;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Soft shadow */
        z-index: 5;
        border: 1px solid #ddd;
        opacity: 0;
        transition: opacity 0.3s ease-in-out; /* Fade-in effect */
        overflow-wrap: break-word;
    }

    .css-field-amount:hover p, .css-field-amount:hover div {
        display: block;
        opacity: 1; /* Tooltip becomes visible */
    }

    .css-field-amount div {
        font-style: italic;
        line-height: 1.4;
    }

    .css-field-amount p {
        font-style: normal;
    }
/*----------------Amount Help Icon End------------------*/
/* Animation for smooth tooltip appearance */
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.css-field-help:hover div {
    animation: fadeIn 0.3s ease-in-out;
}


#closeCMenu {
    background-color: #fff;
    padding: 10px;
    padding-top: 20px;
    position: fixed;
    left: 48%;
    top: 50px;
    z-index: 11;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
    border-radius: 0px 0px 5px 5px;
}

    #closeCMenu:hover {
        background-color: #FC8675;
        color: #fff;
    }

.css-doc-locked {
    background-image: url('../../Images/icons/lock.png');
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 20px;
}

#divPayFeePanelBody {
    padding: 10px;
}

#divProgressMiddle {
    display: none;
    background-color: aliceblue;
    padding: 10px;
    padding-left: 60px;
    padding-right: 40px;
    position: fixed;
    left: 45%;
    top: 70px;
    z-index: 11;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 24px 0px #a1a1a1;
    border-radius: 3px;
    background-image: url('../../Images/ajax_loader_blue_32.gif');
    background-position-x: 30px;
    background-position-y: center;
    background-size: 24px 24px;
    background-repeat: no-repeat;
}

.css-ul-tag {
    margin-left: 50px;
    margin-top: 10px;
    margin-bottom: 10px;
}

/*------------------------------Media Object Start----------------------*/
.media {
    margin-bottom: 15px;
}

.media-body, .media-left, .media-right {
    display: table-cell;
    vertical-align: top;
}

.media-left, .media > .pull-left {
    padding-right: 10px;
}

.media-object {
    border-radius: 100px !important;
    border: solid 1px #a1a1a1;
    background-color: #fff;
    display: block;
}
/*------------------------------Media Object End----------------------*/
.css-sub-postedon {
    margin-left: 5px;
    color: #a1a1a1;
    font-weight: normal !important;
    font-style: italic;
}

.css-maximize-table {
    display: block;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-image: url('../../Images/icons/full_screen.png');
    background-position-x: center;
    background-position-y: center;
    height: 20px;
    width: 20px;
    margin-left: 10px;
    margin-top: 5px;
    padding: 5px;
    background-color: #fff;
    border-radius: 5px 5px 0px 0px;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
    cursor: pointer;
}

    .css-maximize-table ~ .gridTable, .gridTable2 {
        margin-top: 0px !important;
    }


.css-maximize-table-header {
    margin: 0px !important;
    padding: 5px !important;
    background-color: #fff !important;
    display: block;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
}

.maximizeTable {
    top: 0px !important;
    right: 0px !important;
    bottom: 0px !important;
    left: 0px !important;
    position: fixed !important;
    z-index: 20001 !important;
    overflow: auto !important;
    background-color: #EFF0F4 !important;
    margin: 0px !important;
    height: auto !important;
    max-height: none !important;
}

.css-exit-maximize-table-button {
    background-image: url('../../images/bullet_deny.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    background-position-x: 10px;
    background-position-y: 15px;
    background-color: #51D4CC;
    color: #fff;
    padding: 10px;
    padding-left: 35px;
    padding-top: 15px;
    padding-bottom: 15px;
    position: fixed;
    left: 47%;
    bottom: 0px;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 4px 0px #a1a1a1;
    border-radius: 5px 5px 0px 0px;
    display: none;
    z-index: 10;
}

    .css-exit-maximize-table-button:hover {
        background-color: #FC8675;
        color: #fff;
    }

.css-online-class {
    background-color: #FC8675;
    border: solid 1px red;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    font-size: smaller;
    margin-left: 10px;
    display: inline-block;
    margin-top: 5px;
}

.css-student-online-class {
    background-color: #FC8675;
    border: solid 1px red;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    font-size: smaller;
    margin-left: 10px;
    display: inline-block;
    margin-top: 5px;
    background-size: 25px auto;
    background-repeat: no-repeat;
    background-image: url('../../images/icons/online-class.png');
    background-position: 5px center;
    padding-left: 30px;
}

.css-model-heading {
    background-color: #FC8675;
    border: solid 1px red;
    border-radius: 5px;
    color: #fff;
    padding: 10px;
    width: auto;
    margin-bottom: 20px;
}

.fb_iframe_widget {
    bottom: -10px !important;
}

.i0 {
}

.i1 {
    margin-left: 1em;
}

.i2 {
    margin-left: 2em;
}

.i3 {
    margin-left: 3em;
}

.i4 {
    margin-left: 4em;
}

.i5 {
    margin-left: 5em;
}

#divDocumentViewer {
    top: 0px;
    left: 100px;
    right: 100px;
    bottom: 0px;
    position: fixed;
    z-index: 30011;
    display: none;
    background-color: #fff;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 14px 0px #a1a1a1;
    border: solid 1px #999;
}

    #divDocumentViewer iframe {
        border: none;
        background-color: #fff;
    }

    #divDocumentViewer .unlockSection {
        left: 100px;
        right: 100px;
        top: 0px;
        bottom: 0px;
        position: fixed;
        text-align: center;
        z-index: 30012;
        background-color: #f1f1f1;
        cursor: no-drop;
    }

#divEBookViewer {
    top: 0px;
    left: 100px;
    right: 100px;
    bottom: 0px;
    position: fixed;
    z-index: 30011;
    display: none;
    background-color: #fff;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 14px 0px #a1a1a1;
    border: solid 1px #999;
}

    #divEBookViewer iframe {
        border: none;
        background-color: #fff;
    }

    #divEBookViewer .unlockSection {
        left: 100px;
        right: 100px;
        top: 0px;
        bottom: 0px;
        position: fixed;
        text-align: center;
        z-index: 30012;
        background-color: #f1f1f1;
        cursor: no-drop;
    }

.css-pending-dues-notification {
    color: #fff;
    background-color: #FC8675;
    background-image: url('../../Images/icons/failed.png');
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: 5px 2px;
    padding-left: 30px !important;
}

#divAttendanceControlBar {
    text-align: right;
    position: sticky;
    bottom: 0px;
    background-color: #fff;
}

.css-efficiency-tag {
    display: inline-block;
    margin: 10px;
    padding: 10px;
    background-image: url('../../images/icons/markAttendance.png');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 40px;
    padding-left: 50px;
    min-width: 250px;
}

.css-field-reset-button {
    height: 20px;
    width: 20px;
    display: inline-block;
    background-image: url('../../Images/icons/redo.png');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
    margin-top: 5px;
    right: 25px;
    position: relative;
    background-color: #fff;
}

.hasDatepicker {
    width: 150px !important;
    display: inline-block !important;
}

.css-sms-recipient {
    position: relative;
    display: inline-block;
    background-color: #fff;
    margin: 5px;
    padding: 2px;
    border: solid 1px #a1a1a1;
    border-radius: 5px;
    font-size: 14px;
    max-width: 200px;
}

    .css-sms-recipient:hover {
        -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
        -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
        box-shadow: 0px 0px 14px 0px #a1a1a1;
    }

    .css-sms-recipient .heading {
        margin: 2px;
        padding: 2px;
        padding-left: 10px;
        background-color: #EFF0F4;
        border-radius: 5px;
        display: block;
        font-weight: bold;
    }

    .css-sms-recipient .student-heading {
        background-color: #65CEA7 !important;
        color: #fff !important;
    }

    .css-sms-recipient .employee-heading {
        background-color: #5AB6DF !important;
        color: #fff !important;
    }

    .css-sms-recipient .body {
        padding: 2px;
        display: block;
    }

    .css-sms-recipient .close {
        height: 10px;
        width: 10px;
        background-image: url('../../Images/icons/close.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center center;
        right: 10px;
        top: 8px;
        position: absolute;
        cursor: pointer;
    }

.css-student-attendance-pic-thumb {
    height: 30px;
    width: 30px;
    display: inline-block;
    margin-right: 10px;
    border-radius: 30px;
    border: solid 1px #fff;
    position: absolute;
    top: 4px;
}

.css-student-attendance-name {
    position: relative;
    margin-left: 40px;
}

.chart-image {
    display: none;
}

.rHonors {
    list-style: none;
}

    .rHonors li {
        display: block;
        margin: 10px;
        padding: 10px;
        background-color: #fff;
        border-radius: 0px 2px 2px 0px;
        border-left: solid 5px #F0EDE5;
        -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
        -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
        box-shadow: 0px 0px 1px 0px #a1a1a1;
    }

        .rHonors li .title {
            font-family: erpRubik;
            display: block;
            text-align: left;
            text-transform: uppercase;
            padding: 10px;
            -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
            -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
            box-shadow: 0px 0px 1px 0px #a1a1a1;
            background-image: url('../../Images/icons/medal.png');
            background-size: 32px 32px;
            background-repeat: no-repeat;
            background-position: 5px 10px;
            padding-left: 40px;
            border-radius: 2px;
            background-color: #F0EDE5;
            -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
            -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
            box-shadow: 0px 0px 2px 0px #a1a1a1;
            font-weight: bold;
            font-size: 16px;
        }

            .rHonors li .title div {
                font-style: normal;
                font-size: 14px;
            }

        .rHonors li .description {
            display: block;
            text-align: left;
            text-transform: capitalize;
            padding: 10px;
        }

#divSocialMedia {
    top: -25px;
    right: 20px;
    position: absolute;
}

.social-media-facebook {
    height: 32px;
    width: 32px;
    display: inline-block;
    margin-right: 10px;
    background-image: url('../../Images/sm/fb.png');
    background-size: 100% 100%;
    background-position: center center;
}

.social-media-linkedin {
    height: 32px;
    width: 32px;
    display: inline-block;
    margin-right: 10px;
    background-image: url('../../Images/sm/lnk.png');
    background-size: 100% 100%;
    background-position: center center;
}

.social-media-twitter {
    height: 32px;
    width: 32px;
    display: inline-block;
    margin-right: 10px;
    background-image: url('../../Images/sm/tw.png');
    background-size: 100% 100%;
    background-position: center center;
}

.social-media-youtube {
    height: 32px;
    width: 48px;
    display: inline-block;
    margin-right: 10px;
    background-image: url('../../Images/sm/youtube.png');
    background-size: 100% 100%;
    background-position: center center;
}

.table-header-freeze {
    position: sticky;
    top: -5px;
    z-index: 2;
}

.table-header-freeze-2 {
    position: sticky;
    top: 0px;
    z-index: 2;
}

.table-header-freeze-3 {
    position: sticky;
    top: 50px;
    z-index: 2;
    background-color: #fff;
}

.table-column-freeze {
    position: sticky;
    left: 50px;
    background-color: #EFF0F4;
    z-index: 1; /*So that it should appear over any control/elements in table.*/
}

.table-column-freeze-right {
    position: sticky;
    right: 0px;
    background-color: #EFF0F4;
    z-index: 1; /*So that it should appear over any control/elements in table.*/
}

.table-footer-freeze {
    position: sticky;
    bottom: -2px;
    z-index: 2;
}

.edit-timetable-time {
    display: inline-block;
    height: 24px;
    width: 24px;
    background-image: url('../../Images/icons/settings-white.png');
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    cursor: pointer;
    margin-left: 10px;
}

.css-timetable-instituteName {
    font-size: smaller;
    background-color: #EFF0F4;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 5px;
    text-transform: uppercase;
}

.suspendPeriod_icon {
    height: 20px;
    width: 20px;
    background-image: url('../../images/icons/redFlag.png');
    background-size: 100% 100%;
    cursor: pointer;
    display: none;
    bottom: 0px;
    right: 30px;
    position: absolute;
    z-index: 1000;
}

.suspendFacultyPeriod_icon {
    height: 20px;
    width: 20px;
    background-image: url('../../images/icons/user_delete.png');
    background-size: 100% 100%;
    cursor: pointer;
    display: none;
    bottom: 0px;
    right: 0px;
    position: absolute;
    z-index: 1000;
}

.css-timetable-period {
    position: relative;
    margin: 8px;
    display: block;
}

    .css-timetable-period:hover .suspendPeriod_icon {
        display: block;
    }

    .css-timetable-period:hover .suspendFacultyPeriod_icon {
        display: block;
    }

.placement-organization-logo {
    height: 30px;
}

#sortable {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 60%;
}

    #sortable li {
        margin: 0 3px 3px 3px;
        padding: 0.4em;
        height: 18px;
        cursor: grab;
        background: none;
        background-color: #f2f1f1;
        max-width: 300px;
        font-size: 16px;
    }

        #sortable li span {
            position: absolute;
            margin-left: -1.3em;
        }

.skills-box {
    display: inline-block;
    min-width: 300px;
    max-width: 400px;
    vertical-align: top;
    margin-right: 10px;
    margin-bottom: 10px;
}

    .skills-box ul {
        list-style: none;
        max-height: 400px;
        overflow: auto;
        margin-left: 0px;
        margin-top: 5px;
    }

.css-mfa {
    height: 300px;
    width: 80%;
    background-image: url('../../Images/icons/mfa.png');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center center;
}
/*--------Rating star----------------------*/
.rate {
    float: left;
    height: 66px;
    padding: 0 10px;
}

    .rate:not(:checked) > input {
        position: absolute;
        top: -9999px;
    }

    .rate:not(:checked) > label {
        float: right;
        width: 1em;
        overflow: hidden;
        white-space: nowrap;
        cursor: pointer;
        font-size: 20px;
        color: #ccc;
    }

        .rate:not(:checked) > label:before {
            content: '★ ';
        }

    .rate > input:checked ~ label {
        color: #ffc700;
    }

    .rate:not(:checked) > label:hover,
    .rate:not(:checked) > label:hover ~ label {
        color: #deb217;
    }

    .rate > input:checked + label:hover,
    .rate > input:checked + label:hover ~ label,
    .rate > input:checked ~ label:hover,
    .rate > input:checked ~ label:hover ~ label,
    .rate > label:hover ~ input:checked ~ label {
        color: #c59b08;
    }
/*--------End------------------------------*/
.css-transport-person {
    margin-top: 10px;
    text-transform: uppercase !important;
}

#divVisionMission {
    display: none;
}

#divVisionMission {
    font-size: 22px;
    background-color: rgba(0,0,0,0.7);
    color: #FFFFFF;
    font-weight: 900;
    left: 0px;
    bottom: 0px;
    position: fixed;
    z-index: 0;
    color: #fff;
}

    #divVisionMission .message {
        margin: 10px;
        margin-bottom: 20px;
    }

        #divVisionMission .message h3 {
            font-size: 20px;
            margin-bottom: 5px;
        }

        #divVisionMission .message p {
            font-size: 14px;
            font-weight: normal;
            font-family: erpRubik;
        }

.divVisionMission-theme3 {
    width: 65% !important;
}

.divVisionMission-theme2 {
    width: 100% !important;
    background-color: rgba(0,0,0,0.7) !important;
}

.divVisionMission-theme1 {
    width: 100% !important;
}

/*------------------------Image tooltip start------------------------*/
#preview {
    position: absolute;
    border: 2px solid #c1c1c1;
    border-radius: 2px;
    background: #fff;
    padding: 10px;
    display: none;
    color: black;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 10px 0px #a1a1a1;
    text-align: center;
    z-index: 10;
    left: 50px;
    top: 0px;
}

    #preview img {
        height: 150px;
        width: 150px;
    }

    #preview #subtitle {
        background-color: #EFF0F4;
        padding: 5px;
        padding-left: 10px;
        padding-right: 10px;
        border-radius: 5px;
        display: block;
        margin-top: 10px;
    }

.thumbnail {
    height: 30px;
    width: 30px;
}
/*------------------------Image tooltip end-------------------------*/
.ui-datepicker {
    z-index: 99999 !important; /*Keep this value high, so that calendar should always open on top of any of the modal window.*/
}

input[type='text'][name='UploadOrVerifyDates'] {
    width: 100px !important;
}

.lbl-UploadOrVerifyDates-titles {
    width: 140px !important;
    display: block !important;
}

.css-faculty-busy-occupancy {
    /*display: inline-block;
    height: 10px;
    width: 20px;*/
    background-color: red;
    /*padding-bottom: 5px;*/
    color: #fff;
    text-align: center;
    vertical-align: middle;
}

.css-faculty-available-occupancy {
    /*display: inline-block;
    height: 10px;
    width: 20px;*/
    background-color: green;
    /*padding-bottom: 5px;*/
    color: #fff;
    text-align: center;
    vertical-align: middle;
}

.css-faculty-default-occupancy {
    /*display: inline-block;
    height: 10px;
    width: 20px;*/
    background-color: #a1a1a1;
    /*padding-bottom: 5px;*/
    color: #fff;
    text-align: center;
    vertical-align: middle;
}

.css-initiate-refund {
    height: 20px;
    width: 20px;
    display: inline-block;
    background-image: url('../../Images/icons/transfer.png');
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 10px;
}

.num {
    text-align: right;
}

.ribbon {
    /*font-size: 20px;*/
    position: absolute;
    display: inline-block;
    /*margin: 5em;*/
    text-align: center;
    z-index: 2;
    left: -15px;
    width: auto;
}

.text {
    display: inline-block;
    padding: 0.5em 1em;
    line-height: 1.2em;
    background: #FFD72A;
    position: relative;
    width: inherit;
}

    .ribbon:after, .ribbon:before,
    .text:before, .text:after,
    .bold:before {
        content: '';
        position: absolute;
        border-style: solid;
    }

.ribbon:before {
    top: 0.3em;
    left: 0.2em;
    width: 100%;
    height: 100%;
    border: none;
    background: #EBECED;
    z-index: -2;
}

.text:before {
    bottom: 100%;
    left: 0;
    border-width: .5em .7em 0 0;
    border-color: transparent #FC9544 transparent transparent;
}

.text:after {
    top: 100%;
    right: 0;
    border-width: .5em 2em 0 0;
    border-color: #FC9544 transparent transparent transparent;
}

.ribbon:after, .bold:before {
    top: 0.5em;
    right: -2em;
    border-width: 1.1em 1em 1.1em 3em;
    border-color: #FECC30 transparent #FECC30 #FECC30;
    z-index: -1;
}

/* Apply this style to the table cells */
table td {
    vertical-align: middle !important; /* Aligns content vertically in the middle */
}

    /* Ensure the input box is aligned properly */
    table td input[type="number"] {
        margin: 0;
        vertical-align: middle !important;
        padding: 2px; /* Adjust padding if needed */
        height: auto; /* Ensure height doesn't affect alignment */
        line-height: normal; /* Ensure line-height is normal */
    }

.css-chart-box-2 {
    width: auto;
    display: inline-block;
    margin: 5px;
    padding: 10px;
    text-align: center;
}

    .css-chart-box-2 .heading {
        background-color: lightblue;
        border-radius: 10px;
        padding: 10px;
        font-weight: bold;
        margin-bottom: 20px;
    }

    .css-chart-box-2 canvas {
        max-height: 400px !important;
        height: 400px;
        display: block;
        position: center;
    }

.css-box {
    background-color: #fff;
    border: solid 5px #f4feff;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    width: auto;
    text-align: center;
    position: relative;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 3px 0px #a1a1a1;
    border-radius: 5px;
    padding-top: 10px;
    margin-top: 10px;
}

.css-box-content {
    margin-top: 30px;
}

.left {
    text-align: left !important;
}

#divProgramOutcomeList {
    text-align: left;
    max-height: 400px;
    overflow-y: auto;
    position: relative;
}

.css-analytics-bars {
    bottom: 140px;
    right: 0px;
    position: fixed;
    z-index: 5;
    right: -210px;
}

    .css-analytics-bars .css-analytics-icon {
        background-color: #FFF;
        color: #808080;
        display: block;
        padding: 10px;
        padding-left: 30px;
        padding-right: 20px;
        cursor: pointer;
        -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
        -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
        box-shadow: 0px 0px 4px 0px #a1a1a1;
        margin-bottom: 30px;
        position: relative;
        right: 0px;
        transition: right 1s ease;
        min-width: 180px;
    }

        .css-analytics-bars .css-analytics-icon:hover {
            right: 200px;
        }

        .css-analytics-bars .css-analytics-icon.animate-on-load {
            right: 200px;
            transition: right 1s ease;
        }

        .css-analytics-bars .css-analytics-icon .icon-bubble {
            display: block;
            height: 50px;
            width: 50px;
            background-size: contain;
            background-position-x: center;
            background-position-y: center;
            background-repeat: no-repeat;
            position: absolute;
            left: -35px;
            top: -10px;
            border-radius: 50px;
            background-color: #FFF;
            -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
            -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
            box-shadow: 0px 0px 4px 0px #a1a1a1;
            border: solid 5px #fff;
        }

        .css-analytics-bars .css-analytics-icon .analytics {
            background-image: url(https://cdn.asteroid365.com/images/icons/Analytics-128.png);
        }

.css-obe-exampaper-section {
    text-align: center;
    font-weight: bold;
    padding: 5px;
    text-transform: uppercase;
    border: solid 1px #EFF0F4;
    color: #960202;
    margin-bottom: 10px;
    position: sticky;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0px;
    background-color: #fff;
}

    .css-obe-exampaper-section input {
        margin-left: 10px;
    }

    .css-obe-exampaper-section .question-status {
        position: absolute;
        right: 10px;
        color: black;
        font-weight: normal;
        text-transform: uppercase;
        font-size: 12px;
        text-align: right;
    }

        .css-obe-exampaper-section .question-status label {
            font-weight: bold;
            color: red;
        }

.css-obe-exampaper-questions {
    text-align: left;
    font-weight: bold;
    text-transform: uppercase;
    display: block;
    position: sticky;
    top: 10px;
}

.css-obe-exampaper-question {
    text-align: left;
    font-weight: normal;
    display: inline-block;
    margin: 20px;
    max-width: 450px;
}

    .css-obe-exampaper-question table {
        width: 100%;
    }

        .css-obe-exampaper-question table tr td {
            vertical-align: top !important;
            text-align: left;
        }

    .css-obe-exampaper-question .css-label {
        width: 15px !important;
    }
/*--------------------MARKS QUESTION WISE CSS START----------------------*/
/* Main container */
.marks-container {
    position: relative;
    display: inline-block;
}

/* The number input box */
.marks-input {
    padding: 10px;
    width: 100px;
    font-size: 16px;
    border: 2px solid #ccc;
    border-radius: 5px;
    outline: none;
    transition: border-color 0.3s ease;
}

    .marks-input:focus {
        border-color: #4caf50;
    }

/* Popup container */
.popup {
    position: absolute;
    left: 0;
    display: none;
    flex-direction: column;
    background-color: #fff;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 10;
    animation: fadeIn 0.3s ease-in-out;
    text-align: center;
    width: 160px;
    background-color: cornsilk;
}

    /* Message text */
    .popup .message {
        font-size: 14px;
        color: #555;
        margin-top: 8px;
        font-family: erpRubik;
        font-size: 11px;
        text-transform: none;
    }

    /* Icons container */
    .popup .icons {
        display: flex;
        justify-content: center;
        gap: 10px;
    }

    /* Popup icons */
    .popup .icon {
        cursor: pointer;
        margin: 0 5px;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        position: relative;
        transition: transform 0.2s ease, background-color 0.3s ease, color 0.3s ease;
    }

    /* Full marks (tick) */
    .popup .full-marks {
        background-color: #4caf50; /* Green background */
        position: relative;
    }

        .popup .full-marks::before,
        .popup .full-marks::after {
            content: '';
            position: absolute;
            background-color: white;
            border-radius: 2px;
        }

        .popup .full-marks::before {
            width: 5px;
            height: 15px;
            transform: rotate(45deg);
            top: 7px;
            left: 12px;
        }

        .popup .full-marks::after {
            width: 5px;
            height: 8px;
            transform: rotate(-45deg);
            top: 12px;
            left: 8px;
        }

        .popup .full-marks:hover {
            background-color: #45a049; /* Slightly darker green on hover */
            transform: scale(1.2);
        }

    /* Zero marks (cross) */
    .popup .zero-marks {
        background-color: #f44336; /* Red background */
        position: relative;
    }

        .popup .zero-marks::before,
        .popup .zero-marks::after {
            content: '';
            position: absolute;
            background-color: white;
            border-radius: 2px;
        }

        .popup .zero-marks::before {
            width: 18px;
            height: 3px;
            transform: rotate(45deg);
            top: 13px;
            left: 6px;
        }

        .popup .zero-marks::after {
            width: 18px;
            height: 3px;
            transform: rotate(-45deg);
            top: 13px;
            left: 6px;
        }

        .popup .zero-marks:hover {
            background-color: #d32f2f; /* Slightly darker red on hover */
            transform: scale(1.2);
        }

/* Hover effect to display the popup */
.marks-container:hover .popup {
    display: flex;
}

/* Animation for the popup */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*-----------------MARKS QUESTION WISE END---------------------------*/
.exam-row-outdated {
    background-color: #fff0f0 !important;
}

.exam-row-upcoming {
    background-color: #f0fff0 !important;
}

.gridTable tr[data-tooltip] {
    position: relative;
}

    .gridTable tr[data-tooltip]:hover:after {
        content: attr(data-tooltip);
        position: absolute;
        left: 0;
        top: 100%;
        background: #333;
        color: white;
        padding: 5px;
        border-radius: 5px;
        white-space: nowrap;
        z-index: 1000;
    }
/*---------------Birthday Panel------------------*/
#divMonthlyBirthdays {
    right: 0px;
    top: 50px;
    bottom: 0px;
    position: fixed;
    width: 500px;
    /*background-color: #fff;*/
    display: none;
    /*-moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 24px 0px #a1a1a1;*/
    font-family: erpRubik;
    font-size: 14px;
    padding: 10px;
    padding-top: 20px !important;
    z-index: 10;
    text-align: center;
    /*background: linear-gradient(135deg, #f6d365, #fda085);*/ /* Subtle gradient background */
    background-color: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Soft shadow */
}
    /* Adding animated icons overlay */
    #divMonthlyBirthdays::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url('https://cdn.asteroid365.com/images/icons/happy-birthday.png');
        background-repeat: repeat-x;
        background-size: 60px; /* Scale icons for better visibility */
        opacity: 0.1; /* Subtle overlay effect */
        animation: slide-icons 10s linear infinite; /* Animated icons */
        z-index: -1; /* Keep it behind content */
    }

#divBirthDays {
    overflow-y: auto;
    top: 60px;
    bottom: 10px;
    margin-top: 10px;
    position: absolute;
    text-align: left;
    width: inherit;
}

.css-birthday-show {
    display: block !important;
}

/* General styling for the birthday list */
.birthday-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: erpRubik;
}

    /* Birthday item styling */
    .birthday-list li {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        padding: 10px;
        border-radius: 12px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        color: #fff;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        margin-right: 10px;
    }

        .birthday-list li.employee {
            background-color: #8EC5FC;
            background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
            border-left: 5px solid #E0C3FC; /* Accent color */
        }

            .birthday-list li.employee .institute-name {
                background-color: cornflowerblue;
                padding: 5px;
                position: relative;
                right: 10px;
                bottom: -10px;
                border-radius: 5px 5px 0px 0px;
                font-size: 12px;
                float: right;
                text-transform: uppercase;
            }

        .birthday-list li.student {
            background-color: #f6d365;
            background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
            border-left: 5px solid #fda085; /* Accent color */
        }

            .birthday-list li.student .institute-name {
                background-color: navajowhite;
                padding: 5px;
                position: relative;
                right: 10px;
                bottom: -10px;
                border-radius: 5px 5px 0px 0px;
                font-size: 12px;
                float: right;
                color: #000;
                text-transform: uppercase;
            }

        /* Hover effect for the items */
        .birthday-list li:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
        }

    /* Profile photo styling */
    .birthday-list .photo {
        height: 60px;
        width: 60px;
        border-radius: 50%;
        background-size: cover;
        background-position: center;
        border: 5px solid #fff;
        margin-right: 15px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }

    /* Birthday details */
    .birthday-list .details {
        flex-grow: 1;
        position: relative;
    }

        .birthday-list .details .other-details {
            text-transform: capitalize !important;
        }

    .birthday-list .name {
        font-size: 14px;
        font-weight: bold;
        text-transform: uppercase;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    }

    .birthday-list .date {
        font-size: 14px;
        opacity: 0.9;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    }

    /* Icon container */
    .birthday-list .icons {
        display: flex;
        gap: 15px;
    }

        .birthday-list .icons .icon {
            height: 64px;
            width: 64px;
            background-size: cover;
            background-repeat: no-repeat;
            transition: transform 0.3s ease, opacity 0.3s ease;
            cursor: pointer;
        }

            .birthday-list .icons .icon:hover {
                transform: scale(1.2);
                opacity: 0.9;
            }

    /* Specific icons for email and phone */
    .birthday-list .email-icon {
        background-image: url('https://cdn.asteroid365.com/Images/icons/cake-1.png');        
    }

    .birthday-list .phone-icon {
        background-image: url('../../Images/icons/phone.png');
    }

    /* Hover effect for the items */
    .birthday-list li:hover .email-icon {
        /* Bounce animation */
        animation: bounce 1.0s ease-in-out 1;
        animation-iteration-count: 3; /* Repeat 3 times */
        animation-delay: 0.5s; /* Optional: delay before animation starts */
    }

/* Keyframes for bounce animation */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-20px);
    }

    60% {
        transform: translateY(-10px);
    }
}
/*---------------Birthday Panel End--------------*/

#divBirthDays {
    overflow-y: auto;
    position: absolute;
    bottom: 10px;
    margin-top: 10px;
    width: inherit;
    text-align: left;
    color: #000000;
    animation: background-pan 5s linear infinite; /* Animated background */
    background-size: 300%; /* Ensure animation works smoothly */
    font-family: erpRubik;
    margin-bottom: 60px;
}

/* Animation for the gradient background */
@keyframes background-pan {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 0%;
    }
}

/* Sliding animation for the icons */
@keyframes slide-icons {
    from {
        background-position: 0 100%;
    }

    to {
        background-position: 100% 100%;
    }
}

/* Ensuring content appears above animated elements */
#divBirthDays > * {
    position: relative;
    z-index: 2;
}


input[type=checkbox].css-checkbox {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    font-size: smaller;
}

    input[type=checkbox].css-checkbox + label.css-label {
        padding-left: 20px;
        min-height: 16px;
        display: inline-block;
        /*line-height: 16px;*/
        background-repeat: no-repeat;
        background-position: 0 0;
        font-size: 15px;
        vertical-align: top;
        cursor: pointer;
        font-size: smaller;
        background-image: url(../../images/checkbox/depressedUncheck.png);
    }

    input[type=checkbox].css-checkbox:checked + label.css-label {
        background-image: url(../../images/checkbox/depressedChecked.png);
    }

    input[type=checkbox].css-checkbox:disabled + label.css-label {
        background-image: url(../../images/checkbox/depressedUncheckDisabled.png);
        cursor: no-drop;
    }

    input[type=checkbox].css-checkbox:checked:disabled + label.css-label {
        background-image: url(../../images/checkbox/depressedCheckedDisabled.png);
        cursor:no-drop;
    }

.css-label-nocheckbox {
    background-image: none !important;
    cursor:default !important;
}

.css-label {
    margin: 3px;
    font-size: smaller;
}

.chkList input[type=checkbox] {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    font-size: smaller;
}

    .chkList input[type=checkbox] + label {
        padding-left: 20px;
        height: 15px;
        display: inline-block;
        line-height: 15px;
        background-repeat: no-repeat;
        background-position: 0 0;
        font-size: 15px;
        vertical-align: middle;
        cursor: pointer;
        font-size: smaller;
    }

    .chkList input[type=checkbox]:checked + label {
        background-position: 0 -15px;
    }

.chkList label {
    background-image: url(../../images/checkbox/depressed.png);
    margin: 3px;
    font-size: smaller;
}

input[type=radio].css-radio {
    display: none;
}

    input[type=radio].css-radio + label.css-radiolabel {
        padding-left: 25px;
        min-height: 19px;
        display: inline-block;
        background-repeat: no-repeat;
        background-position: 0 0;
        font-size: smaller;
        vertical-align: middle;
        cursor: pointer;
        padding-top: 3px;
        font-size: smaller;
        background-image: url(../../images/radioButtons/rb5UnChecked.png);
    }

    input[type=radio].css-radio:checked + label.css-radiolabel {
        vertical-align: middle;
        background-image: url(../../images/radioButtons/rb5Checked.png);
    }

    input[type=radio].css-radio:disabled + label.css-radiolabel {
        vertical-align: middle;
        background-image: url(../../images/radioButtons/rb5UnCheckedDisabled.png);
        cursor:no-drop;
    }

    input[type=radio].css-radio:checked:disabled + label.css-radiolabel {
        vertical-align: middle;
        background-image: url(../../images/radioButtons/rb5CheckedDisabled.png);
        cursor:no-drop;
    }

label.css-radiolabel {
    vertical-align: middle;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/*Radio Button List Style Sheet*/
.rblList input[type=radio] {
    display: none;
}

    .rblList input[type=radio] + label {
        padding-left: 25px;
        height: 19px;
        display: inline-block;
        line-height: 20px;
        background-repeat: no-repeat;
        background-position: 0 0;
        font-size: smaller;
        vertical-align: middle;
        cursor: pointer;
    }

    .rblList input[type=radio]:checked + label {
        background-position: 0 -19px;
    }

.rblList label {
    background-image: url('../../images/radioButtons/rb5.png');
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.dialog-ovelay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.50);
    z-index: 999999;
}

    .dialog-ovelay .dialog {
        width: 420px;
        margin: 100px auto 0;
        background-color: #fff;
        box-shadow: 0 0 20px rgba(0,0,0,.2);
        border-radius: 3px;
        overflow: hidden;
    }

        .dialog-ovelay .dialog header {
            padding: 10px 8px;
            background-color: #f6f7f9;
            border-bottom: 1px solid #e5e5e5
        }

            .dialog-ovelay .dialog header h3 {
                font-size: 14px;
                margin: 0;
                color: #555;
                display: inline-block
            }

            .dialog-ovelay .dialog header .fa-close {
                float: right;
                color: #c4c5c7;
                cursor: pointer;
                transition: all .5s ease;
                padding: 0 2px;
                border-radius: 1px
            }

                .dialog-ovelay .dialog header .fa-close:hover {
                    color: #b9b9b9
                }

                .dialog-ovelay .dialog header .fa-close:active {
                    box-shadow: 0 0 5px #673AB7;
                    color: #a2a2a2
                }

        .dialog-ovelay .dialog .dialog-msg {
            padding: 12px 10px;
            padding-right: 20px !important;
        }

            .dialog-ovelay .dialog .dialog-msg p {
                margin: 0;
                font-size: 15px;
                color: #333
            }

        .dialog-ovelay .dialog footer {
            border-top: 1px solid #e5e5e5;
            padding: 8px 10px
        }

            .dialog-ovelay .dialog footer .controls {
                direction: rtl !important;
                text-align: right !important;
            }

                .dialog-ovelay .dialog footer .controls .button {
                    padding: 5px 15px;
                    border-radius: 3px
                }

.button {
    cursor: pointer
}

.button-default {
    background-color: rgb(248, 248, 248);
    border: 1px solid rgba(204, 204, 204, 0.5);
    color: #5D5D5D;
}

.button-danger {
    background-color: #f44336;
    border: 1px solid #d32f2f;
    color: #f5f5f5;
}

.link {
    padding: 5px 10px;
    cursor: pointer
}

#txtSearchContacts {
    width: 95%;
    padding: 5px;
}

#divOrganizationalContacts {
    right: 0px;
    top: 50px;
    bottom: 0px;
    position: fixed;
    width: 400px;
    background-color: #fff;
    display: none;
    -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
    box-shadow: 0px 0px 24px 0px #a1a1a1;
    font-family: erpRubik;
    font-size: 14px;
    padding: 10px;
    padding-top: 20px !important;
    z-index: 10;
    text-align: center;
}

#divContacts {
    overflow-y: auto;
    top: 60px;
    bottom: 10px;
    margin-top: 10px;
    position: absolute;
    text-align: left;
    width: inherit;
}

#divNoContactFound {
    display: none;
    margin-top: 20px;
}

.css-contacts-show {
    display: block !important;
}

.css-contacts {
    list-style: none;
}

    .css-contacts li {
        display: table;
        margin-bottom: 10px;
    }

        .css-contacts li span {
            display: table-cell;
            vertical-align: top;
            padding: 5px;
        }

        .css-contacts li .css-contact-photo {
            height: 30px;
            width: 30px;
            display: inline-block;
            border: solid 1px #a1a1a1;
            background-image: url('../../Images/icons/common-face-user.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            border-radius: 30px;
        }

        .css-contacts li .css-contact-details {
            font-size: smaller;
        }

        .css-contacts li .css-email-icon {
            background-image: url('../../Images/icons/email.png');
            background-size: 18px 18px;
            background-repeat: no-repeat;
            background-position: -2px -2px;
            margin-top: 5px;
            display: block;
            padding-left: 20px !important;
            vertical-align: top !important;
        }

            .css-contacts li .css-email-icon:hover {
                text-decoration: underline;
            }

        .css-contacts li .css-mobile-icon {
            background-image: url('../../Images/icons/phone.png');
            background-size: 18px 18px;
            background-repeat: no-repeat;
            background-position: -2px -2px;
            margin-top: 5px;
            display: block;
            padding-left: 20px !important;
            vertical-align: top !important;
        }

        .css-contacts li .css-contact-name {
            color: #4bb78f;
            text-transform: uppercase;
        }

.divOrganisationStructure {
    background-color: #EFF0F4;
    padding: 10px;
    margin: 5px;
    display: none;
    margin-bottom: 10px;
    border-radius: 10px;
}

.css-contacts-structure {
    list-style: none;
}

    .css-contacts-structure li {
        display: table;
        margin-bottom: 10px;
        position: relative;
    }

        .css-contacts-structure li span {
            display: table-cell;
            vertical-align: top;
            padding: 5px;
        }

        .css-contacts-structure li .css-contact-photo {
            height: 30px;
            width: 30px;
            display: inline-block;
            border: solid 1px #a1a1a1;
            background-image: url('../../Images/icons/common-face-user.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            border-radius: 30px;
            position: relative;
        }

        .css-contacts-structure li .css-contact-details {
            font-size: smaller;
        }

        .css-contacts-structure li .css-email-icon {
            background-image: url('../../Images/icons/email.png');
            background-size: 18px 18px;
            background-repeat: no-repeat;
            background-position: -2px -2px;
            margin-top: 5px;
            display: block;
            padding-left: 20px !important;
            vertical-align: top !important;
        }

            .css-contacts-structure li .css-email-icon:hover {
                text-decoration: underline;
            }

        .css-contacts-structure li .css-mobile-icon {
            background-image: url('../../Images/icons/phone.png');
            background-size: 18px 18px;
            background-repeat: no-repeat;
            background-position: -2px -2px;
            margin-top: 5px;
            display: block;
            padding-left: 20px !important;
            vertical-align: top !important;
        }

        .css-contacts-structure li .css-contact-name {
            color: #4bb78f;
            text-transform: uppercase;
        }

        .css-contacts-structure li:after {
            position: absolute;
            top: 10px;
            left: 0;
            border: 2px solid #000;
            border-radius: 50%;
            display: inline-block;
            height: 24px;
            width: 24px;
            text-align: center;
            line-height: 24px;
            background: #fff;
        }

        .css-contacts-structure li:before {
            position: absolute;
            left: 20px;
            top: 10px;
            content: "";
            height: 100%;
            width: 0;
            border-left: 2px dashed #c1c1c1;
        }

        .css-contacts-structure li:last-of-type:before {
            border: none;
        }
input[type="text"] {
    border: solid 1px #6692ae;
    padding: 3px;
    width: 90%;
}

    input[type="text"]:focus {
        background-color: #e6efff;
        outline: none;
        -moz-box-shadow: 3px 3px 0px 0px #ffd800;
        -webkit-box-shadow: 3px 3px 0px 0px #ffd800;
        box-shadow: 0px 0px 6px 0px #ffd800;
    }

    input[type="text"]:disabled {
        cursor: no-drop;
        background-color: #f2f1f1;
    }
/*-------------------E-MAIL FIELD------------------*/
input[type="email"] {
    border: solid 1px #6692ae;
    padding: 3px;
    width: 90%;
}

    input[type="email"]:focus {
        background-color: #e6efff;
        outline: none;
        -moz-box-shadow: 3px 3px 0px 0px #ffd800;
        -webkit-box-shadow: 3px 3px 0px 0px #ffd800;
        box-shadow: 0px 0px 6px 0px #ffd800;
    }

    input[type="email"]:disabled {
        cursor: no-drop;
        background-color: #f2f1f1;
    }
/*-------------------NUMBER FIELD--------------*/
input[type="number"] {
    border: solid 1px #6692ae;
    padding: 3px;
    width: 90%;
}

    input[type="number"]:focus {
        background-color: #e6efff;
        outline: none;
        -moz-box-shadow: 3px 3px 0px 0px #ffd800;
        -webkit-box-shadow: 3px 3px 0px 0px #ffd800;
        box-shadow: 0px 0px 6px 0px #ffd800;
    }

    input[type="number"]:disabled {
        cursor: no-drop;
        background-color: #f2f1f1;
    }
/*---------PASSWORD FIELD----------------*/
input[type="password"] {
    border: solid 1px #6692ae;
    padding: 3px;
    width: 90%;
}

    input[type="password"]:focus {
        background-color: #e6efff;
        outline: none;
        -moz-box-shadow: 3px 3px 0px 0px #ffd800;
        -webkit-box-shadow: 3px 3px 0px 0px #ffd800;
        box-shadow: 0px 0px 6px 0px #ffd800;
    }

    input[type="password"]:disabled {
        cursor: no-drop;
        background-color: #f2f1f1;
    }

button::after {
    content: attr(data-superscript);
    vertical-align: super;
    padding-left: 5px;
    font-size: smaller;
    color: ghostwhite
}
/*-------------BUTTON STYLE 1----------------*/
.button1 {
    padding: 4px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: #65CEA7;
    border: solid 1px #059f58;
    font-family: Verdana;
    font-size: small;
    text-transform: uppercase;
    outline: none;
}

    .button1:hover {
        cursor: pointer;
        -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
        -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
        box-shadow: 0px 0px 4px 0px #a1a1a1;
        color: white;
    }

a {
    text-decoration: none;
}

img {
    border: none;
}

select {
    padding: 4px;
    width: 90%;
    outline: none;
    border: solid 1px #6692ae;
    text-transform: uppercase;
    background-color: #ffffff;
    background-image: none !important;
    border: 1px solid #c2c2c2;
    outline: none;
    min-height: 20px;
    -ms-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

    select option {
        font-family: Cambria;
        background-color: #FFF;
    }

    select optgroup {
        color: #333;
        font-family: Cambria;
        font-style: normal;
        background-color: #f1f1f1;
        font-size: small;
    }

        select optgroup option {
            font-family: Cambria;
            background-color: #FFF;
        }

    select:focus {
        background-color: #e6efff;
        outline: none;
        /*-moz-box-shadow: 3px 3px 0px 0px #ffd800;
        -webkit-box-shadow: 3px 3px 0px 0px #ffd800;
        box-shadow: 0px 0px 6px 0px #ffd800;*/
    }

    select:disabled {
        background-color: #f2f1f1;
        cursor: no-drop;
    }

textarea {
    border: solid 1px #6692ae;
    padding: 3px;
    width: 95%;
}

    textarea:focus {
        -moz-box-shadow: 3px 3px 0px 0px #ffd800;
        -webkit-box-shadow: 3px 3px 0px 0px #ffd800;
        box-shadow: 0px 0px 6px 0px #ffd800;
    }

    textarea:focus {
        background-color: #e6efff;
        outline: none;
    }

    textarea:disabled {
        cursor: no-drop;
        background-color: #f2f1f1;
    }


.mobileNotVerified {
    border: solid 1px #6692ae;
    padding-right: 5px;
    width: 90%;
    background-color: #fff;
    display: block;
    background-image: url('../../Images/icons/not-verified.png');
    background-size: 18px 18px;
    background-position: center right;
    background-repeat: no-repeat;
    cursor: pointer;
}

    .mobileNotVerified input[type="text"] {
        outline: none;
        border: none;
    }

.mobileVerified {
    border: solid 1px #6692ae;
    padding-right: 5px;
    width: 90%;
    background-color: #fff;
    display: block;
    background-image: url('../../Images/icons/verified.png');
    background-size: 18px 18px;
    background-position: center right;
    background-repeat: no-repeat;
}

    .mobileVerified input[type="text"] {
        outline: none;
        border: none;
    }

.mobileVerified_label {
    padding-right: 20px;
    display: block;
    background-image: url('../../Images/icons/verified.png');
    background-size: 18px 18px;
    background-position: center right;
    background-repeat: no-repeat;
    height: 18px;
}

.mobileNotVerified_label {
    padding-right: 20px;
    display: block;
    background-image: url('../../Images/icons/not-verified.png');
    background-size: 18px 18px;
    background-position: center right;
    background-repeat: no-repeat;
    height: 18px;
}

.emailNotVerified {
    border: solid 1px #6692ae;
    padding-right: 5px;
    width: 90%;
    background-color: #fff;
    display: block;
    background-image: url('../../Images/icons/not-verified.png');
    background-size: 18px 18px;
    background-position: center right;
    background-repeat: no-repeat;
    cursor: pointer;
}

    .emailNotVerified input[type="text"] {
        outline: none;
        border: none;
    }

.emailVerified {
    border: solid 1px #6692ae;
    padding-right: 5px;
    width: 90%;
    background-color: #fff;
    display: block;
    background-image: url('../../Images/icons/verified.png');
    background-size: 18px 18px;
    background-position: center right;
    background-repeat: no-repeat;
}

    .emailVerified input[type="text"] {
        outline: none;
        border: none;
    }

.emailVerified_label {
    padding-right: 20px;
    display: block;
    background-image: url('../../Images/icons/verified.png');
    background-size: 18px 18px;
    background-position: center right;
    background-repeat: no-repeat;
    height: 18px;
}

.emailNotVerified_label {
    padding-right: 20px;
    display: block;
    background-image: url('../../Images/icons/not-verified.png');
    background-size: 18px 18px;
    background-position: center right;
    background-repeat: no-repeat;
    height: 18px;
}

.textbox {
    border: solid 1px #6692ae;
    padding: 3px;
    width: 90%;
}

    .textbox:disabled {
        cursor: no-drop;
        background-color: #c2c2c2;
    }

textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-appearance: none !important;
    color: #282323;
    outline: 0;
    padding: 4px !important;
    line-height: 15px;
    font-size: 13px;
    font-weight: normal;
    vertical-align: top;
    background-color: #ffffff;
    min-height: 20px;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    border: 1px solid #c2c2c2;
    transition: background 0.2s linear 0s, box-shadow 0.2s linear 0s;
}

label input[type='text'], label input[type='number'] {
    top: -5px;
    position: relative;
}
/* General progress container */
.progress {
    position: relative;
    height: 20px;
    width: 100%;
    background-color: #e0e0e0;
    /*border-radius: 50px;*/
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

/* Basic progress bar styles */
.progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    line-height: 25px;
    color: #ffffff;
    text-align: center;
    padding-left: 15px;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    font-weight: bold;
    /* border-radius: 50px;*/
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease;
}

/* Stripes animation for active progress bars */
@keyframes progress-bar-stripes {
    from {
        background-position: 40px 0;
    }

    to {
        background-position: 0 0;
    }
}

/* Striped progress bars */
.progress-striped .progress-bar {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.25) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.25) 75%, transparent 75%, transparent);
    background-size: 40px 40px;
    animation: progress-bar-stripes 1s linear infinite;
}

/* Active striped progress bars */
.progress.active .progress-bar {
    animation: progress-bar-stripes 1s linear infinite;
}

/* Custom color classes for progress bar */
.progress-bar-success {
    background-color: #28a745; /* Green */
}

.progress-bar-info {
    background-color: #17a2b8; /* Blue */
}

.progress-bar-warning {
    background-color: #ffc107; /* Yellow */
}

.progress-bar-danger {
    background-color: #dc3545; /* Red */
}

/* Text inside the progress bar */
.progress-bar-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* Vertical progress bars */
.progress.vertical {
    width: 25px;
    height: 100%;
    display: inline-block;
    margin-right: 20px;
    background-color: #e0e0e0;
    /*border-radius: 15px;*/
    position: relative;
}

    .progress.vertical .progress-bar {
        width: 100%;
        height: 0;
        transition: height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Vertical progress bar text */
    .progress.vertical .progress-bar-text {
        bottom: 10px;
        top: auto;
        width: 100%;
        text-align: center;
        font-size: 12px;
    }

/* Example for smooth transition */
.progress-bar-custom {
    transition: width 1s ease-out;
}

/* Hover effect for progress bar */
.progress:hover .progress-bar {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    transform: scale(1.05);
}

.MultiCheckBox {
    border: 1px solid #c2c2c2;
    padding: 5px;
    cursor: pointer;
    background-color: #fff;
}

    .MultiCheckBox .k-icon {
        font-size: 15px;
        float: right;
        font-weight: bolder;
        margin-top: -7px;
        height: 10px;
        width: 14px;
        color: #787878;
    }

.MultiCheckBoxDetail {
    display: none;
    position: absolute;
    border: 1px solid #e2e2e2;
    overflow-y: hidden;
}

.MultiCheckBoxDetailBody {
    overflow-y: scroll;
    background-color: #fff;
    z-index: 10;
    position: relative;
    border: solid 1px #c1c1c1;
}

.MultiCheckBoxDetail .cont {
    clear: both;
    overflow: hidden;
    padding: 5px;
    cursor: pointer;
}

    .MultiCheckBoxDetail .cont:hover {
        background-color: #cfcfcf;
    }

.MultiCheckBoxDetailBody > div > div {
    float: left;
    margin-left: 5px;
}

.MultiCheckBoxDetail > div > div:nth-child(1) {
}

.MultiCheckBoxDetailHeader {
    overflow: hidden;
    position: relative;
    height: 28px;
    background-color: #424f63;
    cursor: pointer;
    z-index: 1;
}

    .MultiCheckBoxDetailHeader > input {
        position: absolute;
        top: 7px;
        left: 10px;
    }

    .MultiCheckBoxDetailHeader > div {
        position: absolute;
        top: 5px;
        left: 30px;
        color: #fff;
    }

.exam-forms-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    margin: 40px auto;
    max-width: 1200px;
    padding: 0 20px;
}

.exam-form-card {
    background: linear-gradient(to bottom right, #ffffff, #f9f9f9);
    border: 1px solid #e6e6e6;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    width: 320px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .exam-form-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
    }

.exam-form-header {
    text-align: center;
    margin-bottom: 15px;
}

    .exam-form-header h3 {
        margin: 0;
        font-size: 20px;
        color: #2c3e50;
        font-weight: 600;
        text-transform: uppercase;
    }

    .exam-form-header .exam-form-session {
        font-size: 14px;
        color: #888;
        margin-top: 4px;
    }

.exam-form-body p {
    margin: 8px 0;
    font-size: 15px;
    color: #444;
    line-height: 1.5;
}

.exam-form-footer {
    text-align: center;
    margin-top: 20px;
}

    .exam-form-footer .btn {
        padding: 10px 20px;
        font-size: 15px;
        border: none;
        border-radius: 25px;
        cursor: pointer;
        transition: background 0.3s ease, transform 0.2s ease;
    }

    .exam-form-footer .btn-primary {
        background: linear-gradient(135deg, #3498db, #6dd5fa);
        color: #fff;
    }

        .exam-form-footer .btn-primary:hover {
            background: linear-gradient(135deg, #2980b9, #57c1eb);
            transform: scale(1.05);
        }

.no-exam-forms {
    text-align: center;
    font-size: 18px;
    color: #999;
    margin-top: 40px;
    font-style: italic;
}

.flip {
  -webkit-perspective: 800;
   width: 400px;
   height: 200px;
    position: relative;
    margin: 50px auto;
}
.flip .card.flipped {
  -webkit-transform: rotatex(-180deg);
}
.flip .card {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.5s;
}
.flip .card .face {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden ;
  z-index: 2;
    font-family: Georgia;
    font-size: 3em;
    text-align: center;
    line-height: 200px;
}
.flip .card .front {
  position: absolute;
  z-index: 1;
    background: black;
    color: white;
    cursor: pointer;
}
.flip .card .back {
  -webkit-transform: rotatex(-180deg);
    background: blue;
    background: white;
    color: black;
    cursor: pointer;
}
@font-face {
    font-family: pcrcFonts;
    src: url('../../fonts/exo/Exo-ExtraLight.jpg') format('opentype');
}

@font-face {
    font-family: pcrcTxtFonts;
    src: url('../../fonts/exo/FRAMDCN.jpg') format('truetype');
}

/*-------------------------------------------------------------------------------------------------------------------------------*/
/* 01 - FONTS */
/*-------------------------------------------------------------------------------------------------------------------------------*/
@font-face {
    font-family: 'black';
    src: url('../../Fonts/erp/proximanova-black-webfont.eot');
    src: url('../../Fonts/erp/proximanova-black-webfont.eot?#iefix') format('embedded-opentype'), url('../../Fonts/erp/proximanova-black-webfont.woff2') format('woff2'), url('../../Fonts/erp/proximanova-black-webfont.woff') format('woff'), url('../../Fonts/erp/proximanova-black-webfont.ttf') format('truetype'), url('../../Fonts/erp/proximanova-black-webfont.svg#proxima_novablack') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bold';
    src: url('../../Fonts/erp/proximanova-extrabold-webfont.eot');
    src: url('../../Fonts/erp/proximanova-extrabold-webfont.eot?#iefix') format('embedded-opentype'), url('../../Fonts/erp/proximanova-extrabold-webfont.woff2') format('woff2'), url('../../Fonts/erp/proximanova-extrabold-webfont.woff') format('woff'), url('../../Fonts/erp/proximanova-extrabold-webfont.ttf') format('truetype'), url('../../Fonts/erp/proximanova-extrabold-webfont.svg#proxima_novaextrabold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'regular';
    src: url('../../Fonts/erp/proximanova-regular-webfont.eot');
    src: url('../../Fonts/erp/proximanova-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../../Fonts/erp/proximanova-regular-webfont.woff2') format('woff2'), url('../../Fonts/erp/proximanova-regular-webfont.woff') format('woff'), url('../../Fonts/erp/proximanova-regular-webfont.ttf') format('truetype'), url('../../Fonts/erp/proximanova-regular-webfont.svg#proxima_nova_rgregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: erpRubik;
    src: url('../../Fonts/erp/Rubik/static/rubik-regular.ttf') format('truetype');
}

@font-face {
    font-family: erpRubik-bold;
    src: url('../../Fonts/erp/Rubik/static/Rubik-Bold.ttf') format('truetype');
}

body {
    font-family:erpRubik;
    font-size:14px;
    text-align:left;
}
.newTabHelp {
    height:24px;
    width:24px;
    margin-left:20px;
    display:inline-block;
    background-image:url('../../images/icons/newTab.png');
    background-size:24px 24px;
    top:5px;
    position:absolute;
    background-repeat:no-repeat;
    cursor:pointer;
}
#jquery-script-menu{position:absolute;height:90px;width:100%;top:0;left:0;border-top:5px solid #316594;background:#fff;-moz-box-shadow:0 2px 3px 0 rgba(0,0,0,.16);-webkit-box-shadow:0 2px 3px 0 rgba(0,0,0,.16);box-shadow:0 2px 3px 0 rgba(0,0,0,.16);z-index:999999;padding:10px 0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.jquery-script-center{max-width:960px;margin:0 auto}.jquery-script-center ul{width:212px;float:left;line-height:45px;margin:0;padding:0;list-style:none}.jquery-script-center a{text-decoration:none}.jquery-script-ads{max-width:728px;height:90px;float:right}.jquery-script-clear{clear:both;height:0}#carbonads{display:block;overflow:hidden;max-width:728px;position:relative;font-size:22px;box-sizing:content-box}#carbonads>span{display:block}#carbonads a{color:#4078c0;text-decoration:none}#carbonads a:hover{color:#3664a3}.carbon-wrap{display:flex;align-items:center}.carbon-img{display:block;margin:0;line-height:1}.carbon-img img{display:block;height:90px;width:auto}.carbon-text{display:block;padding:0 1em;line-height:1.35;text-align:left}.carbon-poweredby{display:block;position:absolute;bottom:0;right:0;padding:6px 10px;text-align:center;text-transform:uppercase;letter-spacing:.5px;font-weight:600;font-size:8px;border-top-left-radius:4px;line-height:1;color:#aaa!important}@media only screen and (min-width:320px) and (max-width:759px){.carbon-text{font-size:14px}}@media only screen and (max-width:1023px){.jquery-script-ads{display:none}}

#messagePan {
    box-shadow: 0px 0px 4px 0px #a1a1a1;
    border-radius: 2px 2px 2px 2px;
    padding: 5px;
    top: 60px;
    left: 210px;
    right: 10px;
    padding-left: 50px;
    position: absolute;
    display: none;
    font-size: 14px;
    font-family: erpRubik;
    padding-top: 10px;
    z-index: 90000;
}

    #messagePan a:hover {
        text-decoration: underline;
    }

.messagePan_AfterScroll {
    top: 0px;
    z-index: 20;
    position: fixed;
}

#messagePanShort {
    box-shadow: 0px 0px 4px 0px #a1a1a1;
    border-radius: 2px 2px 2px 2px;
    padding: 5px;
    top: 60px;
    right: 10px;
    position: fixed;
    display: none;
    font-size: 14px;
    font-family: erpRubik;
    padding-top: 10px;
    z-index: 90000;
    width: 250px;
    padding-left: 35px;
}

.closePan {
    cursor: pointer;
    padding: 2px;
    text-align: right;
    float: right;
    margin-left: 20px;
}

.redMsg {
    background-color: red;
    background: -webkit-linear-gradient(90deg,red,#fff); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(red,#fff); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(red,#fff); /* For Firefox 3.6 to 15 */
    background: linear-gradient(left top,red,#fff); /* Standard syntax */
    color: black;
    float: left;
}

    .redMsg .pic {
        display: block;
        height: 25px;
        width: 25px;
        background-image: url('../../images/error.png');
        background-repeat: no-repeat;
        background-position: left;
        background-position-x: 0px;
        background-size: 25px;
        float: left;
        left: 10px;
        top: 5px;
        position: absolute;
    }

    .redMsg a {
        text-decoration: none;
        color: white;
        margin-left: 10px;
    }

.greenMsg {
    background-color: #65CEA7;
    background: -webkit-linear-gradient(90deg,#65CEA7,#fff); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#65CEA7,#fff); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#65CEA7,#fff); /* For Firefox 3.6 to 15 */
    background: linear-gradient(left top,#65CEA7,#fff); /* Standard syntax */
    color: black;
    float: left;
}

    .greenMsg .pic {
        display: block;
        height: 25px;
        width: 25px;
        background-image: url('../../images/success.png');
        background-repeat: no-repeat;
        background-position: left;
        background-position-x: 0px;
        background-size: 25px;
        float: left;
        left: 10px;
        top: 5px;
        position: absolute;
    }

    .greenMsg a {
        text-decoration: none;
        color: yellow;
        margin-left: 10px;
    }

.yellowMsg {
    background-color: yellow;
    color: Black;
    float: left;
    background: -webkit-linear-gradient(90deg,yellow,#fff); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(yellow,#fff); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(yellow,#fff); /* For Firefox 3.6 to 15 */
    background: linear-gradient(left top,yellow,#fff); /* Standard syntax */
}

    .yellowMsg .pic {
        display: block;
        height: 25px;
        width: 25px;
        background-image: url('../../images/warning.png');
        background-repeat: no-repeat;
        background-position: left;
        background-position-x: 0px;
        background-size: 25px;
        float: left;
        left: 10px;
        top: 5px;
        position: absolute;
    }

    .yellowMsg a {
        text-decoration: none;
        color: red;
        margin-left: 10px;
    }

.normalMsg {
    background-color: #003300;
    color: White;
    float: left;
}

.circulars {
    list-style: none;
}

    .circulars li {
        margin-bottom: 10px;
        background-repeat: no-repeat;
        background-position-x: 0px;
        background-position-y: 0px;
        padding: 20px;
        padding-top: 10px;
        padding-right: 0px;
        position: relative;
        background-repeat: no-repeat;
        background-position-x: 15px;
        background-position-y: 10px;
        font-family: erpRubik;
        color: #000 !important;
        background-color: #eff0f4;
        border-radius: 10px;
        padding-bottom: 10px;
    }

        .circulars li:hover {
            -moz-box-shadow: 3px 3px 0px 0px #a1a1a1;
            -webkit-box-shadow: 3px 3px 0px 0px #a1a1a1;
            box-shadow: 0px 0px 2px 0px #a1a1a1;
        }

.newc {
    background-image: url('../../images/gifimages/gif-new.gif');
}

.oldc {
    background-image: url('../../images/icons/right-arrow.png');
    background-size: 14px 14px;
}

.circularMsg {
    padding-left: 30px;
    font-family: erpRubik;
    font-size: 14px;
    width: 95%;
    margin-bottom: 10px;
}

.circularCategory {
    color: gray;
    font-size: smaller;
    font-style: normal;
    display: inline-block;
    text-transform: uppercase;
    background-color: aliceblue;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    color: gray;
    border-radius: 10px 10px 0px 0px;
    min-width: 150px;
    position: relative;
    bottom: -10px;
}

.circularPosted {
    color: gray;
    font-size: 14px;
    font-style: italic;
    float: right;
    display: block;
}

.circular_email {
    display: block;
    background-image: url('../../images/forward.png');
    background-size: 100% 100%;
    height: 32px;
    width: 32px;
    float: right;
    top: 0px;
    right: 10px;
    position: relative;
    cursor: pointer;
}

.css_paging_bar {
    margin-top:10px;
    background-color:#F2F2F2;
    padding:5px;
    border:solid 1px #c1c1c1;
    width:95%;
}

    .css_paging_bar table tr th {
        color:green;
        font-weight:normal;
    }
/* Main scrollbar styles */
::-webkit-scrollbar {
    width: 10px; /* Width for vertical scrollbar */
    height: 10px; /* Height for horizontal scrollbar */
    background: #f4f4f4; /* Light background */
}

/* Scrollbar track */
::-webkit-scrollbar-track {
    background: linear-gradient(135deg, #e0e0e0, #f8f8f8); /* Soft gradient */
    border-radius: 5px; /* Rounded corners for the track */
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1); /* Subtle inner shadow */
}

/* Scrollbar handle */
::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #65cea7, #2d9a76); /* Gradient handle */
    border-radius: 5px; /* Smooth rounded corners */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* 3D effect */
    transition: background 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effects */
}

    /* Scrollbar handle hover */
    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #3ec98d, #208b63); /* Brighter gradient on hover */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Enhanced shadow */
    }

/* Scrollbar buttons (optional) */
::-webkit-scrollbar-button {
    background: linear-gradient(135deg, #cccccc, #dddddd); /* Subtle gradient for buttons */
    border-radius: 50%; /* Circular button style */
    width: 12px;
    height: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease, transform 0.2s ease;
}

    ::-webkit-scrollbar-button:hover {
        background: linear-gradient(135deg, #bbbbbb, #cccccc); /* Slightly darker on hover */
        transform: scale(1.2); /* Button scales up slightly */
    }

/* Scrollbar corner (for both vertical and horizontal scrollbars) */
::-webkit-scrollbar-corner {
    background: linear-gradient(135deg, #dddddd, #eeeeee); /* Corner style */
    border-radius: 3px;
}

/*Commented Due to Minification, In case of independent, this will be uncommented*/
/*input[type=checkbox] {
            visibility: hidden;
        }*/

/* SLIDE ONE */
.slideOne {
    width: 50px;
    height: 10px;
    background: #333;
    margin: 20px auto;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    position: relative;
    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
}

    .slideOne label {
        display: block;
        width: 16px;
        height: 16px;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
        -webkit-transition: all .4s ease;
        -moz-transition: all .4s ease;
        -o-transition: all .4s ease;
        -ms-transition: all .4s ease;
        transition: all .4s ease;
        cursor: pointer;
        position: absolute;
        top: -3px;
        left: -3px;
        -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
        -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
        box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
        background: #fcfff4;
        background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
    }

    .slideOne input[type=checkbox]:checked + label {
        left: 37px;
    }

/* SLIDE TWO */
.slideTwo {
    width: 80px;
    height: 30px;
    background: #333;
    margin: 20px auto;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    position: relative;
    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
}

    .slideTwo:after {
        content: '';
        position: absolute;
        top: 14px;
        left: 14px;
        height: 2px;
        width: 52px;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
        background: #111;
        -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
        -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
        box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
    }

    .slideTwo label {
        display: block;
        width: 22px;
        height: 22px;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
        -webkit-transition: all .4s ease;
        -moz-transition: all .4s ease;
        -o-transition: all .4s ease;
        -ms-transition: all .4s ease;
        transition: all .4s ease;
        cursor: pointer;
        position: absolute;
        top: 4px;
        z-index: 1;
        left: 4px;
        -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
        -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
        box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
        background: #fcfff4;
        background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
    }

        .slideTwo label:after {
            content: '';
            position: absolute;
            width: 10px;
            height: 10px;
            -webkit-border-radius: 50px;
            -moz-border-radius: 50px;
            border-radius: 50px;
            background: #333;
            left: 6px;
            top: 6px;
            -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,1), 0px 1px 0px rgba(255,255,255,0.9);
            -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,1), 0px 1px 0px rgba(255,255,255,0.9);
            box-shadow: inset 0px 1px 1px rgba(0,0,0,1), 0px 1px 0px rgba(255,255,255,0.9);
        }

    .slideTwo input[type=checkbox]:checked + label {
        left: 54px;
    }

        .slideTwo input[type=checkbox]:checked + label:after {
            background: #00bf00;
        }

/* SLIDE THREE */
.slideThree {
    width: 180px;
    height: 26px;
    background: #c1c1c1;
    margin: 20px auto;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    position: relative;
    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
}

    .slideThree:after {
        content: 'HALF DAY';
        font: 12px/26px Arial, sans-serif;
        color: #000;
        position: absolute;
        right: 10px;
        z-index: 0;
        font-weight: bold;
        text-shadow: 1px 1px 0px rgba(255,255,255,.15);
    }

    .slideThree:before {
        content: 'FULL DAY';
        font: 12px/26px Arial, sans-serif;
        color: #fcfff4;
        position: absolute;
        left: 10px;
        z-index: 0;
        font-weight: bold;
    }

    .slideThree label {
        display: block;
        width: 90px;
        height: 20px;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
        -webkit-transition: all .4s ease;
        -moz-transition: all .4s ease;
        -o-transition: all .4s ease;
        -ms-transition: all .4s ease;
        transition: all .4s ease;
        cursor: pointer;
        position: absolute;
        top: 3px;
        left: 3px;
        z-index: 1;
        -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
        -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
        box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
        background: #fcfff4;
        background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
    }

    .slideThree input[type=checkbox]:checked + label {
        left: 87px;
    }

/* SLIDE ActivePassive */
.slideActivePassive {
    width: 180px;
    height: 26px;
    background: #c1c1c1;
    margin: 20px auto;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    position: relative;
    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
}

    .slideActivePassive:after {
        content: 'Passive';
        font: 12px/26px Arial, sans-serif;
        color: #000;
        position: absolute;
        right: 10px;
        z-index: 0;
        font-weight: bold;
        text-shadow: 1px 1px 0px rgba(255,255,255,.15);
    }

    .slideActivePassive:before {
        content: 'Active';
        font: 12px/26px Arial, sans-serif;
        color: #fcfff4;
        position: absolute;
        left: 10px;
        z-index: 0;
        font-weight: bold;
    }

    .slideActivePassive label {
        display: block;
        width: 90px;
        height: 20px;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
        -webkit-transition: all .4s ease;
        -moz-transition: all .4s ease;
        -o-transition: all .4s ease;
        -ms-transition: all .4s ease;
        transition: all .4s ease;
        cursor: pointer;
        position: absolute;
        top: 3px;
        left: 3px;
        z-index: 1;
        -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
        -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
        box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
        background: #fcfff4;
        background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
    }

    .slideActivePassive input[type=checkbox]:checked + label {
        left: 87px;
    }

/* SLIDE Specific or All */
.slideSpecificAll {
    width: 180px;
    height: 26px;
    background: #c1c1c1;
    margin: 20px auto;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    position: relative;
    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
}

    .slideSpecificAll:after {
        content: 'Specific';
        font: 12px/26px Arial, sans-serif;
        color: #000;
        position: absolute;
        right: 10px;
        z-index: 0;
        font-weight: bold;
        text-shadow: 1px 1px 0px rgba(255,255,255,.15);
    }

    .slideSpecificAll:before {
        content: 'All';
        font: 12px/26px Arial, sans-serif;
        color: #fcfff4;
        position: absolute;
        left: 10px;
        z-index: 0;
        font-weight: bold;
    }

    .slideSpecificAll label {
        display: block;
        width: 90px;
        height: 20px;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
        -webkit-transition: all .4s ease;
        -moz-transition: all .4s ease;
        -o-transition: all .4s ease;
        -ms-transition: all .4s ease;
        transition: all .4s ease;
        cursor: pointer;
        position: absolute;
        top: 3px;
        left: 3px;
        z-index: 1;
        -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
        -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
        box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
        background: #fcfff4;
        background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
    }

    .slideSpecificAll input[type=checkbox]:checked + label {
        left: 87px;
    }

/* SLIDE ActivePassive */
.slideOnlineOffline {
    width: 160px;
    height: 26px;
    background: #c1c1c1;
    margin: 20px auto;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    position: relative;
    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
}

    .slideOnlineOffline:after {
        content: 'Offline';
        font: 12px/26px Arial, sans-serif;
        color: #000;
        position: absolute;
        right: 10px;
        z-index: 0;
        font-weight: bold;
        text-shadow: 1px 1px 0px rgba(255,255,255,.15);
    }

    .slideOnlineOffline:before {
        content: 'Online';
        font: 12px/26px Arial, sans-serif;
        color: #009400;
        position: absolute;
        left: 10px;
        z-index: 0;
        font-weight: bold;
    }

    .slideOnlineOffline label {
        display: block;
        width: 90px;
        height: 20px;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
        -webkit-transition: all .4s ease;
        -moz-transition: all .4s ease;
        -o-transition: all .4s ease;
        -ms-transition: all .4s ease;
        transition: all .4s ease;
        cursor: pointer;
        position: absolute;
        top: 3px;
        left: 3px;
        z-index: 1;
        -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
        -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
        box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
        background: #fcfff4;
        background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
    }

    .slideOnlineOffline input[type=checkbox]:checked + label {
        left: 67px;
    }

/* SLIDE YesNo */
.slideYesNo {
    width: 100px;
    height: 30px;
    background: #c1c1c1;
    margin: 20px auto;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    position: relative;
    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
}

    .slideYesNo:after {
        content: 'No';
        font: 16px/30px Roboto;
        color: #000;
        position: absolute;
        right: 10px;
        z-index: 0;
        font-weight: bold;
        text-shadow: 1px 1px 0px rgba(255,255,255,.15);
    }

    .slideYesNo:before {
        content: 'Yes';
        font: 16px/30px Roboto;
        color: #fcfff4;
        position: absolute;
        left: 10px;
        z-index: 0;
        font-weight: bold;
    }

    .slideYesNo label {
        display: block;
        width: 50px;
        height: 24px;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
        -webkit-transition: all .4s ease;
        -moz-transition: all .4s ease;
        -o-transition: all .4s ease;
        -ms-transition: all .4s ease;
        transition: all .4s ease;
        cursor: pointer;
        position: absolute;
        top: 3px;
        left: 3px;
        z-index: 1;
        -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
        -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
        box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
        background: #fcfff4;
        background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
    }

    .slideYesNo input[type=checkbox]:checked + label {
        left: 47px;
    }

/* ROUNDED ONE */
.roundedOne {
    width: 28px;
    height: 28px;
    background: #fcfff4;
    background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
    margin: 20px auto;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    position: relative;
}

    .roundedOne label {
        cursor: pointer;
        position: absolute;
        width: 20px;
        height: 20px;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
        left: 4px;
        top: 4px;
        -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
        -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
        box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
        background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
        background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
        background: -o-linear-gradient(top, #222 0%, #45484d 100%);
        background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
        background: linear-gradient(top, #222 0%, #45484d 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
    }

        .roundedOne label:after {
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            filter: alpha(opacity=0);
            opacity: 0;
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            background: #00bf00;
            background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);
            background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);
            background: -o-linear-gradient(top, #00bf00 0%, #009400 100%);
            background: -ms-linear-gradient(top, #00bf00 0%, #009400 100%);
            background: linear-gradient(top, #00bf00 0%, #009400 100%);
            -webkit-border-radius: 50px;
            -moz-border-radius: 50px;
            border-radius: 50px;
            top: 2px;
            left: 2px;
            -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
            -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
            box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
        }

        .roundedOne label:hover::after {
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
            filter: alpha(opacity=30);
            opacity: 0.3;
        }

    .roundedOne input[type=checkbox]:checked + label:after {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        opacity: 1;
    }

/* ROUNDED TWO */
.roundedTwo {
    width: 28px;
    height: 28px;
    background: #fcfff4;
    background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
    margin: 20px auto;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    position: relative;
}

    .roundedTwo label {
        cursor: pointer;
        position: absolute;
        width: 20px;
        height: 20px;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
        left: 4px;
        top: 4px;
        -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
        -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
        box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
        background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
        background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
        background: -o-linear-gradient(top, #222 0%, #45484d 100%);
        background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
        background: linear-gradient(top, #222 0%, #45484d 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
    }

        .roundedTwo label:after {
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            filter: alpha(opacity=0);
            opacity: 0;
            content: '';
            position: absolute;
            width: 9px;
            height: 5px;
            background: transparent;
            top: 5px;
            left: 4px;
            border: 3px solid #fcfff4;
            border-top: none;
            border-right: none;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

        .roundedTwo label:hover::after {
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
            filter: alpha(opacity=30);
            opacity: 0.3;
        }

    .roundedTwo input[type=checkbox]:checked + label:after {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        opacity: 1;
    }

/* SQUARED ONE */
.squaredOne {
    width: 28px;
    height: 28px;
    background: #fcfff4;
    background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
    margin: 20px auto;
    -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    position: relative;
}

    .squaredOne label {
        cursor: pointer;
        position: absolute;
        width: 20px;
        height: 20px;
        left: 4px;
        top: 4px;
        -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
        -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
        box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
        background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
        background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
        background: -o-linear-gradient(top, #222 0%, #45484d 100%);
        background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
        background: linear-gradient(top, #222 0%, #45484d 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
    }

        .squaredOne label:after {
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            filter: alpha(opacity=0);
            opacity: 0;
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            background: #00bf00;
            background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);
            background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);
            background: -o-linear-gradient(top, #00bf00 0%, #009400 100%);
            background: -ms-linear-gradient(top, #00bf00 0%, #009400 100%);
            background: linear-gradient(top, #00bf00 0%, #009400 100%);
            top: 2px;
            left: 2px;
            -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
            -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
            box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
        }

        .squaredOne label:hover::after {
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
            filter: alpha(opacity=30);
            opacity: 0.3;
        }

    .squaredOne input[type=checkbox]:checked + label:after {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        opacity: 1;
    }

/* SQUARED TWO */
.squaredTwo {
    width: 28px;
    height: 28px;
    background: #fcfff4;
    background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
    margin: 20px auto;
    -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    position: relative;
}

    .squaredTwo label {
        cursor: pointer;
        position: absolute;
        width: 20px;
        height: 20px;
        left: 4px;
        top: 4px;
        -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
        -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
        box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
        background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
        background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
        background: -o-linear-gradient(top, #222 0%, #45484d 100%);
        background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
        background: linear-gradient(top, #222 0%, #45484d 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
    }

        .squaredTwo label:after {
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            filter: alpha(opacity=0);
            opacity: 0;
            content: '';
            position: absolute;
            width: 9px;
            height: 5px;
            background: transparent;
            top: 4px;
            left: 4px;
            border: 3px solid #fcfff4;
            border-top: none;
            border-right: none;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

        .squaredTwo label:hover::after {
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
            filter: alpha(opacity=30);
            opacity: 0.3;
        }

    .squaredTwo input[type=checkbox]:checked + label:after {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        opacity: 1;
    }


/* SQUARED THREE */
.squaredThree {
    width: 20px;
    margin: 20px auto;
    position: relative;
}

    .squaredThree label {
        cursor: pointer;
        position: absolute;
        width: 20px;
        height: 20px;
        top: 0;
        border-radius: 4px;
        -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
        -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
        box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
        background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
        background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
        background: -o-linear-gradient(top, #222 0%, #45484d 100%);
        background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
        background: linear-gradient(top, #222 0%, #45484d 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
    }

        .squaredThree label:after {
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            filter: alpha(opacity=0);
            opacity: 0;
            content: '';
            position: absolute;
            width: 9px;
            height: 5px;
            background: transparent;
            top: 4px;
            left: 4px;
            border: 3px solid #fcfff4;
            border-top: none;
            border-right: none;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

        .squaredThree label:hover::after {
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
            filter: alpha(opacity=30);
            opacity: 0.3;
        }

    .squaredThree input[type=checkbox]:checked + label:after {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        opacity: 1;
    }

/* SQUARED FOUR */
.squaredFour {
    width: 20px;
    margin: 20px auto;
    position: relative;
}

    .squaredFour label {
        cursor: pointer;
        position: absolute;
        width: 20px;
        height: 20px;
        top: 0;
        border-radius: 4px;
        -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
        -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
        box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
        background: #fcfff4;
        background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
    }

        .squaredFour label:after {
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            filter: alpha(opacity=0);
            opacity: 0;
            content: '';
            position: absolute;
            width: 9px;
            height: 5px;
            background: transparent;
            top: 4px;
            left: 4px;
            border: 3px solid #333;
            border-top: none;
            border-right: none;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

        .squaredFour label:hover::after {
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
            filter: alpha(opacity=30);
            opacity: 0.5;
        }

    .squaredFour input[type=checkbox]:checked + label:after {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        opacity: 1;
    }

@import url('https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap');

body[mdtimepicker-display='on'] {
    overflow: hidden;
}

.mdtimepicker {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    font-family: Roboto, sans-serif;
    font-size: 14px;
    background-color: rgba(10,10,10,.65);
    transition: background-color .28s ease;
    z-index: 100001;
}

    .mdtimepicker.hidden {
        display: none;
    }

    .mdtimepicker.animate {
        background-color: transparent;
    }

.mdtp__wrapper {
    position: absolute;
    display: flex;
    flex-direction: column;
    left: 50%;
    bottom: 24px;
    min-width: 280px;
    opacity: 1;
    outline: none;
    user-select: none;
    border-radius: 4px;
    transform: translateX(-50%) scale(1);
    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
    transition: transform .28s ease, opacity .28s ease;
    overflow: hidden;
}

    .mdtp__wrapper.animate {
        transform: translateX(-50%) scale(1.05);
        opacity: 0;
    }

.mdtp__time_holder {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 46px;
    padding: 20px 24px;
    color: rgba(255,255,255,.5);
    text-align: center;
    background-color: #1565c0;
}

    .mdtp__time_holder > span {
        display: inline-block;
        line-height: 48px;
        cursor: default;
    }

        .mdtp__time_holder > span:not(.mdtp__timedots):not(.mdtp__ampm) {
            cursor: pointer;
            margin: 0 4px;
        }

    .mdtp__time_holder .mdtp__time_h.active, .mdtp__time_holder .mdtp__time_m.active {
        color: #fafafa;
    }

    .mdtp__time_holder .mdtp__ampm {
        font-size: 18px;
    }

.mdtp__clock_holder {
    position: relative;
    background-color: #fff;
}

    .mdtp__clock_holder .mdtp__clock {
        position: relative;
        width: 250px;
        height: 250px;
        margin: 20px;
        border-radius: 50%;
        background-color: #eee;
    }

.mdtp__clock .mdtp__am, .mdtp__clock .mdtp__pm {
    display: block;
    position: absolute;
    bottom: -8px;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.1);
    background: rgba(0,0,0,.05);
    transition: background-color .2s ease, color .2s;
    z-index: 3;
}

.mdtp__clock .mdtp__am {
    left: -8px;
}

.mdtp__clock .mdtp__pm {
    right: -8px;
}

    .mdtp__clock .mdtp__am:hover, .mdtp__clock .mdtp__pm:hover {
        background-color: rgba(0,0,0,.1);
    }

    .mdtp__clock .mdtp__am.active, .mdtp__clock .mdtp__pm.active {
        color: #fafafa;
        background-color: #1565c0;
    }

.mdtp__clock .mdtp__clock_dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 4px;
    background-color: #1565c0;
    border-radius: 50%;
}

.mdtp__clock .mdtp__hour_holder,
.mdtp__clock .mdtp__minute_holder {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    transform: scale(1);
    transition: transform .35s cubic-bezier(0.4, 0.0, 0.2, 1), opacity .35s ease;
    overflow: hidden;
}

    .mdtp__clock .mdtp__hour_holder.animate {
        transform: scale(1.2);
        opacity: 0;
    }

    .mdtp__clock .mdtp__minute_holder.animate {
        transform: scale(.8);
        opacity: 0;
    }

    .mdtp__clock .mdtp__hour_holder.hidden, .mdtp__clock .mdtp__minute_holder.hidden {
        display: none;
    }

.mdtp__clock .mdtp__digit {
    position: absolute;
    width: 50%;
    top: 50%;
    left: 0;
    margin-top: -16px;
    transform-origin: right center;
    z-index: 1;
}

    .mdtp__clock .mdtp__digit.inner--digit {
        width: 36%;
        left: 14%;
        z-index: 2;
    }

    .mdtp__clock .mdtp__digit span {
        display: inline-block;
        width: 32px;
        height: 32px;
        line-height: 32px;
        margin-left: 8px;
        text-align: center;
        border-radius: 50%;
        cursor: pointer;
        transition: background-color .28s, color .14s;
    }

    .mdtp__digit.active span,
    .mdtp__clock .mdtp__digit:not(.digit--disabled) span:hover {
        background-color: #1565c0 !important;
        color: #fff;
        z-index: 2;
    }

.mdtp__digit.digit--disabled span {
    color: rgb(200,200,200);
    cursor: not-allowed;
    background-color: transparent !important;
}

.mdtp__digit.active:before {
    content: '';
    display: block;
    position: absolute;
    top: calc(50% - 1px);
    right: 0;
    height: 2px;
    width: calc(100% - 40px);
    background-color: #1565c0;
}

.mdtp__clock .mdtp__minute_holder .mdtp__digit {
    font-size: 13px;
}

    .mdtp__clock .mdtp__minute_holder .mdtp__digit:not(.marker) {
        margin-top: -6px;
        height: 12px;
    }

        .mdtp__clock .mdtp__minute_holder .mdtp__digit:not(.marker).active:before {
            width: calc(100% - 26px);
        }

        .mdtp__clock .mdtp__minute_holder .mdtp__digit:not(.marker) span {
            width: 12px;
            height: 12px;
            line-height: 12px;
            margin-left: 14px;
        }

    .mdtp__clock .mdtp__minute_holder .mdtp__digit.marker {
        margin-top: -12px;
    }

        .mdtp__clock .mdtp__minute_holder .mdtp__digit.marker.active:before {
            width: calc(100% - 34px);
        }

        .mdtp__clock .mdtp__minute_holder .mdtp__digit.marker span {
            width: 24px;
            height: 24px;
            line-height: 24px;
            margin-left: 10px;
        }

.mdtp__digit.rotate--15 {
    transform: rotate(-15deg);
}

    .mdtp__digit.rotate--15 span {
        transform: rotate(15deg);
    }

.mdtp__digit.rotate-6 {
    transform: rotate(6deg);
}

    .mdtp__digit.rotate-6 span {
        transform: rotate(-6deg);
    }

.mdtp__digit.rotate-12 {
    transform: rotate(12deg);
}

    .mdtp__digit.rotate-12 span {
        transform: rotate(-12deg);
    }

.mdtp__digit.rotate-15 {
    transform: rotate(15deg);
}

    .mdtp__digit.rotate-15 span {
        transform: rotate(-15deg);
    }

.mdtp__digit.rotate-18 {
    transform: rotate(18deg);
}

    .mdtp__digit.rotate-18 span {
        transform: rotate(-18deg);
    }

.mdtp__digit.rotate-24 {
    transform: rotate(24deg);
}

    .mdtp__digit.rotate-24 span {
        transform: rotate(-24deg);
    }

.mdtp__digit.rotate-30 {
    transform: rotate(30deg);
}

    .mdtp__digit.rotate-30 span {
        transform: rotate(-30deg);
    }

.mdtp__digit.rotate-36 {
    transform: rotate(36deg);
}

    .mdtp__digit.rotate-36 span {
        transform: rotate(-36deg);
    }

.mdtp__digit.rotate-42 {
    transform: rotate(42deg);
}

    .mdtp__digit.rotate-42 span {
        transform: rotate(-42deg);
    }

.mdtp__digit.rotate-45 {
    transform: rotate(45deg);
}

    .mdtp__digit.rotate-45 span {
        transform: rotate(-45deg);
    }

.mdtp__digit.rotate-48 {
    transform: rotate(48deg);
}

    .mdtp__digit.rotate-48 span {
        transform: rotate(-48deg);
    }

.mdtp__digit.rotate-54 {
    transform: rotate(54deg);
}

    .mdtp__digit.rotate-54 span {
        transform: rotate(-54deg);
    }

.mdtp__digit.rotate-60 {
    transform: rotate(60deg);
}

    .mdtp__digit.rotate-60 span {
        transform: rotate(-60deg);
    }

.mdtp__digit.rotate-66 {
    transform: rotate(66deg);
}

    .mdtp__digit.rotate-66 span {
        transform: rotate(-66deg);
    }

.mdtp__digit.rotate-72 {
    transform: rotate(72deg);
}

    .mdtp__digit.rotate-72 span {
        transform: rotate(-72deg);
    }

.mdtp__digit.rotate-75 {
    transform: rotate(75deg);
}

    .mdtp__digit.rotate-75 span {
        transform: rotate(-75deg);
    }

.mdtp__digit.rotate-78 {
    transform: rotate(78deg);
}

    .mdtp__digit.rotate-78 span {
        transform: rotate(-78deg);
    }

.mdtp__digit.rotate-84 {
    transform: rotate(84deg);
}

    .mdtp__digit.rotate-84 span {
        transform: rotate(-84deg);
    }

.mdtp__digit.rotate-90 {
    transform: rotate(90deg);
}

    .mdtp__digit.rotate-90 span {
        transform: rotate(-90deg);
    }

.mdtp__digit.rotate-96 {
    transform: rotate(96deg);
}

    .mdtp__digit.rotate-96 span {
        transform: rotate(-96deg);
    }

.mdtp__digit.rotate-102 {
    transform: rotate(102deg);
}

    .mdtp__digit.rotate-102 span {
        transform: rotate(-102deg);
    }

.mdtp__digit.rotate-105 {
    transform: rotate(105deg);
}

    .mdtp__digit.rotate-105 span {
        transform: rotate(-105deg);
    }

.mdtp__digit.rotate-108 {
    transform: rotate(108deg);
}

    .mdtp__digit.rotate-108 span {
        transform: rotate(-108deg);
    }

.mdtp__digit.rotate-114 {
    transform: rotate(114deg);
}

    .mdtp__digit.rotate-114 span {
        transform: rotate(-114deg);
    }

.mdtp__digit.rotate-120 {
    transform: rotate(120deg);
}

    .mdtp__digit.rotate-120 span {
        transform: rotate(-120deg);
    }

.mdtp__digit.rotate-126 {
    transform: rotate(126deg);
}

    .mdtp__digit.rotate-126 span {
        transform: rotate(-126deg);
    }

.mdtp__digit.rotate-132 {
    transform: rotate(132deg);
}

    .mdtp__digit.rotate-132 span {
        transform: rotate(-132deg);
    }

.mdtp__digit.rotate-135 {
    transform: rotate(135deg);
}

    .mdtp__digit.rotate-135 span {
        transform: rotate(-135deg);
    }

.mdtp__digit.rotate-138 {
    transform: rotate(138deg);
}

    .mdtp__digit.rotate-138 span {
        transform: rotate(-138deg);
    }

.mdtp__digit.rotate-144 {
    transform: rotate(144deg);
}

    .mdtp__digit.rotate-144 span {
        transform: rotate(-144deg);
    }

.mdtp__digit.rotate-150 {
    transform: rotate(150deg);
}

    .mdtp__digit.rotate-150 span {
        transform: rotate(-150deg);
    }

.mdtp__digit.rotate-156 {
    transform: rotate(156deg);
}

    .mdtp__digit.rotate-156 span {
        transform: rotate(-156deg);
    }

.mdtp__digit.rotate-162 {
    transform: rotate(162deg);
}

    .mdtp__digit.rotate-162 span {
        transform: rotate(-162deg);
    }

.mdtp__digit.rotate-165 {
    transform: rotate(165deg);
}

    .mdtp__digit.rotate-165 span {
        transform: rotate(-165deg);
    }

.mdtp__digit.rotate-168 {
    transform: rotate(168deg);
}

    .mdtp__digit.rotate-168 span {
        transform: rotate(-168deg);
    }

.mdtp__digit.rotate-174 {
    transform: rotate(174deg);
}

    .mdtp__digit.rotate-174 span {
        transform: rotate(-174deg);
    }

.mdtp__digit.rotate-180 {
    transform: rotate(180deg);
}

    .mdtp__digit.rotate-180 span {
        transform: rotate(-180deg);
    }

.mdtp__digit.rotate-186 {
    transform: rotate(186deg);
}

    .mdtp__digit.rotate-186 span {
        transform: rotate(-186deg);
    }

.mdtp__digit.rotate-192 {
    transform: rotate(192deg);
}

    .mdtp__digit.rotate-192 span {
        transform: rotate(-192deg);
    }

.mdtp__digit.rotate-195 {
    transform: rotate(195deg);
}

    .mdtp__digit.rotate-195 span {
        transform: rotate(-195deg);
    }

.mdtp__digit.rotate-198 {
    transform: rotate(198deg);
}

    .mdtp__digit.rotate-198 span {
        transform: rotate(-198deg);
    }

.mdtp__digit.rotate-204 {
    transform: rotate(204deg);
}

    .mdtp__digit.rotate-204 span {
        transform: rotate(-204deg);
    }

.mdtp__digit.rotate-210 {
    transform: rotate(210deg);
}

    .mdtp__digit.rotate-210 span {
        transform: rotate(-210deg);
    }

.mdtp__digit.rotate-216 {
    transform: rotate(216deg);
}

    .mdtp__digit.rotate-216 span {
        transform: rotate(-216deg);
    }

.mdtp__digit.rotate-222 {
    transform: rotate(222deg);
}

    .mdtp__digit.rotate-222 span {
        transform: rotate(-222deg);
    }

.mdtp__digit.rotate-225 {
    transform: rotate(225deg);
}

    .mdtp__digit.rotate-225 span {
        transform: rotate(-225deg);
    }

.mdtp__digit.rotate-228 {
    transform: rotate(228deg);
}

    .mdtp__digit.rotate-228 span {
        transform: rotate(-228deg);
    }

.mdtp__digit.rotate-234 {
    transform: rotate(234deg);
}

    .mdtp__digit.rotate-234 span {
        transform: rotate(-234deg);
    }

.mdtp__digit.rotate-240 {
    transform: rotate(240deg);
}

    .mdtp__digit.rotate-240 span {
        transform: rotate(-240deg);
    }

.mdtp__digit.rotate-246 {
    transform: rotate(246deg);
}

    .mdtp__digit.rotate-246 span {
        transform: rotate(-246deg);
    }

.mdtp__digit.rotate-252 {
    transform: rotate(252deg);
}

    .mdtp__digit.rotate-252 span {
        transform: rotate(-252deg);
    }

.mdtp__digit.rotate-255 {
    transform: rotate(255deg);
}

    .mdtp__digit.rotate-255 span {
        transform: rotate(-255deg);
    }

.mdtp__digit.rotate-258 {
    transform: rotate(258deg);
}

    .mdtp__digit.rotate-258 span {
        transform: rotate(-258deg);
    }

.mdtp__digit.rotate-264 {
    transform: rotate(264deg);
}

    .mdtp__digit.rotate-264 span {
        transform: rotate(-264deg);
    }

.mdtp__digit.rotate-270 {
    transform: rotate(270deg);
}

    .mdtp__digit.rotate-270 span {
        transform: rotate(-270deg);
    }

.mdtp__digit.rotate-276 {
    transform: rotate(276deg);
}

    .mdtp__digit.rotate-276 span {
        transform: rotate(-276deg);
    }

.mdtp__digit.rotate-282 {
    transform: rotate(282deg);
}

    .mdtp__digit.rotate-282 span {
        transform: rotate(-282deg);
    }

.mdtp__digit.rotate-285 {
    transform: rotate(285deg);
}

    .mdtp__digit.rotate-285 span {
        transform: rotate(-285deg);
    }

.mdtp__digit.rotate-288 {
    transform: rotate(288deg);
}

    .mdtp__digit.rotate-288 span {
        transform: rotate(-288deg);
    }

.mdtp__digit.rotate-294 {
    transform: rotate(294deg);
}

    .mdtp__digit.rotate-294 span {
        transform: rotate(-294deg);
    }

.mdtp__digit.rotate-300 {
    transform: rotate(300deg);
}

    .mdtp__digit.rotate-300 span {
        transform: rotate(-300deg);
    }

.mdtp__digit.rotate-306 {
    transform: rotate(306deg);
}

    .mdtp__digit.rotate-306 span {
        transform: rotate(-306deg);
    }

.mdtp__digit.rotate-312 {
    transform: rotate(312deg);
}

    .mdtp__digit.rotate-312 span {
        transform: rotate(-312deg);
    }

.mdtp__digit.rotate-315 {
    transform: rotate(315deg);
}

    .mdtp__digit.rotate-315 span {
        transform: rotate(-315deg);
    }

.mdtp__digit.rotate-318 {
    transform: rotate(318deg);
}

    .mdtp__digit.rotate-318 span {
        transform: rotate(-318deg);
    }

.mdtp__digit.rotate-324 {
    transform: rotate(324deg);
}

    .mdtp__digit.rotate-324 span {
        transform: rotate(-324deg);
    }

.mdtp__digit.rotate-330 {
    transform: rotate(330deg);
}

    .mdtp__digit.rotate-330 span {
        transform: rotate(-330deg);
    }

.mdtp__digit.rotate-336 {
    transform: rotate(336deg);
}

    .mdtp__digit.rotate-336 span {
        transform: rotate(-336deg);
    }

.mdtp__digit.rotate-342 {
    transform: rotate(342deg);
}

    .mdtp__digit.rotate-342 span {
        transform: rotate(-342deg);
    }

.mdtp__digit.rotate-348 {
    transform: rotate(348deg);
}

    .mdtp__digit.rotate-348 span {
        transform: rotate(-348deg);
    }

.mdtp__digit.rotate-354 {
    transform: rotate(354deg);
}

    .mdtp__digit.rotate-354 span {
        transform: rotate(-354deg);
    }

.mdtp__digit.rotate-360 {
    transform: rotate(360deg);
}

    .mdtp__digit.rotate-360 span {
        transform: rotate(-360deg);
    }

.mdtp__buttons {
    padding: 0 10px 10px;
    text-align: right;
}

    .mdtp__buttons:after {
        content: '';
        display: block;
        clear: both;
    }

.mdtp__button {
    display: inline-block;
    padding: 0 16px;
    min-width: 40px;
    text-align: center;
    text-transform: uppercase;
    line-height: 32px;
    font-weight: 500;
    cursor: pointer;
    color: #1565c0;
    border-radius: 4px;
    transition: background-color .2s linear;
}

    .mdtp__button:hover {
        background-color: rgba(0,0,0,.1);
    }

    .mdtp__button:active {
        background-color: rgba(0,0,0,.2);
    }

    .mdtp__button.clear-btn {
        float: left;
        color: #ef5350 !important;
    }

/* Color themes */
.mdtp__wrapper[data-theme='blue'] .mdtp__time_holder {
    background-color: #1565c0;
}

.mdtp__wrapper[data-theme='blue'] .mdtp__clock .mdtp__am.active,
.mdtp__wrapper[data-theme='blue'] .mdtp__clock .mdtp__pm.active {
    background-color: #1565c0;
}

.mdtp__wrapper[data-theme='blue'] .mdtp__clock .mdtp__clock_dot {
    background-color: #1565c0;
}

.mdtp__wrapper[data-theme='blue'] .mdtp__digit.active span,
.mdtp__wrapper[data-theme='blue'] .mdtp__clock .mdtp__digit:not(.digit--disabled) span:hover {
    background-color: #1565c0 !important;
}

.mdtp__wrapper[data-theme='blue'] .mdtp__digit.active:before {
    background-color: #1565c0;
}

.mdtp__wrapper[data-theme='blue'] .mdtp__button {
    color: #1565c0;
}

.mdtp__wrapper[data-theme='red'] .mdtp__time_holder {
    background-color: #c62828;
}

.mdtp__wrapper[data-theme='red'] .mdtp__clock .mdtp__am.active,
.mdtp__wrapper[data-theme='red'] .mdtp__clock .mdtp__pm.active {
    background-color: #c62828;
}

.mdtp__wrapper[data-theme='red'] .mdtp__clock .mdtp__clock_dot {
    background-color: #c62828;
}

.mdtp__wrapper[data-theme='red'] .mdtp__digit.active span,
.mdtp__wrapper[data-theme='red'] .mdtp__clock .mdtp__digit:not(.digit--disabled) span:hover {
    background-color: #c62828 !important;
}

.mdtp__wrapper[data-theme='red'] .mdtp__digit.active:before {
    background-color: #c62828;
}

.mdtp__wrapper[data-theme='red'] .mdtp__button {
    color: #c62828;
}

.mdtp__wrapper[data-theme='purple'] .mdtp__time_holder {
    background-color: #6a1b9a;
}

.mdtp__wrapper[data-theme='purple'] .mdtp__clock .mdtp__am.active,
.mdtp__wrapper[data-theme='purple'] .mdtp__clock .mdtp__pm.active {
    background-color: #6a1b9a;
}

.mdtp__wrapper[data-theme='purple'] .mdtp__clock .mdtp__clock_dot {
    background-color: #6a1b9a;
}

.mdtp__wrapper[data-theme='purple'] .mdtp__digit.active span,
.mdtp__wrapper[data-theme='purple'] .mdtp__clock .mdtp__digit:not(.digit--disabled) span:hover {
    background-color: #6a1b9a !important;
}

.mdtp__wrapper[data-theme='purple'] .mdtp__digit.active:before {
    background-color: #6a1b9a;
}

.mdtp__wrapper[data-theme='purple'] .mdtp__button {
    color: #6a1b9a;
}

.mdtp__wrapper[data-theme='indigo'] .mdtp__time_holder {
    background-color: #283593;
}

.mdtp__wrapper[data-theme='indigo'] .mdtp__clock .mdtp__am.active,
.mdtp__wrapper[data-theme='indigo'] .mdtp__clock .mdtp__pm.active {
    background-color: #283593;
}

.mdtp__wrapper[data-theme='indigo'] .mdtp__clock .mdtp__clock_dot {
    background-color: #283593;
}

.mdtp__wrapper[data-theme='indigo'] .mdtp__digit.active span,
.mdtp__wrapper[data-theme='indigo'] .mdtp__clock .mdtp__digit:not(.digit--disabled) span:hover {
    background-color: #283593 !important;
}

.mdtp__wrapper[data-theme='indigo'] .mdtp__digit.active:before {
    background-color: #283593;
}

.mdtp__wrapper[data-theme='indigo'] .mdtp__button {
    color: #283593;
}

.mdtp__wrapper[data-theme='teal'] .mdtp__time_holder {
    background-color: #00695c;
}

.mdtp__wrapper[data-theme='teal'] .mdtp__clock .mdtp__am.active,
.mdtp__wrapper[data-theme='teal'] .mdtp__clock .mdtp__pm.active {
    background-color: #00695c;
}

.mdtp__wrapper[data-theme='teal'] .mdtp__clock .mdtp__clock_dot {
    background-color: #00695c;
}

.mdtp__wrapper[data-theme='teal'] .mdtp__digit.active span,
.mdtp__wrapper[data-theme='teal'] .mdtp__clock .mdtp__digit:not(.digit--disabled) span:hover {
    background-color: #00695c !important;
}

.mdtp__wrapper[data-theme='teal'] .mdtp__digit.active:before {
    background-color: #00695c;
}

.mdtp__wrapper[data-theme='teal'] .mdtp__button {
    color: #00695c;
}

.mdtp__wrapper[data-theme='green'] .mdtp__time_holder {
    background-color: #2e7d32;
}

.mdtp__wrapper[data-theme='green'] .mdtp__clock .mdtp__am.active,
.mdtp__wrapper[data-theme='green'] .mdtp__clock .mdtp__pm.active {
    background-color: #2e7d32;
}

.mdtp__wrapper[data-theme='green'] .mdtp__clock .mdtp__clock_dot {
    background-color: #2e7d32;
}

.mdtp__wrapper[data-theme='green'] .mdtp__digit.active span,
.mdtp__wrapper[data-theme='green'] .mdtp__clock .mdtp__digit:not(.digit--disabled) span:hover {
    background-color: #2e7d32 !important;
}

.mdtp__wrapper[data-theme='green'] .mdtp__digit.active:before {
    background-color: #2e7d32;
}

.mdtp__wrapper[data-theme='green'] .mdtp__button {
    color: #2e7d32;
}

.mdtp__wrapper[data-theme='dark'] .mdtp__time_holder {
    background-color: #121212;
}

.mdtp__wrapper[data-theme='dark'] .mdtp__clock_holder {
    background-color: rgb(29,29,29);
}

    .mdtp__wrapper[data-theme='dark'] .mdtp__clock_holder .mdtp__clock {
        background-color: rgb(24,24,24);
    }

.mdtp__wrapper[data-theme='dark'] .mdtp__clock .mdtp__digit:not(.digit--disabled) {
    color: rgba(255,255,255,.87);
}

.mdtp__wrapper[data-theme='dark'] .mdtp__clock .mdtp__digit.digit--disabled span {
    color: rgba(100,100,100,.87);
}

.mdtp__wrapper[data-theme='dark'] .mdtp__clock .mdtp__am:not(.active),
.mdtp__wrapper[data-theme='dark'] .mdtp__clock .mdtp__pm:not(.active) {
    color: rgba(255,255,255,.87);
    background-color: rgba(200,200,200,.05);
}

.mdtp__wrapper[data-theme='dark'] .mdtp__button {
    color: #42a5f5;
}

    .mdtp__wrapper[data-theme='dark'] .mdtp__button:hover {
        background-color: rgba(255,255,255,.04);
    }

    .mdtp__wrapper[data-theme='dark'] .mdtp__button:active {
        background-color: rgba(255,255,255,.1);
    }

@media (max-height: 360px) {
    .mdtp__wrapper {
        flex-direction: row;
        bottom: 8px;
    }

    .mdtp__time_holder {
        width: 160px;
        padding: 20px;
    }
    /* .mdtp__clock_holder { padding: 16px; } */
    .mdtp__clock .mdtp__am, .mdtp__clock .mdtp__pm {
        bottom: -4px;
    }

    .mdtp__clock .mdtp__am {
        left: -4px;
    }

    .mdtp__clock .mdtp__pm {
        right: -4px;
    }
}

@media (max-height: 320px) {
    .mdtp__wrapper {
        bottom: 0;
    }
}

/* General layout for each week's day container */
.css-week-day {
    display: inline-flex;
    flex-direction: column;
    margin: 10px;
    width: 48%;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background-color: #f8f8f8;
}

    .css-week-day:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    }

/* Header styling for each day */
.css-week-day-header {
    background-color: #4bb78f;
    color: #fff;
    font-family: 'Rubik', sans-serif;
    font-size: 16px;
    font-weight: bold;
    text-transform: capitalize;
    text-align: left;
    padding: 12px 15px;
    display: block;
    align-items: center;
    border-bottom: solid 1px #3ca77a;
    background-image: url('../../Images/icons/workProfile.png');
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: 10px center;
    padding-left: 50px;
}

    .css-week-day-header:hover {
        background-color: #3ca77a;
    }

.css-week-day-footer {
    background-color: beige;
    color: #000;
    font-family: 'Rubik', sans-serif;
    font-size: 16px;
    padding: 12px 15px;
    display: block;
    align-items: center;
    text-align: right;
}

    .css-week-day-footer:hover {
    }

/* Styling for the current day's header */
.css-week-current-day-header {
    background-color: #ffeb3b;
    color: #333;
    font-family: 'Rubik', sans-serif;
    font-size: 16px;
    font-weight: bold;
    text-transform: capitalize;
    text-align: left;
    padding: 12px 15px;
    display: block;
    align-items: center;
    border-bottom: solid 1px #c8a82d;
    background-image: url('../../Images/icons/workProfile.png');
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: 10px center;
    padding-left: 50px;
}

    .css-week-current-day-header:hover {
        background-color: #ffe135;
    }

/* Tasks container inside each day's card */
.css-week-day-task {
    padding: 10px;
    border-bottom: solid 1px #e6e6e6;
    font-size: 14px;
    font-family: 'Rubik', sans-serif;
    position: relative;
    display: flex;
    align-items: center;
}

    .css-week-day-task:last-child {
        border-bottom: none;
    }

/* Remove task button */
.css-week-day-task-remove {
    height: 25px;
    width: 25px;
    background-image: url('../../Images/icons/close-black.png');
    background-size: 100% 100%;
    display: inline-block;
    position: absolute;
    right: 5px;
    /*top: 50%;
    transform: translateY(-50%);*/
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

    .css-week-day-task-remove:hover {
        transform: scale(1.2);
        opacity: 0.8;
    }

/* Edit task button */
.css-week-day-task-edit {
    height: 25px;
    width: 25px;
    background-image: url('../../Images/editcontact.png');
    background-size: 100% 100%;
    display: inline-block;
    position: absolute;
    right: 35px;
    /*top: 50%;
    transform: translateY(-50%);*/
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

    .css-week-day-task-edit:hover {
        transform: scale(1.2);
        opacity: 0.8;
    }

/* General styling for the page */
/*body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f9f9f9;
}*/

/* Timesheet tile container */
.timesheet-tile {
    width: 300px;
    background: linear-gradient(145deg, #ffffff, #e0e0e0);
    box-shadow: 4px 4px 10px #bebebe, -4px -4px 10px #ffffff;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: inline-block;
    margin-right: 20px;
}

    .timesheet-tile:hover {
        transform: translateY(-10px);
        box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.15), -6px -6px 15px rgba(255, 255, 255, 0.8);
    }

/* Header section specific to timesheet */
.timesheet-tile-header {
    background-color: #0078d7;
    color: #fff;
    text-align: center;
    padding: 10px;
    font-size: 18px;
    font-weight: bold;
}

/* Content section specific to timesheet */
.timesheet-tile-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-align: center;
    min-height: 70px;
}

.timesheet-tile-info {
    margin-bottom: 10px;
}

.timesheet-tile-logged-hours {
    font-size: 14px;
    color: #888;
    margin: 0;
}

.timesheet-tile-hours {
    font-size: 28px;
    font-weight: bold;
    margin: 5px 0;
    color: #444;
}

.timesheet-tile-date {
    font-size: 14px;
    color: #666;
}

/* Footer section specific to timesheet */
.timesheet-tile-footer {
    text-align: center;
    padding: 10px;
    border-top: 1px solid #ddd;
}

.timesheet-tile-view-details-btn {
    padding: 8px 16px;
    background-color: #0078d7;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

    .timesheet-tile-view-details-btn:hover {
        background-color: #005bb5;
        transform: translateY(-2px);
    }


/* Common styles for all links */
.lnkPrevious, .lnkStop, .lnkNext {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    padding: 12px 20px;
    text-decoration: none;
    border: 2px solid #c1c1c1;
    color: #333;
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

    /* Hover effect for all links */
    .lnkPrevious:hover, .lnkStop:hover, .lnkNext:hover {
        background-color: #4bb78f;
        color: #fff;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

/* Previous button with left-aligned icon */
.lnkPrevious {
    background-image: url('../../images/icons/previous.png');
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: 15px center;
    padding-left: 45px;
}

    .lnkPrevious::before {
        display: inline-block;
        margin-left: 5px;
        transition: transform 0.3s ease;
    }

    .lnkPrevious:hover::before {
        transform: translateX(-5px);
    }

/* Stop button with center-aligned icon */
.lnkStop {
    background-image: url('../../images/bullet_yellow.png');
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: center left;
    padding-left: 45px;
    border: 2px solid #FFD700;
    background-position-x: 15px;
}

    .lnkStop:hover {
        background-color: #FFD700;
        color: #fff;
    }

/* Next button with right-aligned icon */
.lnkNext {
    background-image: url('../../images/icons/next.png');
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 45px;
}

    .lnkNext::after {
        display: inline-block;
        margin-right: 5px;
        transition: transform 0.3s ease;
    }

    .lnkNext:hover::after {
        transform: translateX(5px);
    }

.timesheet-tiles {
    text-align: right;
    margin-bottom: 20px;
}