/*ADD CLASS TO BODY*/
.site {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

/*ADD CLASS TO MAIN*/
.site-content {
    flex: 1;
}

/*--------------
   Page Header
---------------*/

.page.header {
    background-color: #FA4616;
    padding: 5px 0px;
}

    .page.header .menu {
        margin-top: 0em;
        margin-bottom: 0em;
    }

/*--------------
   Segment
---------------*/

.ui.inverted.cadentgrey.segment {
    background-color: #373A36 !important;
    color: #FFFFFF !important;
}

.ui.cadentred.segment:not(.inverted) {
    border-top: 2px solid #FA4616 !important;
}

/*--------------
  Icon Color
---------------*/

i.cadentred.icon {
    color: #FA4616 !important;
}

.ui.customcolor.menu .active.item, .ui.menu .customcolor.active.item {
    border-color: #D4D4D5 !important;
    color: #2185D0;
}

.checkbox, .dn, .up {
    display: inline-block !important;
    vertical-align: middle;
}

.ui.checkbox input,
.ui.toggle.checkbox label:before {
    padding-top: 2.5px;
    font-size: x-small;
    content: attr(data-content)
}


.ui.checkbox input,
.ui.toggle.checkbox label.up:before {
    padding-left: 7px;
    color: white;
}


.ui.checkbox input,
.ui.toggle.checkbox label.dn:before {
    padding-left: 23px;
    color: black;
}

.ui.toggle.checkbox input:checked ~ .box:after, .ui.toggle.checkbox input:checked ~ label:after {
    left: 2.0rem;
}

.ui.toggle.checkbox input:checked + label:before {
    background-color: #21ba45 !important;
}

.ui.toggle.checkbox input:checked ~ .box:before, .ui.toggle.checkbox input:checked ~ label:before {
    background-color: #21ba45 !important;
}

.ui.toggle.checkbox input:checked ~ .box:before, .ui.toggle.checkbox input:checked ~ label:before {
    background-color: #21ba45 !important;
}

.ui.toggle.checkbox input:focus:checked ~ .box:before, .ui.toggle.checkbox input:focus:checked ~ label:before {
    background-color: #21ba45 !important;
}

.ui.checkbox input, .ui.toggle.checkbox label:before {
    padding-top: 2.5px;
    font-size: x-small;
    content: attr(data-content);
    width: 3.5rem;
}

.ui.bluecustom.labels .label,
.ui.ui.ui.bluecustom.label {
    background-color: #0090ff;
    border-color: #0090ff;
    color: #FFFFFF;
}

.ui.redcustom.labels .label,
.ui.ui.ui.redcustom.label {
    background-color: red;
    border-color: red;
    color: #FFFFFF;
}

.ui.greycustom.labels .label,
.ui.ui.ui.greycustom.label {
    background-color: #BBBBBB;
    border-color: #BBBBBB;
    color: #BBBBBB;
}

.dashed.strike {
    text-decoration: line-through;
    color: #999;
}

.dropzone {
    border: 2px dashed #00a1f1;
    background: #F0F8FF;
    border-radius: 5px;
}

    .dropzone.dz-message {
        font-weight: 350;
    }

        .dropzone.dz-message.note {
            font-family: sans-serif;
            font-size: 18px;
            font-weight: 200;
            display: block;
            margin-top: 3rem;
        }


@media only screen and (min-width: 1400px) {
    .ui.container {
        width: 1327px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .ui.grid.container {
        width: calc( 1327px + 2rem ) !important;
    }

    .ui.relaxed.grid.container {
        width: calc( 1327px + 3rem ) !important;
    }

    .ui.very.relaxed.grid.container {
        width: calc( 1327px + 5rem ) !important;
    }
}

@media only screen and (max-width: 700px) {
    .ui.menu.computer {
        display: none !important;
    }

    .ui.hamburger {
        display: block !important;
    }
}

/*FOMANTIC UI BUG*/
.ui.inverted.text.menu, .ui.inverted.text.menu .active.item, .ui.inverted.text.menu .item, .ui.inverted.text.menu .item:hover {
    background-color: transparent;
}

.ui.selectable.table > tbody > tr, .ui.selectable.table > tr, .ui.table > tbody > tr > td.selectable, .ui.table > tr > td.selectable {
    cursor: default !important;
}

/*Dashed List*/
ul {
    margin: 0;
}

    ul.dashed {
        list-style-type: none;
    }

        ul.dashed > li {
            text-indent: -5px;
        }

            ul.dashed > li:before {
                content: "-";
                text-indent: -5px;
            }

/* G19 Table Design */
.ui.celled.table > tbody > tr > td:first-child, .ui.celled.table > tbody > tr > th:first-child, .ui.celled.table > tfoot > tr > td:first-child, .ui.celled.table > tfoot > tr > th:first-child, .ui.celled.table > thead > tr > th:first-child, .ui.celled.table > tr > td:first-child, .ui.celled.table > tr > th:first-child {
    overflow-wrap: anywhere !important;
}

/*My Actions Tile*/
.my-actions {
    background-color: #8FBC8F;
}

.ui.smallcelled.td {
    width: 40px;
}

/* Start - CSS for toggle button */

.toggle {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 20px;
    margin-left: 10px;
}

    .toggle input {
        display: none;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: lightsalmon;
    transition: 0.4s;
    border-radius: 32px;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 19px;
        width: 19px;
        left: 1px;
        bottom: 5px;
        background-color: white;
        transition: 0.4s;
        border-radius: 50%;
        top: 1px;
        right: 1px;
    }

input:checked + .slider {
    background-color: #FA4616 !important;
}

    input:checked + .slider:before {
        transform: translateX(31px);
    }

.nonMyCdaTable {
    width: 100%;
    margin-top: 3px;
    table-layout: fixed;
}

.nonMyCdaContactsLabel {
    float: right;
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 1rem
}
/* End - CSS for toggle button */

/* Start - CSS for checker */
.checkerHeader {
    display: block;
    text-align: left;
    margin-top: 6px;
}

.isCheckerPmDiv {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.isCheckerPMCheckbox {
    width: 18px;
    height: 18px;
    background-color: white;
    border-block: medium;
}

.checkerFields {
    padding-right: 50px;
}

.bcgColorOffCheck {
    background-color: white;
    color: black;
}

.bcgColorOnCheck {
    background-color: #f2f2f2 !important;
    border-color: gainsboro;
    color: darkgray !important;
}

.bcgItemReadonly {
    pointer-events: none;
}

/* Only apply to items inside #main-stackable-menu */
#main-stackable-menu .item.custom-selected {
    background-color: #0000000d !important;
    color: #a333c8 !important;
    font-weight: normal;
}

#main-stackable-menu .item.custom-deselected {
    background-color: white !important;
    color: black !important;
}

/* End - CSS for checker */

.disableDiv {
    pointer-events: none;
    opacity: 0.4;
}

.divComment {
    width: 88%;
    padding-right: 0px;
    padding-left: 8px;
}

.divTxtComment {
    width: 98%;
    height: 60%;
    padding-top: 30px;
}

.divBtnComment {
    width: 18%;
    padding-left: 0px;
}

.divBtnAddComment {
    width: 100%;
    height: 60%;
    padding-top: 35px;
    padding-left: 5px;
}

.divCommentsBox {
    width: 98%;
    height: 300px;
    overflow: auto;
}

.ellipsis-cell {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 40px;
    white-space: normal;
    cursor: pointer;
}