/*------------------------------------------------
FROM: explorer.css
------------------------------------------------*/
div.explorer_path_link {
    background-color: var(--ikeja_grey);
    color: var(--ikeja_black);
    display: flex; 
    align-items: center;  
    justify-content: center;
    height: 2em;
    margin: var(--margin_px);
    padding: var(--margin_px);
    
    border-radius: var(--margin_px);
    border-style: solid;
    border-width: 1px;
    border-color: var(--ikeja_black);

    cursor: pointer;
}

div.explorer_folder {
    background-color: var(--ikeja_grey);
    color: var(--ikeja_black);
    display: flex; 
    align-items: center;  
    justify-content: center;
    height: 2em;
    margin: var(--margin_px);
    padding: var(--margin_px);

    border-radius: var(--margin_px);
    border-style: solid;
    border-width: 1px;
    border-color: var(--ikeja_black);

    cursor: pointer;
}

input.explorer_folder_input:read-only {
    cursor: pointer;
    background-color: transparent;
    border: none;
}

div.explorer_folder.selected {
    background-color: var(--ikeja_blue);
    color: var(--ikeja_white);
    display: flex; 
    align-items: center;  
    justify-content: center;
    height: 2em;
    margin: var(--margin_px);
    padding: var(--margin_px);
    border-radius: var(--margin_px);
    cursor: pointer;
}

div.explorer_folder.cut {
    background-color: var(--ikeja_yellow);
    color: var(--ikeja_white);
    display: flex; 
    align-items: center;  
    justify-content: center;
    height: 2em;
    margin: var(--margin_px);
    padding: var(--margin_px);
    border-radius: var(--margin_px);
    cursor: pointer;
}

/*------------------------------------------------
FROM: ScarletButton.css
------------------------------------------------*/
button.ScarletButton {
    background-color: var(--ikeja_black);
    border-color: var(--ikeja_black);
    display: flex;
    justify-content: center;
    height: 3em;
    width: 100%;
    border-radius: 9px;
    margin-left: auto;
    margin-right: auto;
}

button.ScarletButton:disabled {
    background-color: var(--ikeja_dark_grey);
    border-color: var(--ikeja_black);
}

button.ScarletButton:disabled .text {
    color: var(--ikeja_grey);
}

button.ScarletButton:disabled .icon {
    filter: grayscale(100%);
}

button.ScarletButton:hover:disabled {
    background-color: var(--ikeja_dark_grey);
    border-color: var(--ikeja_black);
    cursor: auto;
}

button.ScarletButton:hover{
    background-color: var(--ikeja_very_dark_grey);
    border-color: var(--ikeja_black);
    transition: background-color 0.3s;
    cursor: pointer;
}

div.ScarletButton.text{
    color: var(--ikeja_white);
    font-weight: 550;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 6px;
    margin-right: 6px;
}

div.ScarletButton.idler_text{
    color: var(--ikeja_white);
    font-weight: 550;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 6px;
    margin-right: 6px;
}

div.ScarletButton.icon{
    font-weight: 550;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 6px;
    margin-right: 6px;
}

div.ScarletButton.idler {
    border: 8px solid var(--ikeja_light_grey);
    border-top: 8px solid var(--ikeja_orange); 
    border-radius: 50%;
    width: 18px;
    height: 18px;
    animation: spin 1s linear infinite;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 6px;
    margin-right: 6px;
}

img.ScarletButton.icon{
    height: 18px;
    width: 18px;
    background-color: var(--ikeja_orange);
    mask-composite: exclude;
    mask-size: 18px 18px;
    mask-mode: alpha;
    mask-repeat: no-repeat;
    filter: blur(1px);
}

/*------------------------------------------------
FROM: ScarletIconButton.css
------------------------------------------------*/
button.ScarletIconButton {
    position: relative;
    width: 230px;
    height: 180px;
    margin:  var(--margin_px);
    background: var(--ikeja_grey);

    border-radius: 16px;
    border-style: solid;
    border-width: 2px;
    border-color: var(--ikeja_dark_grey);
}

button.ScarletIconButton:disabled {
    background-color: var(--ikeja_dark_grey);
}

button.ScarletIconButton:hover {
    border-color: var(--ikeja_black);
    background: var(--ikeja_grey);
    transition: 0s;
}

button.ScarletIconButton:hover:disabled {
    background-color: var(--ikeja_dark_grey);
    border-color: var(--ikeja_dark_grey);
    cursor: auto;
}

div.ScarletIconButton.text {
    color: var(--ikeja_black);
    font-weight: 550;
    position:absolute;
    vertical-align:middle;
    text-align: center;
    top: calc(100px + 20px);
    height: 1.5em;
    left: 10px;
    width: calc(100% - 20px);
}

button.ScarletIconButton:disabled .text {
    color: var(--ikeja_grey);
}

div.ScarletIconButton.sub_text {
    color: var(--ikeja_very_dark_grey);
    font-size: var(--small_font_size);
    position:absolute;
    vertical-align:middle;
    text-align: center;
    top: calc(100px + 20px + 22px);
    height:1.5em;
    left:10px;
    width:calc(100% - 20px);
}

