/*
    Body style brought over from /home/css/style.css in Coordinate
    Used to match font-family
*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,700,300,400);
@import url("/home/css/GlobalStyle.css");



body {
    font-family: "Open Sans",Calibri,Verdana,Arial,sans-serif;
    color: #000000;
    font-size: 12px;
    margin: 0px;
}


/*
Overlay Window Styling ***************************************************************************************************************************************************************************************
*/
.OverlayWindow {
    display: none;
    position: absolute;
    top: 125px;
    left: 125px;
    width: 500px;
    background-color: #E0EEEE;
    border: 5px solid black;
    border-radius: 5px;
    padding: 10px;
    z-index: 99;
}

.required { color: #ff0000; }

.error-message {
    color: #d83d3d;
    display: none;
}

.error {
    border: 2px solid #d83d3d !important;
}

.no-close .ui-dialog-titlebar-close {
    display: none;
}

.error-label {
    color: #d83d3d !important;
}

/*
More Menu Styling *****************************************************************************************************************************************************************************************************
Usage: 
    .moreMenu
    .moreMenu-open
    .moreMenuWindow
    .moreMenuOption 

********************************************************************************************************************************************************************************************************************
*/
.fa-ellipsis-v {
    margin-left: 10px;
}

.moreMenu {
    width: 80px;
    height: 30px;
    font-family: "Open Sans";
    font-weight: normal;
    font-size: 14px;
    background: white;
    stroke: #ccc;
    border-color: #ccc;
    color: #333;
    padding-left: 10px;
    padding-right: 10px;
    margin: 0px 15px 0px 15px !important;
}

    .moreMenu:hover {
        stroke: #aeaeae;
        border-color: #aeaeae;
        color: #333;
        background: #ebebeb;
    }

    .moreMenu:active {
        stroke: #aeaeae !important;
        border-color: #aeaeae !important;
        color: #333 !important;
        background: #cccccc !important;
    }

    .moreMenu:disabled {
        stroke: #eaeaea;
        border-color: #eaeaea;
        color: #eaeaea;
        background: white;
    }

.moreMenu-open {
    background: #507282 !important; 
    color: white !important; 
    stroke: none;
    border-width: 0 !important;
}

    .moreMenu-open:active {
        background: #507282;
        color: white;
        stroke: #4D4D4D;
        border-color: #4D4D4D;
        border-width: 1px;
    }

    .moreMenu-open:hover {
        background: #507282;
        color: white;
        stroke: none;
    }

    .moreMenu-open:disabled {
        background: #cccccc;
        color: white;
        stroke: none;
    }

.moreMenuWindow {
    max-width: 300px;
    min-width: 200px;
    font-family: "Open Sans", sans-serif;
    font-style: normal;
    font-size: 14px;
    text-align: left;
    background: white;
    border: 1px solid #507282;
    border-radius: 5px;
    color: #507282;
    padding-left: 10px;
    padding-right: 10px;
}

.moreMenuOption {
    margin-top: 15px;
    margin-left: 15px;
    margin-bottom: 15px;
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
}

    .moreMenuOption.disabled {
        color: #7c7c7c;
        text-decoration: none;
        cursor: default;
    }

        .moreMenuOption.disabled:hover {
            color: #7c7c7c;
            background-color: white;
        }

    .moreMenuOption:hover {
        background-color: #507282;
        color: white;
    }

.moreMenuDivider {
    margin-bottom: 12px;
    border-bottom: 1px solid #ccc;
}


/*
--------------------------------------------------
    KENDO GRID "MORE BUTTON"
--------------------------------------------------
*/
.k-more-button, .k-button.moreMenu {
    height: 30px;
    min-width: 85px;
    border-radius: 4px;
    background: white; /*C6.1*/
    border: 1px solid #507282 !important;
    color: #507282;
    display: inline-block;
    text-align: center;
    font-size: 14px;
    font-family: "Open Sans", sans-serif;
    font-style: normal;
    padding-left: 10px;
    padding-right: 10px;
    text-decoration: none;
}

    .k-more-button:hover, .k-button.moreMenu:hover, .k-more-button:active {
        border: 1px solid #507282;
        color: white !important;
        background-color: #507282 !important;
    }


.k-more-button:hover span, .k-more-button-open span {
    color: white !important;
}

.k-more-button-open {
    height: 30px;
    min-width: 80px;
    border-radius: 4px;
    background: #507282 !important;
    border: 1px solid #507282 !important;
    color: white !important;
    display: inline-block;
    text-align: center;
    font-size: 14px;
    font-family: "Open Sans", sans-serif;
    font-style: normal;
    padding-left: 10px;
    padding-right: 10px;
    text-decoration: none;
}

.k-more-button .k-i-more-vertical
{
    margin: 0px;
    width: 10px;
}

/*
--------------------------------------
    KENDO GRID MORE BUTTON STYLES
--------------------------------------
*/
.moreDetailsWindow {
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: -117px;
    min-width: 240px;
    max-width: 300px;
    font-size: 14px;
    font-family: "Open Sans", sans-serif;
    font-style: normal;
    color: #507282 !important;
    border: 1px solid #507282;
    border-radius: 5px;
    background: white;
    z-index: 10000;
    position: absolute !important;
    display: none;
    margin-top: 30px;
}

    .moreDetailsWindow .option {
        margin-top: 15px;
        margin-left: 15px;
        margin-bottom: 15px;
        font-size: 14px;
        text-decoration: underline;
        text-align:left;
    }

        .moreDetailsWindow .option:hover {
            cursor: pointer;
            background-color: #507282;
            color: white;
        }

.moreDetailsWindowLeft {
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 3px;
    min-width: 240px;
    max-width: 300px;
    font-size: 14px;
    font-family: "Open Sans", sans-serif;
    font-style: normal;
    color: #507282;
    border: 1px solid #507282;
    border-radius: 5px;
    background: white;
    z-index: 10000;
    position: fixed;
    display: none;
    margin-top: 0px;
}

    .moreDetailsWindowLeft .option {
        margin-top: 15px;
        margin-left: 10px;
        margin-bottom: 15px;
        font-size: 14px;
        text-decoration: underline;
        text-align: left;
    }

        .moreDetailsWindowLeft .option:hover {
            cursor: pointer;
            background-color: #507282;
            color: white;
        }

.lineBreak {
    margin-left: 5px;
    margin-right: 5px;
    border-bottom: solid;
    border-width: 1px;
    border-bottom-color: #cccccc
}

.k-list > .k-state-selected,
.k-state-selected {
    background-color: #507282;
    border-color: #507282;
}

/*
Options Menu Styling *****************************************************************************************************************************************************************************************************
Usage: 
    .optionsMenu
    .optionsMenu-open
    .optionsWindow
    .menuOption 

********************************************************************************************************************************************************************************************************************
*/
.optionsMenu {
    min-width: 80px;
    height: 35px;
    font-family: "Open Sans";
    font-weight: normal;
    font-size: 14px;
    background: #50BDE4;
    stroke: #ccc;
    border-color: #ccc;
    color: #fff;
    padding-left: 10px;
    padding-right: 10px;
    margin: 0px 15px 0px 15px !important;
}

    .optionsMenu:hover {
        stroke: #aeaeae;
        border-color: #aeaeae;
        color: #fff;
        background: #449ab9;
    }

    .optionsMenu:active {
        stroke: #aeaeae !important;
        border-color: #aeaeae !important;
        color: #fff !important;
        background: #4592ae !important;
    }

    .optionsMenu:disabled {
        stroke: #eaeaea;
        border-color: #eaeaea;
        color: #eaeaea;
        background: white;
    }

.optionsMenu-open {
    background: #507282;
    color: white;
    stroke: none;
    border-color: none;
    border-width: 0;
}

    .optionsMenu-open:active {
        background: #507282;
        color: white;
        stroke: #4D4D4D;
        border-color: #4D4D4D;
        border-width: 1px;
    }

    .optionsMenu-open:hover {
        background: #507282;
        color: white;
        stroke: none;
        border-color: none;
    }

    .optionsMenu-open:disabled {
        background: #cccccc;
        color: white;
        stroke: none;
        border-color: none;
    }

.optionsWindow {
    max-width: 300px;
    min-width: 200px;
    font-family: "Open Sans";
    font-size: 14px;
    text-align: left;
    background: white;
    stroke: #ccc;
    border: solid;
    border-color: #ccc;
    color: #333;
    border-width: 1px;
    padding: 15px 10px 3px 10px !important;
    line-height: 100%;
}

.menuOption {
    padding-bottom: 12px;
    cursor: pointer;
    text-decoration: underline;
}

    .menuOption.disabled {
        color: #7c7c7c;
        text-decoration: none;
        cursor: default;
    }

        .menuOption.disabled:hover {
            color: #7c7c7c;
        }

    .menuOption:hover {
        color: #4D4D4D;
    }

.k-checkbox + .k-checkbox-label:before {
    font-family: FontAwesomeSolid;
    border-color: #4d4d4d !important;
    border-width: 2px;
    height: 25px;
    width: 25px;
    border-radius: 4px;
    font-weight: bold;
    padding-top: .05em;
    margin-top: -3px;
    background-color: #f2f2f2;
}

.check-label {
    font-size: 14px;
    display: inline-grid;
}

.k-checkbox:disabled + .k-checkbox-label:before {
    border-color: #adadad !important;
    background-color: #f2f2f2 !important;
    color: #7c7c7c !important;
}

.checkbox-container label {
    cursor: pointer !important;
}

/*Start - Banner*/
.banner {
    float: left;
    box-shadow: 0px 0px 6px -1px rgba(0,0,0,0.4);
    margin: 10px 10px 10px 10px;
    padding-top: 20px;
    padding-bottom: 20px;
    min-height: 75px;
    border-radius: 4px;
    width: CALC(100% - 20px);
    display: none;
    padding-left: 60px;
    box-sizing: border-box;
    padding-right: 20px;
    border: none !important;
}

    .banner:before {
        font-family: FontAwesome;
        padding-right: 20px;
        font-size: 24px;
        display: inline-block;
        float: left;
        margin-left: -40px;
    }

    .banner:not(.skinny):before {
        margin-left: -54px;
    }

    .banner.skinny {
        padding-top: 5px;
        padding-bottom: 5px;
        display: inline-block;
        min-height: 0px;
        padding-top: 6px;
    }

        .banner.skinny:before {
            margin-top: -3px;
        }

    .banner.error {
        background-color: #fc8c86;
        color: #931919;
    }

        .banner.error:before {
            content: "\f06a";
        }

    .banner:not(.skinny) {
        padding-left: 80px;
    }

        .banner:not(.skinny):before {
            font-size: 36px;
        }

    .banner.success {
        background-color: #caef9c;
        color: #6f954a;
    }

        .banner.success:before {
            content: "\f058";
        }

    .banner.warning {
        background-color: #fce1ac;
        color: #B38808;
    }

        .banner.warning:before {
            content: "\f071";
        }

    .banner.info {
        background-color: #e5f5fa;
        color: #059dc6;
    }

        .banner.info:before {
            content: "\f05a";
        }
/*End - Banner*/

/*
    DETAIL PROFILE CARD (UX Standards, standardsJS)
*/
.sked-detail-profile-card {
    border: 1px solid #adadad;
    margin: 20px;
    border-radius: 4px;
    color: #4D4D4D;
    font-size: 14px;
}

    .sked-detail-profile-card hr {
        border-top: #cccccc;
        margin: 0;
    }

    .sked-detail-profile-card .detail-profile-card-header {
        display: table;
        padding: 10px 15px;
    }

        .sked-detail-profile-card .detail-profile-card-header > * {
            display: table-cell;
            vertical-align: middle;
        }

        .sked-detail-profile-card .detail-profile-card-header .detail-profile-card-header-image {
            width: 35px;
            margin-right: 15px;
        }

        .sked-detail-profile-card .detail-profile-card-header .detail-profile-card-header-name {
            font-weight: bold;
            display: table-cell;
            vertical-align: middle;
        }

        .sked-detail-profile-card .detail-profile-card-header .detail-profile-card-header-status {
            padding-left: 5px;
        }

    .sked-detail-profile-card .detail-profile-card-body {
        overflow: hidden;
        padding: 15px;
    }

    .sked-detail-profile-card .detail-profile-card-body-section {
        display: inline-block;
        vertical-align: top;
        float: left;
        width: 30%;
    }

    .sked-detail-profile-card .detail-profile-card-body-section-header {
        font-weight: bold;
    }

/*
    BASIC PROFILE CARD (UX Standards, standardsJS)
*/
.basic-profile-card {
    border: 1px solid #adadad;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 4px;
    color: #4D4D4D;
    font-size: 14px;
}

    .basic-profile-card hr {
        border-top: #cccccc;
        margin: 0;
    }

    .basic-profile-card .basic-profile-card-header {
        display: table;
        padding: 15px;
        width: 100%;
    }

        .basic-profile-card .basic-profile-card-header > * {
            display: table-cell;
            vertical-align: middle;
        }

        .basic-profile-card .basic-profile-card-header .basic-profile-card-header-left {
            float: left;
            width: 50%;
        }

        .basic-profile-card .basic-profile-card-header .basic-profile-card-header-right {
            float: right;
            width: 50%;
        }

        .basic-profile-card .basic-profile-card-header .basic-profile-card-header-image {
            width: 35px;
            max-height: 35px;
            margin-right: -5px;
            border-radius: 50%;
        }

        .basic-profile-card .basic-profile-card-header .basic-profile-card-header-name {
            font-weight: bold;
            display: table-cell;
            vertical-align: middle;
        }

        .basic-profile-card .basic-profile-card-header .basic-profile-card-header-top-left span:not(.basic-profile-card-header-name) {
            vertical-align: middle;
            display: table-cell;
            padding-left: 2px;
        }

        .basic-profile-card .basic-profile-card-header .basic-profile-card-header-top-right {
            display: table-cell;
            vertical-align: middle;
            width: 100%;
            float: right;
            text-align: right;
        }


        .basic-profile-card .basic-profile-card-header .basic-profile-card-header-bottom-left {
            display: table-cell;
            vertical-align: middle;
            width: 100%;
            float: left;
        }

        .basic-profile-card .basic-profile-card-header .basic-profile-card-header-bottom-right {
            display: table-cell;
            vertical-align: middle;
            width: 100%;
            float: right;
            text-align: right;
        }

    .basic-profile-card .basic-profile-card-body {
        overflow: hidden;
        padding: 15px;
    }

    .basic-profile-card .basic-profile-card-body-section {
        display: inline-block;
        vertical-align: top;
        float: left;
        width: 30%;
    }

    .basic-profile-card .basic-profile-card-body-section-header {
        font-weight: bold;
    }
    
    .detail-profile-card-body-section-header {
        margin-bottom: 10px;
    }

/*
    HISTORY CARD (UX Standards, standardsJS)
*/

.history-card {
    border: 1px solid #adadad;
    margin: 20px;
    border-radius: 4px;
    color: #4D4D4D;
    font-size: 16px;
}

    .history-card hr { 
        margin-top: 20px;
        margin-bottom: -15px;
        height: 1px;
        border: 0 none;
        background-color: #CCCCCC;
        color: #CCCCCC;
        width: 100%;
    }

.history-card-top {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

.history-card-bottom {
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

    .history-card .history-card-header {
        width: 100%;
    }

        .history-card .history-card-header > * {
            vertical-align: middle;
        }

        .history-card .history-card-header .history-card-header-name {
            font-weight: bold;
            display: inline-block;
            width: 55%;
        }

        .history-card .history-card-header .history-card-header-datetime-updated {
            display: inline-block;
            float: right;
            color: #999999;
            font-weight: bold;
        }

    .history-card .history-card-body {
        overflow: hidden;
        font-size: 14px;
        width: 100%;
    }

.history-card .history-card-body-row{
    display: flex;
}

.history-card .history-card-body-section-half {
    vertical-align: top;
    float: left;
    width: 50%;
    margin-top: 30px;
}

    .history-card .history-card-body-section-header {
        font-weight: bold;
        padding-bottom: 10px;
    }

.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize;
}

.lowercase {
    text-transform: lowercase;
}

/* CSS for currency boxes, have a $ when there is text and no $ when there isn't */
.currencyHolder:not([data-value=""]):before {
    content: "$";
    position: absolute;
    z-index: 1;
    margin-top: 7px;
    margin-left: 7px;
}

.currencyValue {
    padding-left: 10px !important;
    height: 32px !important;
}

.currencyHolder {
    box-sizing: border-box;
    display: block;
    margin-top: 10px;
    position: relative;
}

.currencyValue::-webkit-inner-spin-button,
.currencyValue::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.currencyValue {
    -moz-appearance: textfield;
}

/* Styling for dropdown buttons */
.button-dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 9px;
    padding-bottom: 9px;
    margin-left: 3px;
    min-width: 200px;
    max-width: 300px;
    font-size: 14px;
    font-family: "Open Sans",sans-serif;
    font-style: normal;
    color: #507282;
    border: 1px solid #507282;
    border-radius: 5px;
    background: #fff;
    z-index: 10000;
    position: absolute;
    display: none;
    margin-top: 0;
    right: 0;
}

.dropdown-content button {
    text-align: left;
    width: 100%;
    display: block;
    margin-bottom: 6px;
    margin-top: 6px;
    font-size: 14px;
    min-width: 80px;
    height: 35px;
    color: #507282;
    background-color: white;
    border: none;
    text-decoration: underline;
}

.dropdown-content button:hover {
    background-color: #507282;
    color: white;
}

.dropdown-content.show {
    display: block;
}