/*This file contains styling used specifically for this application (styling in this file is intended 
    to mirror that of the www.fibrebox.org website whereever possible.*/


/*General Text*/

/*Text Sizes*/

.txtExtraSmall {
    font-size: .75rem;
    line-height: 1rem;
}
.txtSmall {
    font-size: 1rem;
    line-height: 1.5rem;
}
.txtMedium {
    font-size: 1.5rem;
    line-height: 2rem;
}
.txtLarge {
    font-size: 2rem;
    line-height: 2.25rem;
}
.txtExtraLarge {
    font-size: 2.25rem;
    line-height: 2.5rem;    
}

.txtBold {
    font-weight: 700;
}

.txtExtraBold {
    font-weight: 800;
}




.clrWhite{
    color:#fff
}
.clrBlackBlue {
    color: #000D3E;
}
.clrDarkBlue {
    color: #0A2E72;
}
.clrMediumBlue {
    color: #135BAF;
}
.clrLightBlue {
    color: #148EC4;
}
.clrLightGreen {
    color: #68B164;
}
.clrRed {
    color: crimson;
}


/*Bannners*/
.fbaBanner {    
    min-height: fit-content;
    justify-content: center;
    text-align: center;   
    padding: 1rem;    
}

.bannerBlackBlue {
    background-color: #000D3E;
}
.bannerDarkBlue {
    background-color: #0A2E72;    
}
.bannerMediumBlue {
    background-color: #135BAF;    
}
.bannerLightBlue {
    background-color: #148EC4;
    word-wrap: break-word;
}
.bannerLightGreen {
    background-color: #68B164;    
}
.bannerLightGrey {
    background-color: #eff1f4;
}

.bannerWarningRedGrey {
    background-color: #eff1f4;
    color: red;
    font-size: smaller;
}


/*Nav Boxes*/
.fbaNavBox {
    min-height: 200px;   
    justify-content: center;    
    text-align: center;    
    padding: 1rem;
}


/*Custom SVGs*/
.appSVG {
    --color-fill: yellow;
    --color-stroke: red;    
}


/*Telerik DropDown Boxes*/
.tDropDownBox {
    height: 42px; 
    background-color:greenyellow;

}


/*Buttons*/
.fbaBtn {
    border-radius: 9px;  
    border-width:0px;
    justify-content: center;
    text-align: center;
    font-weight: 600;
    font-size: .875rem;
    line-height: 1.25rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 2rem;
    padding-right: 2rem;
    color: white;
}

.btnBlackBlue {
    background-color: #000D3E;
}
.btnBlackBlue:hover {
    background-color: #0A2E72;
}

.btnDarkBlue {
    background-color: #0A2E72;
}
.btnDarkBlue:hover {
    background-color: #135BAF;
}

.btnMediumBlue {
    background-color: #135BAF;
}
.btnMediumBlue:hover {
    background-color: #148EC4;
}

.btnLightBlue {
    background-color: #148EC4;
}
.btnLightBlue:hover {
    background-color: #5FB3D7;
}

.btnLightGreen {
    background-color: #68B164;
}
.btnLightGreen:hover {
    background-color: #A7D470;
    color: black;
}

.btnRed {
    background-color:crimson;
}

.btnRed:hover {                
       color: lightgray;    

 }

btnSignOut {
    background-color: lightgray;
    border-width:1px;
    border-color:red;

}

.btnSignOut:hover {
        background-color: #bdb9b9;
        color: white;
}


.SignOut {    
    justify-content: right;
    text-align: right;
    padding: .5rem;
}


.tele-button,
.tele-button:hover {
    width: 100px;
    font-weight:600;
    height: 40px;
    margin-bottom: 5px; 
}

/*Text Treatments*/
/*txtAddBreaks allows strings to be passed to components with a line break included. This is generally used with <span class="txtAddBreaks"> to render text with a line break where the string contains a \n  */
.txtAddBreaks {
    white-space: pre-wrap;    
}


/*DIV Setups*/
/*Application Standard for Divs with a light boarder that wrap internale elements*/
.wrappingDiv {
    display: flex;
    flex-wrap: wrap;
    border-style: solid;
    border-color: lightgray;
    border-radius: 4px;
    border-width: 1px;
    padding: 10px 10px 15px;
}

/*Transitions*/
.transition-colors {
    transition-property: color,background-color,border-color,fill,stroke,-webkit-text-decoration-color;
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke;
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,-webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
}

/*Telerik Kendo Switches*/
/* ON - regular and hover state */
.my-switch.k-switch-on .k-switch-track,
.my-switch.k-switch-on:hover .k-switch-track {
    background-color: #135BAF;
    color: #fff;
    border-color: #0A2E72;
}
/* ON - focused state */
.my-switch.k-switch-on.k-focus .k-switch-track {
    background-color: #135BAF;
    color: #fff;
    border-color: #0A2E72;
}

/* OFF - regular and hover state */
.my-switch.k-switch-off .k-switch-track,
.my-switch.k-switch-off:hover .k-switch-track {
    background-color: #ccc;
    color: #000;
}
/* OFF - focused state */
.my-switch.k-switch-off.k-focus .k-switch-track {
    background-color: #666;
    color: #fff;
}

/*SVG-based page icon transformations, based on screen size*/
.pageIcon {
    float: left;
    margin-right: 35px;
    transform-origin: left top;
    transform: scale(3);
}

.sectionIcon {
    float: left;
    margin-right: 5px;
    transform-origin: left top;
    height:42px;
}

.sectionIconGrid {
    float: left;
    margin-right: 5px;
    transform-origin: left top;
    height: 30px;
}


@media only screen and (max-width: 500px) {
       
    .pageIcon {
        float: left;
        margin-right: 35px;        
        transform-origin: left top;
        transform: scale(2);
    }

    .sectionIcon {
        float: left;
        margin-right:5px;
        transform-origin: left top;
        height: 35px;
    }

}

/*Telerik Data Grid Styling*/
.k-grid th.center-me {
    text-align: center;
}

.k-sorted {
    color: #135BAF;
}

.k-svg-i-filter {
    color:lightgray;
}

.banHeader {
    margin-top: 50px !important;
    margin-bottom: 5px !important;
}

.chartHeader {
    margin-top: 50px !important;
    margin-bottom: 10px !important;
}



/*Telerik Grid Styling*/

.k-grid th.center-wrap {
    justify-content: center;
    text-align: center;
    white-space: normal;
    vertical-align: middle;
}

.k-grid th.center-wrap .k-column-title {
    white-space: normal;
}


/*Telerik checkbox Styling*/
/*empty checkbox*/
.k-checkbox {
    height: 24px !important;
    width: 24px !important;
}

    /*checked checkbox*/
    .k-checkbox:checked {
        height:24px;
        width:24px;
        border-color: #135BAF !important;
        color: white;
        background-color: #135BAF !important;
    }

.k-treeview-item {    
    font-size:1.1rem;
    color: #135BAF;
}


/*Generate New Filters at http//isotropic.co/tool/hex-color-to-css-filter */
.svgFilterMediumBlue {
    filter: invert(20%) sepia(100%) saturate(1676%) hue-rotate(201deg) brightness(95%) contrast(88%);
}


.spinner {
    border: 12px solid silver;
    color: crimson;
    border-top: 12px solid #337AB7;
    margin-top: 10px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 700ms linear infinite;
    /*
    top: 50%;
    left: 55%;
    position: absolute;*/
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}