/* Basic tags */
/*
.body-container {
    max-width: 90%;
}
*/

html {
    height: 100%;
}


body {
    background-color: #363434;
    color: #505050;
    font-family: Helvetica, Arial, sans-serif;
    height: 100%;
    margin: 0;
    min-width: 720px;
}


#mainSection {
    margin-left: 35px;
    margin-right: 35px;
}

.body-content {
    margin: 0;
    padding: .5rem 2.15rem;
}

.form-group {
    margin-bottom: 1rem;
}
/* Overwrite the default Bootstrap from other versions */
.jumbotron {
    /*font-weight: bold;
    font-size: 2.2rem;
    padding-bottom: 1.5rem;
    text-underline-offset: auto;
    text-decoration: underline blink;*/
    background-color: unset;
    padding: 0rem;
}


/* Main content */

#pageContainer {
    min-height: 100%;
    min-width: 720px;
    position: relative;
    padding-bottom: 0;
}


/* Main content - Extra space for fixed footer */

#mainContent {
    padding: .5rem 2.15rem;
    margin: 0;
}

.errorLabel {
    color: #E60012;
    font-weight: bold;
}

#footerPadding {
    height: 3rem;
}

.row-spacing {
    margin-bottom: 1.5rem;
}


/*Dev Express Grid Overload Styles*/

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

.display-none-style {
    display: none;
}

/* Green button styling. Use for Button toggles */
.btn-green-toggle {
    background-color: #8AD293 !important;
    width: 12rem !important;
    font-weight: bold !important;
    color: black !important;
}

    .btn-green-toggle:hover {
        background-color: #47b856 !important;
    }

/* #region ARROW */
.arrow {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    font-weight: bolder;
}

.menu-link-arrow {
    border: solid #fff;
    border-width: 0 0.17rem 0.17rem 0;
    display: inline-block;
    padding: 4px;
    font-weight: bolder;
}

.big-arrow {
    border: solid #555555;
    border-width: 0 0.5rem 0.5rem 0;
    display: inline-block;
    padding: 0.5rem;
    font-weight: bolder;
}

.subsection-arrow {
    border: solid #555555;
    border-width: 0 0.3rem 0.3rem 0;
    display: inline-block;
    padding: 0.3rem;
    font-weight: bolder;
}

.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
/* #endregion ARROW*/


/* #region Tool Tip Text; Tooltip Text ; Hover Over Text ; Hoverover Text */

/* In your HTML, you will need to do something like this to utilize the tooltip: 
    <div class="tool-tip">
        {Here would be the text/icon/whatever to activate the hover over. Don't include the curly braces}
        <span class="tool-tip-text">
            {Here would be the text you want to display in the tooltip. Don't include curly braces}
        </span>
    </div>
*/

.tool-tip {
    position: relative;
    display: inline-block;
    border-bottom: 1px black;
}

    .tool-tip .tool-tip-text {
        visibility: hidden;
        /*width: 120px;*/
        background-color: #b6cffc;
        color: #000;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 100%;
        left: 50%;
        margin-left: -60px;
        /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
        opacity: 0;
        transition: opacity 1s;
    }

    .tool-tip:hover .tool-tip-text {
        visibility: visible;
        opacity: 1;
    }

.tool-tip-text-extra-short {
    width: 10rem;
}

.tool-tip-text-shorter {
    width: 26rem;
}

.tool-tip-text-longer {
    width: 42rem;
}

.success-checkmark {
    color: green;
}

.exclamation-mark {
    color: goldenrod;
}

.information-question-mark {
    color: steelblue;
}


.information-question-mark-tool-tip {
    background-color: #b6cffc;
    color: #fff;
}

.tool-tip-big-icon {
    font-size: 1.5rem;
}

.tool-tip-small-icon {
    font-size: 0.8rem;
}

/* #endregion Tool Tip Text ; Hover Over Text ; Hoverover Text */

/* Overwrite the default arrow from bootstrap */

/* Bo likes the smaller arrows. Uncomment and change the border sizes to change the size of the arrow */
.dropdown-toggle::after {
    /*display: inline-block;
    margin-left: -0.5em;
    vertical-align: .01em;
    content: "";
    border-top: .7em solid;
    border-right: .7em solid transparent;
    border-bottom: 1.0em;
    border-left: .7em solid transparent;*/
}

.dropdown-menu {
    min-width: 12rem;
}

.nav-link {
    text-decoration: none;
}

/* MSC - SPP RED for Buttons and additional Datagrid Style*/
/* SPP RED button */
.sp2-btn-delete {
    background-color: #E95D5D;
    color: white;
}

    .sp2-btn-delete:hover {
        background-color: #C94A4A;
        color: white;
    }

/* Style for maintaining two buttons side-by-side in DevExpress Datagrid */
.sp2-fixed-btns {
    display: inline-block;
    width: 100%;
    margin-right: 0.5em; /* Adjust this value to increase/decrease the space between the buttons */
    min-width: 6em; /* Defines the minimum width of the button */
    white-space: nowrap; /* prevents button text from wrapping to the next line */
    text-align: center;
}

    .sp2-fixed-btns:last-child {
        margin-right: 0;
    }

.sp2-btns-container {
    display: flex;
}

/* Additional DevExpress Datagrid styles */
.edit-delete-col-width {
    min-width: 50%;
    max-width: 60%;
}

/* END - SPP Red Button and Additional Datagrid styles */


