dl {
    /*padding: 0.5em;*/
}

dt {
    padding: 5px;
    float: left;
    clear: left;
    width: 210px;
    text-align: right;
    font-weight: bold;
    color: white;
    background-color: rgba(30,193,184,0.8);
    margin-top: 1px;
}

    dt:after {
        content: ":";
    }

dd {
    margin: 1px 1px 0px 220px;
    padding: 5px;
    border-bottom: 1px dotted;
}

    dd:after {
        display: table;
        content: "";
        clear: both;
    }

textarea {
    display: block;
    box-sizing: padding-box;
    overflow: hidden;
    padding: 10px;
    width: 100%;
    font-size: 14px;
    margin: 5px auto;
    border-radius: 8px;
    /*border:1px solid #556677;*/
    border: 1px solid rgb(219, 225, 232);
}

.divider {
    height: 1px;
    width: 100%;
    display: block; /* for use on default inline elements like span */
    margin: 9px 0;
    overflow: hidden;
    background-color: #e5e5e5;
}

.form-horizontal > h5 {
    /*text-align:center;*/
    /*margin:20px;*/
    padding: 20px;
}

.dirbreadcrumb {
    background: rgba(170,0,0, 1);
    border: 0px solid rgba(245, 245, 245, 1);
    border-radius: 4px;
    display: block;
}

    .dirbreadcrumb li {
        font-size: 14px;
        display: inline-block;
        padding: 10px;
    }

    .dirbreadcrumb a {
        color: rgb(219, 225, 232);
    }

        .dirbreadcrumb a:hover {
            color: #e5e5e5;
        }

    .dirbreadcrumb > .active {
        color: rgb(255, 255, 255);
    }

    .dirbreadcrumb > li + li:before {
        color: rgba(204, 204, 204, 1);
        content: "\002F\00a0";
    }

legend {
    background-color: rgb(70, 183, 191);
}

/*Css Flip Card*/
/* entire container, keeps perspective */
/* https://davidwalsh.name/css-flip */
.flip-container {
    perspective: 1000px;
}

    /* flip the pane when hovered */

    /*.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper {
    transform: rotateY(180deg);
}*/

    .flip-container.flip .flipper {
        transform: rotateY(180deg);
    }

.flip-container, .front, .back {
    width: 100%;
    /*height: 480px;*/
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}


/* front pane, placed above back */
.front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
}

/*End Flip Card*/

/*question list style*/
.list-type1 {
    width: 80%px;
    margin: 0 auto;
}

    .list-type1 ol {
        counter-reset: li;
        list-style: none;
        *list-style: decimal;
        font-size: 15px;
        font-family: 'Raleway', sans-serif;
        padding: 0;
        margin-bottom: 4em;
    }

        .list-type1 ol ol {
            margin: 0 0 0 2em;
        }

    .list-type1 div:first-child {
        position: relative;
        display: block;
        padding: .4em .4em .4em 2em;
        *padding: .4em;
        margin: .5em 0;
        background: #93C775;
        color: #000;
        text-decoration: none;
        -moz-border-radius: .1em;
        -webkit-border-radius: .1em;
        border-radius: 1em;
        transition: all .2s ease-in-out;
    }

    .list-type1 div span p {
        margin: 0 10px 0 10px !important;
    }

    .list-type1 div.answer {
        position: relative;
        display: block;
        padding: .4em .4em .4em 2em;
        *padding: .4em;
        margin: .5em 0;
        background: darkblue;
        color: #fff;
        text-decoration: none;
        -moz-border-radius: .1em;
        -webkit-border-radius: .1em;
        border-radius: 1em;
        transition: all .2s ease-in-out;
    }

    /*.list-type1 p:hover {
            background: #d6d4d4;
            text-decoration: none;
            transform: scale(1.1);
        }*/

    .list-type1 div:before {
        content: attr(data-before-content);
        position: absolute;
        left: -1.3em;
        top: 50%;
        margin-top: -1.3em;
        background: #93C775;
        height: 2em;
        width: 2em;
        line-height: 2em;
        border: .3em solid #fff;
        text-align: center;
        font-weight: bold;
        -moz-border-radius: 2em;
        -webkit-border-radius: 2em;
        border-radius: 2em;
        color: #FFF;
        box-sizing: content-box !important;
    }