button.ScarletIconButton:disabled .sub_text {
    color: var(--ikeja_grey);
}

div.ScarletIconButton.icon_div {
    position:absolute;
    top: 10px;
    left: calc((100% - 100px) / 2);
    border-radius: 50%;
    width: 100px;
    height: 100px;
    background-color: var(--ikeja_bright_blue);
    display: flex; 
    justify-content: center;
}

img.ScarletIconButton {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    height: 50px;
    width: 50px;
    background-color: var(--ikeja_white);
    mask-composite: exclude;
    mask-size: 50px 50px;
    mask-mode: alpha;
    mask-repeat: no-repeat;
    mask-position: center;
    filter: blur(1px);
}

button.ScarletIconButton:disabled .icon_div {
    filter: grayscale(100%);
}

button.ScarletIconButton:disabled .img {
    filter: grayscale(100%);
}

div.ScarletIconButton.idler_text{
    color: var(--ikeja_white);
    font-weight: 550;
    position:absolute;
    vertical-align:middle;
    text-align: center;
    bottom:1.5em;
    height:2em;
    left:10px;
    width:calc(100% - 20px);
}

div.ScarletIconButton.idler {
    position:absolute;
    top: calc(10px + 20px - 10px);
    left: calc(50% - 30px  - 10px);
    width: 60px;
    height: 60px;

    border: 10px solid var(--ikeja_light_grey);
    border-top: 10px solid var(--ikeja_orange); 
    border-radius: 50%;

    animation: spin 1s linear infinite;
}

div.ScarletIconButton.container {
    background-color: transparent;
}

@media only screen and (max-width: 750px) {
    button.ScarletIconButton {
        width: calc(100% - var(--margin_px) * 2);
        height: calc(60px + 20px);
    }

    div.ScarletIconButton.icon_div {
        top: 10px;
        left: 10px;
        width: 60px;
        height: 60px;
    }

    div.ScarletIconButton.text {
        vertical-align:middle;
        text-align: left;
        top: 10px;
        height: 1.5em;
        left:calc(60px + 20px);
        width:calc(100% - 60px - 32px);
    }

    div.ScarletIconButton.sub_text {
        vertical-align:middle;
        text-align: left;
        top: calc(10px + 20px);
        height: 1.5em;
        left: calc(60px + 20px);
        width: calc(100% - 60px - 32px);
    }

    img.ScarletIconButton {
        height: 30px;
        width: 30px;
        mask-size: 30px 30px;

    }

    div.ScarletIconButton.idler {
        top: 15px;
        left: 15px;
        width: 36px;
        height: 36px;

        border: 7px solid var(--ikeja_light_grey);
        border-top: 7px solid var(--ikeja_orange); 
        border-radius: 50%;

        animation: spin 1s linear infinite;
    }

    div.ScarletIconButton.idler_text{
        vertical-align:middle;
        text-align: left;
        top: calc(40px - 0.5em);
        height: 1.5em;
        left:calc(60px + 20px);
        width:calc(100% - 60px - 32px);
    }

    div.ScarletIconButton.container {
        width: calc(100%);
    }
} 

/*------------------------------------------------
FROM: grid.css
------------------------------------------------*/
.grid {
    display: block;

    margin-top: var(--margin_px);
    margin-bottom: var(--margin_px);
    margin-left: calc(var(--margin_px) * 1.5);
    margin-right: calc(var(--margin_px) * 1.5);

    border-radius: calc(var(--outer_border_radius) - var(--margin_px));
    border-style: solid;
    border-width: 1px;
    border-color: var(--ikeja_dark_grey);
    box-shadow: 0px 0px 8px var(--ikeja_dark_grey);

    min-height: 2em;
    overflow-x: auto;
}

.grid.full {
    width: calc(100% - var(--margin_px) * 3 - 2px);
}

.grid.threequarter{
    width: calc(75% - var(--margin_px) * 3 - 2px);
}

.grid.half {
    width: calc(50% - var(--margin_px) * 3 - 2px);
}

.grid.quarter {
    width: calc(25% - var(--margin_px) * 3 - 2px);
}

.grid:last-of-type {
    margin-bottom: var(--margin_px);
}

.grid.icon_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    box-shadow: none;
}

@media only screen and (max-width: 750px) {
    .grid.threequarter{
        width: calc(100% - var(--margin_px) * 2);
    }

    .grid.half {
        width: calc(100% - var(--margin_px) * 2);
    }

    .grid.quarter {
        width: calc(50% - var(--margin_px) * 2);
    }

    .grid.icon_container {
        justify-content: center;
    }
}


/*------------------------------------------------
FROM: ScarletModal.css
------------------------------------------------*/
div.ScarletModal {
    display: none;
    position: fixed;
    z-index: 10;
    padding-top: 1ch;
    padding-bottom: 10em;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
}

div.modal_content{
    background-color: var(--ikeja_grey);
    border: none;
    box-shadow: none;
}

div.ScarletModal.inner_modal{
    display: block;
    position: relative;
    text-align: center;
    background-color: transparent ;
    box-shadow: none;
    margin-left: auto; 
    margin-left: auto; 
    margin-top: 4em;
    margin-bottom: 4em;
    padding: 0px;
    border-radius: 0px;
    height: fit-content;
}