/* #region Grid Settings */
.grid-icon {
    font-size: 1.75rem;
    background-color: transparent;
    border: none;
}

/* Toggle Switch styles */
.toggle-switch {
    background-color: transparent;
    border: none;
}

.inactive-toggle-switch {
    transform: rotateY(180deg);
}

    .inactive-toggle-switch > i {
        color: #e97171;
    }

    .inactive-toggle-switch:hover > i {
        color: #e14343;
    }

.active-toggle-switch > i {
    color: #7ed17e;
}

.active-toggle-switch:hover > i {
    color: #44b744;
}

.datagrid-centervert {
    vertical-align: middle !important;
}

.redirect-button {
    color: none;
}

/* Add this to your bi-trash3 icons for the red color */
.sp2-red52 {
    color: #E95D5D;
}

    .sp2-red52:hover {
        color: #C94A4A;
    }

/* #endregion Grid Settings */

/* Utility: width  */
.w-30 {
    width: 30%;
}

.w-40 {
    width: 40%;
}

.w-60 {
    width: 60%;
}

.w-70 {
    width: 70%;
}

.card-light {
    border-color: #d3d6d8;
    background-color: #d3d6d840;
    border-radius: .25rem !important;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
}

.card-success {
    border-color: #69be28;
    background-color: #cde6bb52;
    border-radius: .25rem !important;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
}

.card-primary {
    border-color: #b6d4fe;
    background-color: #cae0ff33;
    border-radius: .25rem !important;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
}

.card-warning {
    border-color: #ffecb5;
    background-color: #fffcf2;
    border-radius: .25rem !important;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
}

.card-info {
    border-color: #ecb5f1;
    background-color: #eadaec;
    border-radius: .25rem !important;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
}

.card-danger {
    border-color: #e77a9f5c;
    background-color: #eccdd7ad;
    border-radius: .25rem !important;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
}

.card-purple {
    border-color: #baa0e9b3;
    background-color: #e2d2ff73;
    border-radius: .25rem !important;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
}

.col-form-label.label-empty {
    padding-top: 48px;
}

label[required]:after {
    content: '*';
    padding-left: 0.25rem;
    color: #ff0000;
    font-weight: bold;
}

/* ===============================
Global DX customize styles
=============================== */
/* TextBox  styles  */
.dx-textbox[readonly] {
    background-color: #efefef54;
}

.dx-textbox.dx-state-readonly,
.dx-textbox.dx-state-disabled {
    background-color: #efefef94;
    border-style: solid !important;
}

/* TextArea  styles  */
.dx-textarea.dx-state-disabled {
    background-color: #efefef94;
}

/* Button Styles*/
.dx-button.dx-button-warning {
    background-color: #ffc107;
    border-color: transparent;
    color: #fff;
}

    .dx-button.dx-button-warning .dx-icon {
        color: #fff;
    }

.dx-button.dx-button-dark {
    background-color: #212529;
    border-color: transparent;
    color: #fff;
}

    .dx-button.dx-button-dark .dx-icon {
        color: #fff;
    }

/* DataGrid  styles  */
.dx-datagrid .dx-datagrid-headers .dx-datagrid-table td {
    text-align: center !important;
    vertical-align: middle !important;
}

.dx-datagrid .dx-datagrid-content .dx-datagrid-table td {
    vertical-align: middle !important;
}

.dx-datagrid tr.dx-header-row .dx-datagrid-sticky-column-left,
.dx-datagrid tr.dx-header-row .dx-datagrid-sticky-column-right {
    background-color: #e1e1e1 !important;
}

/* DropDownButton  styles  */
.dx-dropdownbutton .dx-button-danger {
    background-color: #d9534f;
    border-color: #d43f3a;
    color: #fff
}

    .dx-dropdownbutton .dx-button-danger .dx-icon {
        color: #fff
    }

    .dx-dropdownbutton .dx-button-danger.dx-state-focused,
    .dx-dropdownbutton .dx-button-danger.dx-state-hover {
        background-color: #bb3531;
    }

/* FileUploader  styles  */
.dx-fileuploader-button,
.dx-fileuploader-button.dx-state-focused {
    background-color: #337ab7;
    color: #fff;
}

    .dx-fileuploader-button:hover {
        background-color: #296293;
        color: #fff;
    }


div.dx-button[aria-label='Yes'] {
    background-color: #337ab7;
    border-color: transparent;
    color: #fff;
}

div.dx-button[aria-label='No'] {
    background-color: #212529;
    border-color: transparent;
    color: #fff;
}


.bg-danger-alt {
    opacity: 1;
    background-color: #fc5e6e !important;
}

.bg-success-alt {
    opacity: 1;
    background-color: #8cd2b2 !important;
    /*#5bcd5f !important*/
}

.bg-info-alt {
    opacity: 1;
    background-color: #a1c6ff !important;
}

.bg-warning-alt {
    opacity: 1;
    background-color: #ffe07d !important;
}

.bg-purple-alt {
    opacity: 1;
    background-color: #C1BBDD !important;
}

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

/* ---------------------------------------------------
    SCROLL UP STYLE
----------------------------------------------------- */
#scroll-up {
    bottom: 8px;
    right: 16px;
    background-color: #cef1a6;
    border-radius: 4px;
    padding: 0.25rem;
    color: #111;
    line-height: 1;
    opacity: 0.8;
}

    #scroll-up:hover {
        background-color: #cef1a6;
        color: #76816a;
        opacity: 1;
    }