/*==============================================  IMPORTANT - PLEASE READ ==============================================

font-family: 'Raleway', sans-serif;
____

light 300
regular 400
semi bold 600
bold 700
____

========================================================================================================================
*/

/*WRAPPER*/
.KJEWrapper {
    background: transparent!important;
}

/*ALL CONTENT*/
#KJEAllContent {
    font-family: 'Raleway', sans-serif!important;
    font-size: 18px!important;
    line-height: 20px!important;
    font-weight: 400!important;
    color: #393939!important;
    background: transparent!important;
}

/*CALCULATOR TABLE*/
#KJECalculatorTable {
    border: 0!important;
    box-shadow: none!important;
    background: transparent!important;
}

/*REMOVING DINKYTOWN LOGO - TOP LEFT*/
#KJETitle {
    background-image: none!important;
}

/* UPPER RIGHT QUESTIONMARK */
button#KJE-PO-MSG_MENU {
    margin: 0em 0.2em 0em 1em!important;
}

/*UPPER RIGHT MENU BUTTON*/
#KJEMenu {
    border: 2.5px solid #393939!important;
}

#KJEMenu:hover {
    border: 2.5px solid #eee!important;
    outline: none!important;
}

/*MENU WINDOW*/
div#KJEMenuWindow {
    font-family: 'Raleway', sans-serif!important;
    border: 1px solid #393939!important;
    border-radius: 4px!important;
}

div.KJEMenuHeader {
    text-transform: uppercase!important;
    border-radius: 4px!important;
}

#KJEMenuWindowTitle {
    display: inline!important;
}

input.KJEMenuButton {
    font-family: 'Raleway', sans-serif!important;
    text-transform: uppercase!important;
    letter-spacing: 0.3px!important;
    border-radius: 4px!important;
    color: #393939!important;
    background: #eee!important;
}

input.KJEMenuButton:hover {
    font-family: 'Raleway', sans-serif!important;
    text-transform: uppercase!important;
    letter-spacing: 0.3px!important;
    border-radius: 4px!important;
    color: #eee!important;
    background: #393939!important;
    transition: all 0.8s ease!important;
}

div.KJEMenuGroupRow {
    border: none!important;
    padding: 0!important;
    background: white!important;
}

/* DEFINITIONS HEADER */
h2 .KJEDefinitionsHeader {
    font-size: 1.5em!important;
    line-height: 1.5em!important;
    font-weight: 600!important;
    color: #393939!important;
    margin-bottom: 0.5em!important;
}

/* DESCRIPTION OF DEFINITIONS */
.KJEDefinition {
    font-size: 16px!important;
    padding: 0 1.2em!important;
}

.KJEDefinition p {
    margin-bottom: 1em!important;
}

/* CALCULATE AND VIEW REPORT BUTTONS */
div > .KJECommandButton {
    background: #ffffff;
    color: #333333;
    font-size: 1.1em!important;
    padding: 0.3em!important;
    letter-spacing: 0.5px;
    text-transform: uppercase!important;
    border-radius: 4px;
}

div > #KJECommandButtons > input:hover {
    transition: all 0.8s ease;
    color: #eee;
    background: #333333;
}

/*TOGGLE HEADERS*/
td.KJEToggleTitle {
    font-size: 1.2em!important;
    font-weight: 600!important;
    color: #393939!important;
    margin-bottom: 0.5em!important;
}

.KJEDrop {
    padding-bottom: 1.5em!important;
    background: transparent!important;
}

.KJEDropper {
    border-top: 2px solid #c0c0c0!important;
    padding: 15px 0px!important;
    height: 3em!important;
}

div.KJEDropper:focus {
    outline: none!important;
}

div.KJEDropper:hover {
    background: transparent!important;
}

.KJEDroppee {
    background: transparent!important;
}

/*HEADER ABOVE GRAPH */
td.KJEToggleTitle99Cell {
    font-size: 1.2em!important;
    line-height: 1.2em!important;
    font-weight: 600!important;
    color: #393939!important;
    margin-bottom: 0.5em!important;
}

/*GRAPH*/
.KJEGraphDropper {
    border-top: 2px solid #c0c0c0!important;
    padding: 15px 0px!important;
    height: 3em!important;
    background: transparent!important;
}

div.KJEGraphDropper:focus {
    outline: none!important;
}

.KJEGraphContainer {
    background-color: transparent!important;
}

/*INDIVIDUAL INPUTS*/
.KJERange {
    height: 0!important;
}

/* Conflict with Q3FY20 Update  
.KJEInputContainer {
    text-align: end!important;
}

.KJEOutputLabel {
    position: static!important;
}
*/