div.ScarletModal.inner_modal.full{
    width: calc(80% - var(--margin_px) * 2);
}

div.ScarletModal.inner_modal.narrow{
    width: calc(40% - var(--margin_px) * 2);
}

span.ScarletModal.modal_close {
    margin-right: 2em; 
    float:right;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

@media only screen and (max-width: 640px) {
    span.ScarletModal.modal_close {
        margin-right: 0.5em; 
    }

    div.ScarletModal.inner_modal.full{
        width: calc(100% - var(--margin_px) * 2);
    }

    div.ScarletModal.inner_modal.narrow{
        width: calc(100% - var(--margin_px) * 2);
    }
}

span.ScarletModal.modal_close:hover,
span.ScarletModal.modal_close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/*------------------------------------------------
FROM: hamburger_menu.css
------------------------------------------------*/
div.Hamburger{
    position: absolute;
    display: block;

    top: 72px;
    right: 12px;
    z-index: 11;
    width: 20em;

    background-color: var(--ikeja_grey);
    border-color: var(--ikeja_black);
    border: 1px solid;
}

div.Hamburger.closed{
    display: none;
}

div.Hamburger.open{
    display: block;
}

div.HamburgerButton {
    margin-top: auto; 
    margin-bottom: auto; 
    width: 100%; 
    cursor: pointer;
    vertical-align: middle;
}

div.HamburgerButton:hover{
    color: var(--ikeja_orange);
    transition: 0.1s;
}



/*------------------------------------------------
FROM: ScarletSidebarGroup.css
------------------------------------------------*/
img.ScarletSidebarGroup.button_icon {
    filter: invert(0%);
}

table.ScarletSidebarGroup {
    background-color: var(--ikeja_white);
    width: 100%;
    border-radius: 0;
}

button.ScarletSidebarGroup.toggle {
    margin: 0px;
    display: flex;
    align-items: center;
    text-align: center;
    vertical-align: middle;
    height: 2.2em;
    width: 2.2em;
    min-width: 2.2em;
    min-height: 2.2em;
    padding: 0px;
    background-color: transparent;
    border: none;
}

div.ScarletSidebarGroup {
    overflow: hidden;
}

div.ScarletSidebarGroup.open {
    /* max-height: 300px; */
    transition: max-height 400ms ease-in-out;
}

div.ScarletSidebarGroup.closed {
    /* max-height: 0px; */
    transition: max-height 400ms ease-in-out;
}

th.ScarletSidebarGroup {
    background-color: var(--ikeja_white);
    color: var(--ikeja_black);
}

td.ScarletSidebarGroup {
    background-color: var(--ikeja_white);
    color: var(--ikeja_black);
    overflow: hidden;
    padding: 0px;
    border-top: none;
    border-bottom: none;
    border-left: none; 
    border-right: none;

    /* 1px solid var(--ikeja_black); */
}

td.ScarletSidebarGroup.open {
    /* max-height: 300px; */
    transition: max-height 400ms ease-in-out;
}

td.ScarletSidebarGroup.closed {
    /* max-height: 0px; */
    transition: max-height 400ms ease-in-out;
}


/*------------------------------------------------
FROM: table.css
------------------------------------------------*/
table {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */

    width: auto;
    margin: 0px;

    border-spacing: 0px;
    border-collapse: separate;

    color: var(--ikeja_font_color);
    background-color: transparent;

    border: none;
    border-radius: calc(var(--outer_border_radius) - var(--margin_px)*2);
    border-color: var(--ikeja_dark_grey);

    /* padding-left: var(--margin_px);
    padding-right: var(--margin_px);
    padding-top: var(--margin_px);
    padding-bottom: var(--margin_px); */
}

table.scarlet_advanced_input {
    margin: 0px;
    padding: var(--margin_px);
    background-color: transparent;
    width: 100%;
    border-radius: 0px;
    border: 1px solid var(--ikeja_black);
}

table.full_width {
    width: calc(100% - var(--margin_px) * 2);

    margin-left: var(--margin_px);
    margin-right: var(--margin_px);
    margin-top: var(--margin_px);
    margin-bottom: var(--margin_px);

}

th {
    padding-left: var(--margin_px);;
    padding-right: var(--margin_px);;
    padding-top: var(--margin_px);;
    padding-bottom: var(--margin_px);;

    font-weight: bold;
    font-size: var(--general_font_size);

    color: var(--ikeja_black);
    background-color: var(--ikeja_grey);
    border: 1px solid var(--ikeja_dark_grey);
}

th.clickable:hover{
    background-color: var(--ikeja_black);
    color: var(--ikeja_white);
    cursor: pointer;
}   

th.title{
    font-size: var(--large_font_size);
    height: 2em;
}

th div{
    color: var(--ikeja_heading_font_color);
}

.sub_heading{
    text-align: left;
    font-weight: bold;
    font-size: var(--general_font_size);

    color: var(--ikeja_black);
    background: var(--ikeja_grey);
}

th.top_left {
    border-top-left-radius: calc(var(--outer_border_radius) - var(--margin_px)*2);
}

th.top_right{
    border-top-right-radius: calc(var(--outer_border_radius) - var(--margin_px)*2);
}

th.bottom_left {
    border-bottom-left-radius: calc(var(--outer_border_radius) - var(--margin_px)*2);
}

th.bottom_right {
    border-bottom-right-radius: calc(var(--outer_border_radius) - var(--margin_px)*2);
}

td.top_left {
    border-top-left-radius: calc(var(--outer_border_radius) - var(--margin_px)*2);
}

td.top_right{
    border-top-right-radius: calc(var(--outer_border_radius) - var(--margin_px)*2);
}

td.bottom_left {
    border-bottom-left-radius: calc(var(--outer_border_radius) - var(--margin_px)*2);
}

td.bottom_right {
    border-bottom-right-radius: calc(var(--outer_border_radius) - var(--margin_px)*2);
}

tr {
    padding: 0px;
    margin: 0px;
    border: 0px solid var(--ikeja_black);
}

td {
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 3px;
    padding-bottom: 3px;
    
    margin: 0px;
    border: 1px solid var(--ikeja_dark_grey);

    min-height: 2em;
    /* height: 2em; */

    color: var(--ikeja_font_color);
    background-color: var(--ikeja_background_color);
}

td.clickable:hover{
    background-color: var(--ikeja_dark_blue) !important;
    color: var(--ikeja_white) !important;
    cursor: pointer;
}   

table.invisible {
    margin: 0px;
    padding: 0px;
    border: 0px;
    background-color: transparent;
    width: 100%;
}

td.invisible {
    margin: 0px;
    padding: 0px;
    border: 0px;
    background-color: transparent;
}

tr.invisible {
    margin: 0px;
    padding: 0px;
    border: 0px;
    background-color: transparent;
}



/*------------------------------------------------
FROM: ScarletSidebarText.css
------------------------------------------------*/
button.ScarletSidebarText {
    background-color: var(--ikeja_white);
    display: flex;
    justify-content: left;
    height: 3em;
    width: 100%;
    border-radius: 0px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid var(--ikeja_dark_grey);
    cursor: default;
}

button.ScarletSidebarText:hover {
    border: 1px solid var(--ikeja_dark_grey);
    background-color: var(--ikeja_white);
}

div.ScarletSidebarText.text{
    color: var(--ikeja_black);
    font-weight: normal;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 6px;
    margin-right: 6px;
    text-align: left;
}

div.ScarletSidebarText.icon{
    font-weight: 550;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 6px;
    margin-right: 6px;
}

img.ScarletSidebarText.icon{
    height: 22px;
    width: 22px;
    background-color: var(--ikeja_black);
    mask-composite: exclude;
    mask-size: 22px 22px;
    mask-mode: alpha;
    mask-repeat: no-repeat;
    filter: blur(1px);
}

/*------------------------------------------------
FROM: rightbar.css
------------------------------------------------*/
div.rightbar {
    position: absolute;
    background-color: var(--ikeja_black);
    height: calc(100vh - 71px);
    top: 68px;
    right: 8px;
    width: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 0;
}

div.rightbar.closed {
    top: 68px;
} 

div.rightbar.open {
    top: 68px;
    transition: 400ms;
} 

@media only screen and (max-width: 750px) {
    div.rightbar {
        width: calc(100vw - 16px);
    } 

    div.rightbar.open {
        transition-delay: 0ms;
    } 
}

div.rightbar.content{
    width: 100%;
    height: 3em;
}

/* div.rightbar.textbox{
    display: flex;
    width: 100%;
    height: 3em;
    left: 1px;
    padding-left: 12px;
    align-items: center;

    font-weight: bold;
    font-size: var(--general_font_size);

    color: var(--ikeja_black);
    background-color: var(--ikeja_grey);
    border: 1px solid var(--ikeja_dark_grey);
} */

/*------------------------------------------------
FROM: img.css
------------------------------------------------*/
img.icon{
    width: 1.5em;
    height: 1.5em;
    margin-top: auto; 
    margin-bottom: auto;
    margin-left: auto; 
    margin-right: auto; 
}

img.button_icon{
    filter: invert(0%);
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    margin-top: auto; 
    margin-bottom: auto;
    margin-left: auto; 
    margin-right: auto; 
}

img.icon.large{
    width: 3em;
    height: 3em;
}

img.webapp_icon{
    position: relative;
    filter: invert(90%);
    height: 3em;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
}

img.thumbnail {
    cursor: pointer;
}

img.invert {
    filter: invert(100%);
}

/*------------------------------------------------
FROM: input.css
------------------------------------------------*/
select {
    font-family: var(--general_font);
    font-size: var(--general_font_size);
    background-color: var(--ikeja_light_blue);
    margin-left: calc(var(--margin_px) / 2);
    margin-right: calc(var(--margin_px) / 2);
    width: calc(100% - var(--margin_px) * 2.5);
    height: 2em;
    border: 1px solid var(--ikeja_black);
}

select:disabled{
    color: var(--ikeja_black);
    opacity: 1;
    background-color: var(--ikeja_dark_grey);
}

input{
    font-family: var(--general_font);
    font-size: var(--general_font_size);
    margin-left: calc(var(--margin_px) / 2);
    margin-right: calc(var(--margin_px) / 2);
    height: 1.8em;
    width: calc(100% - var(--margin_px) * 2.5);
    background-color: var(--ikeja_light_blue);
    border: 1px solid var(--ikeja_black);
}

input[type=checkbox]{
    width: 1em;
    height: 1em;
    min-width: 1em;
    min-height: 1em;
    cursor: pointer;
    vertical-align: middle;
}

input:read-only:invalid{
    background-color: var(--ikeja_yellow);
}

input:read-only{
    background-color: var(--ikeja_dark_grey);
} 

input:disabled{
    background-color: var(--ikeja_dark_grey);
} 

input:disabled:invalid{
    background-color: var(--ikeja_yellow);
} 

input:invalid{
    background-color: var(--ikeja_yellow);
}


textarea:read-only{
    background-color: var(--ikeja_dark_grey);
}

textarea{
    background-color: var(--ikeja_light_blue);
    font-family: var(--general_font);
    font-size: var(--general_font_size);
    margin-left: calc(var(--margin_px) / 2);
    margin-right: calc(var(--margin_px) / 2);
    width: calc(100% - var(--margin_px) * 2.5);
    resize: none;
    padding: 0px;
    margin: 0px;
    border: 1px solid var(--ikeja_black);;
}

textarea:invalid{
    background-color: var(--ikeja_yellow);
}

textarea:invalid:read-only{
    background-color: var(--ikeja_yellow);
}

label{
    max-width: 15em;
    font-family: var(--general_font);
    font-size: var(--general_font_size);
    color: var(--ikeja_font_color);

    text-align: right;
}


/*------------------------------------------------
FROM: ScarletSidebarButton.css
------------------------------------------------*/
button.ScarletSidebarButton {
    background-color: var(--ikeja_white);
    display: flex;
    justify-content: left;
    min-height: 3em;
    width: 100%;
    border-radius: 0px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid var(--ikeja_dark_grey);
}

button.ScarletSidebarButton:disabled {
    background-color: var(--ikeja_dark_grey);
    border-color: var(--ikeja_black);
}

button.ScarletSidebarButton:disabled .text {
    color: var(--ikeja_grey);
}

button.ScarletSidebarButton:disabled .icon {
    filter: grayscale(100%);
}

button.ScarletSidebarButton:hover:disabled {
    background-color: var(--ikeja_dark_grey);
    border-color: var(--ikeja_black);
    cursor: auto;
}

button.ScarletSidebarButton:hover{
    background-color: var(--ikeja_grey);
    border-color: var(--ikeja_black);
    transition: background-color 0.3s;
    cursor: pointer;
}

div.ScarletSidebarButton.text{
    color: var(--ikeja_black);
    font-weight: normal;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 6px;
    margin-right: 6px;
    text-align: left;
}

div.ScarletSidebarButton.idler_text{
    color: var(--ikeja_white);
    font-weight: normal;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 6px;
    margin-right: 6px;
}

div.ScarletSidebarButton.icon{
    font-weight: 550;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 6px;
    margin-right: 6px;
}

div.ScarletSidebarButton.idler {
    border: 8px solid var(--ikeja_light_grey);
    border-top: 8px solid var(--ikeja_orange); 
    border-radius: 50%;
    width: 18px;
    height: 18px;
    animation: spin 1s linear infinite;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 6px;
    margin-right: 6px;
}

img.ScarletSidebarButton.icon{
    height: 22px;
    width: 22px;
    background-color: var(--ikeja_yellow_bright);
    mask-composite: exclude;
    mask-size: 22px 22px;
    mask-mode: alpha;
    mask-repeat: no-repeat;
    filter: blur(1px);
}

/*------------------------------------------------
FROM: content.css
------------------------------------------------*/
div.content {
    position: absolute;
    height: calc(100vh - 72px);
    overflow: auto;
    z-index: 6;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    background-color: transparent;
    color: var(--ikeja_font_color);

    border-radius: 0px;
}

div.content.closed {
    left: 8px;
    width: calc(100% - 16px);
    transition: 400ms;
} 

div.content.open_left {
    left: calc(300px + 8px);
    width: calc(100% - 316px);
    transition: 400ms;
} 

div.content.open_right {
    left: 8px;
    width: calc(100% - 316px);
    transition: 400ms;
} 

@media only screen and (max-width: 750px) {
    div.content.closed {
        left: 8px;
        width: calc(100% - 12px);
    } 
    
    div.content.open {
        left: 8px;
        width: calc(100% - 12px);
    } 

    div.content.open_left {
        left: 8px;
        width: calc(100% - 12px);
    } 
    
    div.content.open_right {
        left: calc(-100%);
        width: calc(100% - 12px);
    } 
}

/*------------------------------------------------
FROM: ScarletOTPModal.css
------------------------------------------------*/
div.ScarletOTPModal {
    display: none;
    position: fixed;
    z-index: 20;
    padding-top: 1ch;
    padding-bottom: 10em;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
}

div.modal_content{
    background-color: var(--ikeja_grey);
    border: none;
    box-shadow: none;
}

div.ScarletOTPModal.inner_modal{
    display: block;
    position: relative;
    text-align: center;
    background-color: transparent ;
    box-shadow: none;
    margin-left: auto; 
    margin-left: auto; 
    margin-top: 4em;
    margin-bottom: 4em;
    padding: 0px;
    border-radius: 0px;
    height: fit-content;
}

div.ScarletOTPModal.inner_modal.full{
    width: calc(80% - var(--margin_px) * 2);
}

div.ScarletOTPModal.inner_modal.narrow{
    width: calc(40% - var(--margin_px) * 2);
}

span.ScarletOTPModal.modal_close {
    margin-right: 2em; 
    float:right;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

@media only screen and (max-width: 640px) {
    span.ScarletOTPModal.modal_close {
        margin-right: 0.5em; 
    }

    div.ScarletOTPModal.inner_modal.full{
        width: calc(100% - var(--margin_px) * 2);
    }

    div.ScarletOTPModal.inner_modal.narrow{
        width: calc(100% - var(--margin_px) * 2);
    }
}

span.ScarletOTPModal.modal_close:hover,
span.ScarletOTPModal.modal_close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/*------------------------------------------------
FROM: root.css
------------------------------------------------*/
/* 
@font-face { 
    font-family: 'ikejaMainFont'; 
    src: url('/static/fonts/Sevillana-Regular.ttf');
}
*/

@font-face {
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("/static/fonts/fa-brands/fa-brands-400.eot");
    src: url("/static/fonts/fa-brands/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("/static/fonts/fa-brands/fa-brands-400.woff2") format("woff2"), url("/static/fonts/fa-brands/fa-brands-400.woff") format("woff"), url("/static/fonts/fa-brands/fa-brands-400.ttf") format("truetype"), url("/static/fonts/fa-brands/fa-brands-400.svg#fontawesome") format("svg"); }
  

:root {
    --ikeja_red: #ED4934;
    --ikeja_red_transparent: #ED49347F;
    --ikeja_orange: #F79962;
    --ikeja_orange_transparent: #ff7c177F;
    --ikeja_blue: #374FA5;
    --ikeja_bright_blue: #648DEE;
    --ikeja_dark_blue: #394260;
    --ikeja_light_blue: #E8F0FE;
    --ikeja_yellow: #ffed4d;
    --ikeja_yellow_bright: #fff48f;
    --ikeja_teal: #3CA8A9;
    --ikeja_green: #25B15A;
    --ikeja_aqua: #408E8F;
    
    --ikeja_white: #FFF;
    --ikeja_light_grey: #F6F6FA;
    --ikeja_grey: #E9E9EE;
    --ikeja_dark_grey: #b3b3b6;
    --ikeja_very_dark_grey: #4D4D4D;
    --ikeja_black: #272727;

    --ikeja_purple: #9D5260;

    --colour_pass: var(--ikeja_green);
    --colour_fail: var(--ikeja_red);
    --colour_pending: var(--ikeja_dark_grey);

    --ikeja_background_color: var(--ikeja_light_grey);
    --ikeja_font_color: var(--ikeja_black);
    
    --ikeja_button_font_color: var(--ikeja_light_grey);
    --ikeja_button_font_color_invert: var(--ikeja_white);

    --ikeja_heading_font_color: var(--ikeja_light_grey);
    --ikeja_subheading_font_color: var(--ikeja_light_grey);

    --ikeja_disabled_font_color: var(--ikeja_black);
    --ikeja_disabled_background_color: var(--ikeja_dark_grey);

    /* --general_font: "ikejaMainFont", sans-serif; */
    --general_font: "Font Awesome 5 Brands", sans-serif; 

    --master_font_size: 16px;
    --large_font_size: calc(var(--general_font_size) * 1.25);
    --general_font_size: var(--master_font_size);
    --small_font_size: calc(var(--general_font_size) * 0.75);

    --outer_border_radius: 25px;
    --margin_px: 6px;
}

@media (prefers-color-scheme: dark) { 
    :root {
        --ikeja_background_color: var(--ikeja_light_grey);

        --ikeja_font_color: var(--ikeja_black);

        --ikeja_button_font_color_invert: var(--ikeja_white);
        --ikeja_button_font_color: var(--ikeja_light_grey);
        --ikeja_heading_font_color: var(--ikeja_light_grey);
        --ikeja_subheading_font_color: var(--ikeja_light_grey);
    }
}

@media only screen and (max-width: 960px) {
    :root{
        --general_font_size: calc(var(--master_font_size) * 0.875);
        --small_font_size: calc(var(--general_font_size) * 0.75);
    }
}

@media only screen and (max-width: 640px) {
    :root{
        --general_font_size: calc(var(--master_font_size) * 0.75);
    }
}

body{
    font-family: var(--general_font);
    font-size: var(--general_font_size);
    background-color: var(--ikeja_background_color);
    color: var(--ikeja_font_color);
}

b {
    font-family: var(--general_font);
    font-size: var(--general_font_size);
    color: var(--ikeja_font_color);
}

p {
    font-family: var(--general_font);
    font-size: var(--general_font_size);
    color: var(--ikeja_font_color);
}

div {
    margin: 0px;
    padding: 0px;
    font-family: var(--general_font);
    font-size: var(--general_font_size);
    color: var(--ikeja_font_color);
}


@media only screen and (max-width: 750px) {
    div.content {
        width: calc(100vw - 12px);
    }
}

.loader {
    border: 8px solid var(--ikeja_light_grey);
    border-top: 8px solid var(--ikeja_red); 
    border-radius: 50%;
    width: 1em;
    height: 1em;
    animation: spin 1s linear infinite;
  }
  
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

hr {
    color: var(--ikeja_grey);
    background-color: var(--ikeja_grey);
    border-style: none;
    height: 2px;
}

button.toggle_header {
    margin-left: var(--margin_px);
    margin-right: var(--margin_px);
}

/*------------------------------------------------
FROM: ScarletTabWindow.css
------------------------------------------------*/
div.ScarletTabWindow.tabHeader {
    display: flex;
    background-color: var(--ikeja_white);
    border-bottom: 1px solid var(--ikeja_black);
    width: calc(100% - 8px);
    height: 3em;
}

div.ScarletTabWindow.content {
    position: relative;
    width: calc(100% - 8px);
    height: calc(100% - 3em - 2px);
    display: flex;
    flex-wrap: wrap; 
    border-left: 1px solid var(--ikeja_black);
    overflow: auto;
}

button.ScarletTabWindow.tab{
    border-radius: 0px 12px 0px 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-top: 5px;
    border: 1px solid var(--ikeja_black);
    border-bottom: none;
    text-align: left;
}

button.ScarletTabWindow.tab.inactive {
    background-color: var(--ikeja_white);
    color: var(--ikeja_black);
}

button.ScarletTabWindow.tab.active {
    background-color: var(--ikeja_black);
    color: var(--ikeja_white);
}

/*------------------------------------------------
FROM: modal.css
------------------------------------------------*/
div.modal {
    display: none;
    position: fixed;
    z-index: 10;
    padding-top: 1ch;
    padding-bottom: 10em;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
}

div.inner_modal{
    position: relative;
    text-align: center;
    width: calc(80% - var(--margin_px) * 2);
    background-color: none;
    border-radius: var(--outer_border_radius);
    margin:auto; 
    margin-top: 4em;
    margin-bottom: 4em;
    padding: 1em;
}

div.inner_modal_narrow{
    position: relative;
    text-align: center;
    width: calc(40% - var(--margin_px) * 2);
    background-color: none;
    border-radius: var(--outer_border_radius);
    margin:auto; 
    margin-top: 4em;
    margin-bottom: 4em;
    padding: 1em;
}

.inner_modal_narrow .grid{
    box-shadow: none;
    border: none;
    background-color: var(--ikeja_grey);
}

.inner_modal .grid{
    box-shadow: none;
    border: none;
    background-color: var(--ikeja_grey);
}

@media only screen and (max-width: 640px) {
    div.inner_modal {
        width: calc(100% - var(--margin_px) * 2);
    }

    div.inner_modal_narrow {
        width: calc(100% - var(--margin_px) * 2);
    }
}

.modal_close {
    margin-right: 2em; 
    float:right;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.modal_close:hover,
.modal_close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}


/*------------------------------------------------
FROM: header.css
------------------------------------------------*/

div.header_tabs{
    display: flex;
    flex-wrap: wrap;
    justify-content: left;

    margin-top: var(--margin_px);
    margin-bottom: var(--margin_px);
    margin-left: var(--margin_px);
    margin-right: var(--margin_px);

    background-color: var(--ikeja_grey);
    border-radius: 9px; 
}

div.header_static {
    width: calc(100%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
}

img.header_logo {
    width: 60px; 
    height: auto; 
    margin: auto; 
    filter: brightness(0%); 
    position: absolute; 
    left: calc(50vw - 36px);
    top: 8px;
}


/*------------------------------------------------
FROM: button.css
------------------------------------------------*/
button {
    font-family: var(--general_font);
    font-size: var(--general_font_size);
    text-align: center;
    font-weight: normal;

    display: block;
    cursor: pointer;

    overflow: visible;
    height: auto;

    border-radius: 9px;;
    border-style: solid;
    border-width: 2px;
    border-color: var(--ikeja_dark_grey);

    color: var(--ikeja_black);
    background: var(--ikeja_white);

    min-height: 2em;
    width: 8em;
    
    padding-left: var(--margin_px);
    padding-right: var(--margin_px);
    padding-top: var(--margin_px);
    padding-bottom: var(--margin_px);
    
    margin-top: auto;
    margin-bottom: auto;
    margin-left: var(--margin_px);
    margin-right: var(--margin_px);
}

.button_text {
    color: var(--ikeja_black);
    position:absolute;
    vertical-align:middle;
    bottom:10px;
    height:2em;
    left:0px;
    width:100%;
}

button.square_small {
    display: flex;
    align-items: center;
    text-align: center;
    vertical-align: middle;
    height: 2.2em;
    width: 2.2em;
    min-width: 2.2em;
    min-height: 2.2em;
    border-radius: 5px;
    padding: 0px;
}

div.square_small {
    display: flex;
    align-items: center;
    text-align: center;
    vertical-align: middle;
    height: 2.2em;
    width: 2.2em;
    min-width: 2.2em;
    min-height: 2.2em;
    padding: 0px;

    border-radius: 5px;
    border-style: solid;
    border-width: 2px;
    border-color: var(--ikeja_black);
}

button.square_tiny {
    display: flex;
    text-align: center;
    vertical-align: middle;
    align-items: center;
    height: 1.5em;
    width: 1.5em;
    min-width: 1.5em;
    min-height: 1.5em;
    border-radius: 5px;
    padding: 0px;
}

button.no_margin {
    margin: 0px;
}

button.no_padding {
    padding: 0px;
}

button:hover {
    border-color: var(--ikeja_black);
    transition: 0.1s;
}

button:disabled {
    color: var(--ikeja_disabled_font_color);
    background-color: var(--ikeja_disabled_background_color);
    cursor: default;
}

input[type=submit]{
    font-family: var(--general_font);
    font-size: var(--general_font_size);
    text-align: center;
    font-weight: normal;

    display: block;
    cursor: pointer;

    overflow: visible;
    height: auto;

    border-radius: calc(var(--outer_border_radius));
    border-style: solid;
    border-width: 2px;
    border-color: var(--ikeja_black);

    color: var(--ikeja_button_font_color);
    background: var(--ikeja_orange);

    min-height: 2em;
    width: 8em;
    
    padding-left: var(--margin_px);
    padding-right: var(--margin_px);
    padding-top: var(--margin_px);
    padding-bottom: var(--margin_px);
    
    margin-top: auto;
    margin-bottom: auto;
    margin-left: var(--margin_px);
    margin-right: var(--margin_px);
}

input[type=submit]:hover{
    color: var(--ikeja_button_font_color_invert);
    background-color: var(--ikeja_black);
    transition: background-color 0.1s;
    cursor: pointer;
}

input[type=submit]:disabled{
    color: var(--ikeja_disabled_font_color);
    background-color: var(--ikeja_disabled_background_color);
    cursor: default;
}



/*------------------------------------------------
FROM: ScarletContainer.css
------------------------------------------------*/
img.ScarletContainer.button_icon {
    filter: invert(0%);
}

td.ScarletContainer {
    background-color: var(--ikeja_grey);
    color: var(--ikeja_black);
}

th.ScarletContainer {
    background-color: var(--ikeja_grey);
    color: var(--ikeja_black);
}

/*------------------------------------------------
FROM: form.css
------------------------------------------------*/
form{
    font-family: var(--general_font);
    font-size: var(--general_font_size);
}
 


td.message_td {
    font-size: max(12px, 50%);
    font-style: italic;
}


/*------------------------------------------------
FROM: tab.css
------------------------------------------------*/

button.tab_button.active {
    color: var(--ikeja_light_grey);
    outline-color: var(--ikeja_light_grey);
    background-color: var(--ikeja_black);
}

button.tab_button {
    background-color: var(--ikeja_grey); 
    color: var(--ikeja_black);
    height: 4em;

    padding: calc(var(--margin_px) / 2);
    margin: calc(var(--margin_px) / 2);

    border-radius: 9px;
    font-weight: bold;

    width:auto;
    min-width: 8em;
    max-width: calc(20vw - var(--margin_px) * 2);
}

/*------------------------------------------------
FROM: leftbar.css
------------------------------------------------*/
/* div.leftbar {
    position: absolute;
    background-color: var(--ikeja_black);
    left: 8px;
    height: calc(100vh - 68px);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 4;
}

div.leftbar.closed {
    width: 0px;
    transition: 400ms;
} 

div.leftbar.open {
    width: 300px;
    transition: 400ms;
}  */

div.leftbar {
    position: absolute;
    background-color: var(--ikeja_black);
    width: 300px;
    left: -300px;
    height: calc(100vh - 70px);
    overflow-y: auto;
    z-index: 0;
}

div.leftbar.closed {
    left: -300px;
    transition: 400ms;
} 

div.leftbar.open {
    left: 8px;
    transition: 400ms;
} 

@media only screen and (max-width: 750px) {
    div.leftbar {
        width: calc(100vw - 16px);
        left: calc(-100vw + 16px);
    } 

    div.leftbar.closed {
        width: calc(100vw - 16px);
        left: calc(-100vw + 16px);
    } 

    div.rightedge {
        width: calc(100vw);
    }
}

div.leftedge {
    position: absolute;
    width: 8px;
    height: calc(100vh);
    left: 0px;
    top: 0px;
    background-color: var(--ikeja_black);
    z-index: 5;
}

div.topedge {
    position: absolute;
    width: calc(100% - 8px);
    height: 16px;
    left: 0px;
    top: 0px;
    background-color: var(--ikeja_black);
    z-index: 5;
}

div.rightedge {
    position: absolute;
    width: 300px;
    height: calc(100vh - 8px);
    right: 8px;
    top: 0px;
    background-color: var(--ikeja_black);
    z-index: 0;
}