div.questionTitle {
    position: relative;
    display: block;
    font-size: 1.1em;
    padding: .4em .4em .4em 2em;
    *padding: .4em;
    margin: .5em 0;
    background: rgb(233, 233, 233);
    color: #000;
    text-decoration: none;
    -moz-border-radius: .5em;
    -webkit-border-radius: .5em;
    border-radius: .5em;
    transition: all .2s ease-in-out;
}

/*general list style*/
.list-container {
    /*width:80%;*/
}

    .list-container ul {
        padding-left: 0px;
    }

        .list-container ul li {
            list-style-type: none;
            background-color: rgb(107, 197, 203);
            border-radius: 5px;
            margin: 5px;
            padding: 10px;
        }

            .list-container ul li:hover {
                box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
            }

/**Checkbox**/
input[type=checkbox] {
    transform: scale(1.5);
}

/****Requires animate.css file - for ng-repeat cases*/
.animate.ng-enter {
    animation: fadeIn 3s;
}

.animate.ng-leave {
    animation: fadeOut 1s;
}

.animate500.ng-enter {
    animation: fadeIn 500ms;
}

.animate1000.ng-enter {
    animation: fadeIn 1000ms;
}

.animate1500.ng-enter {
    animation: fadeIn 1500ms;
}

.animate500.ng-leave {
    animation: fadeOut 500ms;
}

.animate1000.ng-leave {
    animation: fadeOut 1000ms;
}

.animate1500.ng-leave {
    animation: fadeOut 1500ms;
}

/* Does not require animate css -for show hide cases */
.animate-show-hide.ng-hide {
    opacity: 0;
}

.animate-show-hide.ng-hide-add,
.animate-show-hide.ng-hide-remove {
    transition: all linear 0.5s;
}

/*box-styles*/

/* https://codepen.io/sdthornton/pen/wBZdXq */
.card {
    background: #fff;
    display: block;
    /*margin: 1rem;*/
    position: relative;
    width: auto;
}

.card-1 {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

    .card-1:hover {
        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    }

.card-2 {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.card-3 {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.card-4 {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.card-5 {
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

/*Emphesized Box Shadows*/
.emphasize-dark {
    box-shadow: 0 0 5px 2px rgba(0,0,0,.35);
}

.emphasize-light {
    box-shadow: 0 0 0 10px rgba(255,255,255,.25);
}

.emphasize-inset {
    box-shadow: inset 0 0 7px 4px rgba(255,255,255,.5);
}

.emphasize-border {
    box-shadow: inset 0 0 0 7px rgba(255,255,255,.5);
}

.embossed-light {
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

.embossed-heavy {
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: inset 0 2px 3px rgba(255,255,255,0.3), inset 0 -2px 3px rgba(0,0,0,0.3), 0 1px 1px rgba(255,255,255,0.9);
}

/*rounded corners*/

.light-rounded {
    border-radius: 3px;
}

.heavy-rounded {
    border-radius: 8px;
}

.full-rounded {
    border-radius: 50%;
}

.barrel-rounded {
    border-radius: 20px/60px;
}

/* Border box */

.borderBox {
    border: 1px solid !important;
    border-color: lightblue !important;
    border-radius: 5px;
    min-height: 125px;
}

/*Select 2 fix full width problem*/

.select2 {
    width: 100% !important;
}
/**/

/* Modal */
.modal-xl {
    width: 80%;
}


/*Bootstrap datepicker*/

.bootstrap-datetimepicker-widget {
    background-color: #f8f9fa; /* Change background color */
    border: 1px solid #a6b1bd; /* Change border color */
}

    .bootstrap-datetimepicker-widget table td {
        padding: 5px;
    }

        .bootstrap-datetimepicker-widget table td.day:hover,
        .bootstrap-datetimepicker-widget table td.day.active {
            background-color: #007bff; /* Change hover and active background color */
            color: white; /* Change text color */
        }

    .bootstrap-datetimepicker-widget table th {
        color: #6c757d; /* Change header text color */
    }