.KJEInputContainer:hover {
    background: transparent!important;
}

.KJEInput {
    border: 1px solid lightgray!important;
    border-radius: 0px!important;
    box-shadow: none!important;
}

.KJEBold {
    width: auto!important;
    font-size: 1.1em!important;
    line-height: 3em!important;
}

/*QUESTION MARKS BESIDE EACH INPUT*/
button.KJEDefinitionIcon {
    background: #333333!important;
    color: #ffffff!important;
    margin: 0!important;
    padding: 0!important;
    width: 1em!important;
    height: 1em!important;
    text-align: center!important;
    display: inline-block!important;
    line-height: 0.7em!important;
}

button.KJEDefinitionIcon:hover {
    outline: #808080!important;
    background: #eee!important;
    color: #333333!important;
    transition: all 0.5s ease!important;
    font-weight: 600!important;
    border-radius: 20px!important;
}

/*POP UP INFORMATION FOR EACH INPUT*/
/*POP UP BOX*/
div.KJEGuiDefnPopup {
    border: none!important;
}

/*CLOSE POP UP INFORMATION*/
button.KJECloseButton {
    background: #333333!important;
    color: #ffffff!important;
    margin: 0!important;
    padding: 0!important;
    width: 1em!important;
    height: 1em!important;
    text-align: center!important;
    display: inline-block!important;
    line-height: 0.7em!important;
    outline: none!important;
}

button.KJECloseButton:hover {
    background: #ffffff!important;
    color: #000000!important;
    transition: all 1s ease!important;
    border-radius: 4px!important;
    outline: none!important;
}

/* DISCLOSURES */
.KJEDis {
    font-size: 0.7em!important;
    line-height: 2em!important;
    padding: 1em!important;
}

/* FY20 Q4 FIX */
.KJEInputContainer input[type=range].KJERange {
    margin-top: 20px !important;
}


/*MOBILE STYLING*/
@media only screen and (max-width: 800px) {
    #KJECommandButtons {
        width: 260px!important;
        font-size: 0.8em!important;
    }

    #KJETitle {
        padding: 3em 0 0 0!important;
    }

    .KJEReportHeader {
        margin-top: 2em!important;
    }

    .KJEDropper[aria-expanded="false"] {
        margin-bottom: 3.8em!important;
    }

    #KJE-P-INPUTS2[aria-expanded="false"] {
        margin-bottom: 1.6em!important;
    }

    .KJEBold {
        line-height: 2em!important;
    }
    /* Conflict with Q3FY20 Update 
    .KJEInputContainer {
        width: 50%!important;
        text-align: right!important;
    }

    .KJEOutputLabel {
        height: auto!important;
        position: inherit!important;
        left: 138px!important;
    }
    */
    .KJEInput {
        margin: 0.4em 0.8em!important;
        width: 70px!important;
    }

    .KJELabelBold {
        left: 195px!important;
        top: 3.5px!important;
    }
    
    div.KJEToggleClose {
        margin-left: 0!important;
    }

    .KJEInputContainer.KJELabel {
        text-align: center!important;
    }

    .KJELabel.KJEBold {
        width: 109%!important;
    }
}

/*iPhone 5 styling*/

@media only screen and (max-width: 320px) {
    .KJEButtonIsScrolling{
        width: auto!important;
        margin-left: -30px!important;
        left: 1em!important;
    }

    .KJEButtonIsFixed{
        width: auto!important;
        margin-left: -30px!important;
    }

    #KJECommandButtons {
        margin: 0!important;
    }

    #KJEMenuContainer {
        display: flex!important;
        flex-direction: row!important;
    }

    button#KJE-PO-MSG_MENU {
        margin: -25px!important;
    }

    button.KJEMenu {
        margin: 0!important;
    }

    button#KJEMenu {
        margin-right: 17px -25px 0px 0px!important;
    }

    #KJETitle {
        margin-right: 2.2em!important;
    }

    td.KJEToggleTitle99Cell {
        font-size: 1.1em!important;
    }

    .KJEHelp {
        width: max-content!important;
    }

    .KJELabelBold {
        left: 50px!important;
        top: 25px!important;
    }

    .KJEInputContainer {
        margin-bottom: 0.5em!important;
    }

    .KJEInput {
        margin: 2.2em 0 0 -7.5em!important;
        top: 35px!important;
        position: static!important;
    }

    .KJEOutputLabel {
        left: 90px!important;
        top: 42px!important;
    }

    .KJEGraph {
        width: 250px!important;
        height: 230px!important;
        margin-left: -1.5em!important;
    }

    .KJESubTitle {
        width: 90%!important;
    }
}