/*!
// silveracorn.nz MXUI website - Version MX_2.2.4 - 21-Sep-2021
// MX version 3086
// Note:- Modfied from Original !!
 * BLOCKS - Responsive Dashboard Theme
 *
 * Hey! Thanks for download this theme!
 * This bootstrap theme is totally free. You can edit, share, distribute, use and whatever you want.
 * Credits are always appreciated.
 * Please, feel free to contact me if you have any questions regarding this theme.
 *
 *
 * Copyright 2013 
 * Created by: Carlos Alvarez
 * URL: http://Alvarez.is
 * Designed and built based on Twitter Bootstrap.


A hexadecimal color is specified with: #RRGGBB  (Upper or lower case)

RR (red), GG (green) and BB (blue) are hexadecimal integers between 00 and FF specifying the intensity of the color.

For example, #0000FF is displayed as blue, because the blue component is set to its highest value (FF) and the others are set to 00.
Shades of gray are often defined using equal values for all the 3 light sources:
#000000; Black
#808080; Gray
#FFFFFF; White

https://www.w3schools.com/colors/colors_picker.asp
*/

/* COLOR REFERENCE
- #1f1f1f (Background Color)
- #3d3d3d (Dash-unit and half-unit Section) 
- #262626 (Footer) 
- #fa1d2d (Red - Used in selectors, paragraphs, bars and other) 
- #b2c831 (Green - Used in titles, badges, bars and other) 
- #bdbdbd & #fff (Font colors)
*/


/**********BASE CONFIGURATIONS**********/   
body {
    background:#1f1f1f; /* 12% Black*/
   font-family: Verdana, Helvetica, sans-serif;
}

h1 {
   font-family: Verdana, Helvetica, sans-serif;
}

h3,h4 , h5 {
   font-family: Verdana, Helvetica, sans-serif;
    font-weight:lighter;
}

h2{
    font-size:22px;
}

h3 {
    font-size:46px;
    /*color:#b2c831*/
    color:#3399ff; /* 60% Blue */
}

h5 {
    color:#3399ff; /* 60% Blue */
    margin-left:5px;
}

/***********BLOCKS & WRAPS***********/

/*--- Dash Unit / Used in Dashboard page ---*/
.dash-unit {
    margin-bottom: 10px;
    padding-left:0px;
    padding-right:0px;
    padding-bottom:0px;
    border: 1px solid #383737; /* 22% Black */
    background-image:url('../img/sep-half.png');
    background-color: #3d3d3d; /* 24% Black */
    color:white;
    height:290px;
}

.dash-unit:hover {
    background-color: #4f4f4f; /* 31% Black */
/*    -moz-box-shadow:    3px 3px 2px 0px #151515;
    -webkit-box-shadow: 3px 3px 2px 0px #151515; */
    box-shadow:         3px 3px 2px 0px #151515; /* 8% Black */

}

.dash-unit .dtitle {
    font-size:11px;
    text-transform:uppercase;
    color:#ffffff; /* 100% White */
    margin:0px;
    padding:0px;
    height:inherit
}

.dash-unit hr {
    border: 0;
    border-top: 1px solid #151515; /* 8% Black */
    border-top-style: dashed;
    margin-top:3px;
}

.dash-unit h1 {
    font-family: sans-serif;
    font-weight:300;
    font-size: 20px;
    line-height: 2px;
    letter-spacing: 0px;
    color: #ffffff; /* 100% White */
    padding-top:10px;
    padding-left:5px;
    margin-top:2px;
    text-align:center;
}

.dash-unit h2 {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 30px;
    line-height: 26px;
    letter-spacing: 0px;
    color: #ffffff; /* 100% White */
    padding-top:10px;
    padding-left:5px;
    margin-top:2px;
    text-align:center;
}

.dash-unit h3 {
    font-weight:300;
    font-size: 15px;
    line-height: 2px;
    letter-spacing: 0px;
    color: #3399ff; /* 60% Blue */
    padding-top:10px;
    padding-left:5px;
    margin-top:2px;
    text-align:center;
}

.dash-unit p {
    font-size: 14px;
    font-weight: 200;
    line-height: 16px;
    color: inherit;
    margin: 0 0 10px;
    padding:5px;
}

.dash-unit h4 {
    padding-left:5px;
    margin-top:2px;
    font-size: 13px;
    font-weight:lighter;
    line-height: 1;
    letter-spacing: 0px;
    color: #fff; /* 100% White */
}

.dash-unit .bold{
    font-family: sans-serif;
    font-size:26px;
    font-weight:bold;
    color:#fff; /* 100% White */
    vertical-align:middle;
}


/**********Half-Unit / Used in index.html**********/   
.half-unit {
    margin-bottom: 10px; /* was 30 BCJKiwi */
    padding-bottom: 4px;
    border: 1px solid #383737; /* 22% Black */
    background-image:url('../img/sep-half.png');
    background-color: #3d3d3d; /* 24% Black */
    color:white;
    max-height:auto;
}

.half-unit:hover {
    background-color: #3d3d3d;
    /* -moz-box-shadow:    3px 3px 2px 0px #151515; /* 8% Black */
    -webkit-box-shadow: 3px 3px 2px 0px #151515; */
    box-shadow:         3px 3px 2px 0px #151515; /* 8% Black */

}

.half-unit .dtitle {
    font-size:20px;
    text-transform:uppercase;
    color:#ffffff; /* 100% White */
    margin:8px;
    padding:0px;
    height:inherit
}

.half-unit hr {
    border: 0;
    border-top: 1px solid #151515; /* 8% Black */
    border-top-style: dashed;
    margin-top:3px;
}

.half-unit h1 {
    font-family: sans-serif;
    font-weight:300;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0px;
    color: #ffffff; /* 100% White */
    padding-top:10px;
    padding-left:5px;
    margin-top:2px;
    text-align:center;
}

.half-unit h4 {
    padding-left:5px;
    margin-top:2px;
    font-size: 13px;
    font-weight:lighter;
    line-height: 1;
    letter-spacing: 0px;
    color: #fff; /* 100% White */
}

.half-unit .bold{
    font-family: sans-serif;
    font-size:26px;
    font-weight:bold;
    color:#fff; /* 100% White */
    vertical-align:middle;
}

/**********Styling Elements**********/   
.cont {
    text-align:center;
    margin-top:20px;
}

.cont .low {
    color:#3399ff;
}

.cont .high {
    color:#fa1d2d;
}

.cont2 {
    text-align:center;
    margin-top:-15px;
    font-size:12px;
    line-height:7px;
}

.cont2 .bold{
    font-size:10px;
    font-weight:bold;
    color:#3399ff;
}

.text p {
    font-family:  sans-serif;
    margin-left:8px;
    font-size:14px;
    line-height:18px;
}

.text .grey {
    font-size:11px;
    color:silver
}


/***********Bootstrap Default Modifications***********/

.thumbnail {
    border:0px;
    text-align:center;
    /* -webkit-box-shadow: 0px;
    -moz-box-shadow: 0px; */
    box-shadow: 0px;
    background: none;
    text-align: center;      

}

.modal-header {
    background-image:url('../img/sep-half.png');
    background-color: #4f4f4f;
    color:#fff; /* 100% White */
}


input[type=submit] {
    font-family: sans-serif;
    font-size: 15px;
    background: #3399ff;
    color: #fff; /* 100% White */
    border: none;
    padding: 8px 28px 10px 26px;
    /* *-webkit-border-radius: 4px;
    -moz-border-radius: 4px; */
    border-radius: 4px;

}
textarea {
    background: #cdcbcc;
    font-size: 13px;
    display: block;
    width: 100%;
    border: none;
    box-shadow: none;
    height: 30px;
    line-height: 18px;
    padding: 0;
    text-indent: 18px;
    margin: 0 0 18px;
}
textarea {
    line-height: 18px;
    padding: 18px;
    width: 100%;
    text-indent: 0;	
}
.textarea-container { margin: 0 18px; }
.textarea-container textarea { margin-left: -18px; }
#contact textarea { width: 100%; height: 45px; }


.progress-bar {
    background-color: #3399ff;
}

/***********LineIcons Styles***********/

.info-user {
    text-align:center;
    font-size: 24px;
    color: #3399ff;
}

.fs1 {
    padding:5px 5px 5px 5px;
    position:relative;
}

.fs1:hover {
    position:relative;
    color: #fff; /* 100% White */
    cursor:pointer
}

.fs2 {
    padding:5px 5px 5px 5px;
    position:relative;
    font-size:35px;
    vertical-align: text-bottom
}

/**********Clock Configuration**********/   

.digiclock {
    font-size: 30px;
    color: #fff; /* 100% White */
    text-align: center;
    line-height: 60px;
    margin-left: auto	
}

.clockcenter {
    text-align:center;
}


/**********Mail Style Configuration**********/   

.framemail {
    cursor: default;
}
.framemail .window {
    font-size: 0;
    margin-top: -1px;
    overflow: hidden;
    margin-left: -18px;
}
.framemail .window .mail li {
    background-color:#3d3d3d;
    /* background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
    background-image:    -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
    background-image:     -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
    background-image:      -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05)); */
    background-image:         linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
    border-top: 1px solid #888;
    position: relative;
    margin-left:-18px;
}
.framemail .window .mail li:first-child {
    border-top: none;
}
.framemail .window .mail li:hover {
    background-color: #5d5b5b;
}
.framemail .window .mail li:after,
.framemail .window .mail li:before {
    border-left: 8px solid transparent;
    border-top: 8px solid #df6;
    content: '';
    height: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
}
.framemail .window .mail li:before {
    border-top-color: #bbb;
    border-width: 9px;
}
.framemail .window .mail li:nth-child(1):after,
.framemail .window .mail li:nth-child(1):before {
    border: none;
}
.framemail .window .mail li:nth-child(2):after {
    border-top-color: #fa1d2d;
}
.framemail .window .mail li i {
    display: inline-block;
    height: 48px;
    width: 6px;
}
.framemail .window .mail li .read {
    background-color: #ddd;
}
.framemail .window .mail li .unread {
    background: #3399ff;
}
.framemail .window .mail li img {
    background: #819da2;
    border-radius: 2px;
    height: 36px;
    left: 12px;
    position: absolute;
    top: 6px;
    width: 36px;
}
.framemail .window .mail li p {
    font: 13px/24px sans-serif;
    left: 56px;
    position: absolute;
    top: 3px;
}
.framemail .window .mail li .sender {
    color: #e9e8e8;
    font-weight: bold;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
}
.framemail .window .mail li .message {
    color: #999;
    overflow: hidden;  
    text-overflow: ellipsis;
    top: 21px;  
    white-space: nowrap;
}
.framemail .window .mail li .message strong {
    color: #999;
}
.framemail .window .mail li .actions {
    height: 16px;
    position: absolute;
    right: 19px;
    text-align: right;
    top: 0;
    width: 96px;
}
.framemail .window .mail li .actions img {
    background: none;
    display: inline-block;
    height: 16px;
    margin-left: 6px;
    opacity: .1;
    position: relative;
    width: 16px;
}
.framemail .window .mail li:hover .actions img {
    opacity: .25;
}
.framemail .window .mail li .actions img:hover {
    opacity: .75;
}


/**********DONUT CHARTS STYLES**********/
#load {
    width: 11.313em;
    height: 11.313em;
    /* -moz-border-radius: 5px; */
    border-radius: 5px;
    margin-bottom: 1.063em;
    background-position: center center;
    margin:auto;
}

#space {
    width: 11.313em;
    height: 11.313em;
    /* -moz-border-radius: 5px; */
    border-radius: 5px;
    margin-bottom: 1.063em;
    background-position: center center;
    margin:auto;
}


/**********LINE AND BARS**********/

.section-graph {
    position: relative;
    height: 130px;
    color: #fff; /* 100% White */
    background-image: linear-gradient(color-stops(#3399ff, #3399ff 50%, #3399ff 50%));
    margin-bottom:20px;
}
.section-graph .graph-info {
    z-index: 99;
    position: absolute;
    font-weight: bold;
    margin-top: 12px;
    margin-left: 21px;
    width: 100px;
}
.section-graph .graph-info .graph-arrow {
    width: 0;
    height: 0;
    margin-top: 18px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid white;
    float: left;
}
.section-graph .graph-info .graph-info-big {
    font-size: 24px;
    float: left;
    margin-left: 3px;
}
.section-graph .graph-info .graph-info-small {
    margin-left: 3px;
    font-size: 12px;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.5);
    clear: left;
    margin-left: 8px;
}
/*
 * Info Section
 */
.info-aapl {
    text-align: center;

}
.info-aapl ul {
    margin-left:30%;

}
.info-aapl li {
    margin: 0;
    display: block;
    width: 9px;
    height: 40px;
    margin-right: 6px;
    background-color: #f5f0ec;
    float:left;
    position: relative;
}
.info-aapl li span {
    display: block;
    width: 9px;
    height: 40px;
    position: absolute;
    bottom: 0;
}
.info-aapl li span.orange {
    background-color: #fa1d2d;
}
.info-aapl li span.green {
    background-color: #b2c831;
}

/**********TWITTER WIDGET **********/
#jstwitter ul li{
    color:#bdbdbd;
    padding:.5em .75em;
}

#jstwitter ul{
    margin-left:0;
    list-style:none
}

#jstwitter:first-child{
    border-top:0
}

ul#jstwitter li a{
    font-size:10px;
    font-style:italic;
    color:#666;
    text-decoration:none
}

/********** CUSTOMIZED BUTTON **********/
.btnnew {
    display: inline-block;
    *border-left: 0 none #707070;
    border-right: 0 none #707070;
    border-top: 0 none #707070;
    border-bottom: 0 none #707070;
    display: inline;
    padding: 4px 12px;
    margin-bottom: 0;
    *margin-left: .3em;
    font-size: 14px;
    line-height: 20px;
    color: #3399ff;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-color: #5a5a5a;
    *background-color: #5a5a5a;
    background-repeat: repeat-x;
    /* *-webkit-border-radius: 4px;
    -moz-border-radius: 4px; */
    border-radius: 4px;
    zoom: 1;
    /* -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    background-image: linear-gradient(to bottom, #707070, #707070);
}

/********** SWITCH BUTTON **********/
.switch {
    position: relative;
    margin: 20px auto;
    height: 26px;
    width: 120px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 3px;
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}

.switch-label {
    position: relative;
    z-index: 2;
    float: left;
    width: 58px;
    line-height: 16px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
    cursor: pointer;
}
.switch-label:active {
    font-weight: bold;
}

.switch-label-off {
    padding-left: 2px;
}

.switch-label-on {
    padding-right: 2px;
}

/*
 * Note: using adjacent or general sibling selectors combined with
 *       pseudo classes doesn't work in Safari 5.0 and Chrome 12.
 *       See this article for more info and a potential fix:
 *       http://css-tricks.com/webkit-sibling-bug/
 */
.switch-input {
    display: none;
}
.switch-input:checked + .switch-label {
    font-weight: bold;
    color: rgba(0, 0, 0, 0.65);
    text-shadow: 0 1px rgba(255, 255, 255, 0.25);
    /* -webkit-transition: 0.15s ease-out;
    -moz-transition: 0.15s ease-out;
    -o-transition: 0.15s ease-out; */
    transition: 0.15s ease-out;
}
.switch-input:checked + .switch-label-on ~ .switch-selection {
    left: 60px;
    /* Note: left: 50% doesn't transition in WebKit */
}

.switch-selection {
    display: block;
    position: absolute;
    z-index: 1;
    top: 2px;
    left: 2px;
    width: 58px;
    height: 22px;
    background: #3399ff;
    border-radius: 3px;
    /* background-image: -webkit-linear-gradient(top, #b6c753, #3399ff);
    background-image: -moz-linear-gradient(top, #b6c753, #3399ff);
    background-image: -o-linear-gradient(top, #b6c753, #3399ff); */
    background-image: linear-gradient(to bottom, #b6c753, #3399ff);
    /* -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); */
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
    /* -webkit-transition: left 0.15s ease-out;
    -moz-transition: left 0.15s ease-out;
    -o-transition: left 0.15s ease-out; */
    transition: left 0.15s ease-out;
}
.switch-blue .switch-selection {
    background: #3aa2d0;
    /* background-image: -webkit-linear-gradient(top, #4fc9ee, #3aa2d0);
    background-image: -moz-linear-gradient(top, #4fc9ee, #3aa2d0);
    background-image: -o-linear-gradient(top, #4fc9ee, #3aa2d0); */
    background-image: linear-gradient(to bottom, #4fc9ee, #3aa2d0);
}
.switch-yellow .switch-selection {
    background: #fa1d2d;
    /* background-image: -webkit-linear-gradient(top, #f93e4b, #fa1d2d);
    background-image: -moz-linear-gradient(top, #f93e4b, #fa1d2d);
    background-image: -o-linear-gradient(top, #f93e4b, #fa1d2d); */
    background-image: linear-gradient(to bottom, #f93e4b, #fa1d2d);
}


/**********Gauge Chart**********/   
#canvas {
    display: block;
    width: 150px;
    margin: 30px auto;
}

/**********Accordion Styling**********/   

.accordion-group {
    border: 1px solid #222;
}
.accordion-heading {
    background-color: #5a5a5a;
    *background-color: #5a5a5a;
    background-repeat: repeat-x;
    *-webkit-border-radius: 4px;
    /* -moz-border-radius: 4px; */
    border-radius: 4px;
    zoom: 1;
    /* -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    background-image: linear-gradient(to bottom, #707070, #707070);
}

/**********Link Styling**********/   
a {
    color: #3399ff;
    text-decoration: none;
}

a:hover {
    color: #dff948;
    text-decoration: none;
}



/**********FooterWrap Section**********/   
#footerwrap {
    width: 100%;
    background:#262626;
    background-image:url('../img/sep-half.png');
    padding-top:10px;
    padding-bottom: 10px;
    border-top-style: solid;
    border-top-width:8px;
    border-top-color:#1d1d1d;
    text-align:center

}

#footerwrap p {
    color:white;
    font-size:12px;
} 


/***********FULLCALENDAR STYLE***********/

#external-events {
    padding: 0 10px;
    border: 1px solid #8b8b8a;
    background-color: #8b8b8a;
    /* -webkit-border-radius: 4px;
    -moz-border-radius: 4px; */
    border-radius: 4px;
    text-align: left;
}

#external-events h4 {
    font-size: 16px;
    margin-top: 0;
    padding-top: 1em;
}

.external-event { /* try to mimic the look of a real event */
    margin: 10px 0;
    padding: 2px 4px;
    background: #b2c831;
    color: #fff;
    font-size: .85em;
    cursor: pointer;
}

#external-events p {
    margin: 1.5em 0;
    font-size: 11px;
    color: #b2c831;
}

#external-events p input {
    margin: 0;
    vertical-align: middle;
}

#calendar {
    width:100%;
}


/**********Media Styles**********/   

@media (max-width: 360px){
    /*Calendar Adjustments*/
    .fc-header {margin-top:15px;}
    .fc-header-title h2{font-size:10px; }
    .fc-header-right {display:none}
}

/* portrait tablet */
@media (min-width: 767px) and (max-width: 768px) {
    .info-aapl ul {
        margin-left:10px;
        float:left;
    }

    #load {
        margin-left:5px;
        margin-right:10px;
    }

    #space {
        margin-left:5px;
        margin-right:10px;
    }

}

/* Landscape iphone 5 and samsung galaxy */
@media (min-width: 560px) and (max-width: 685px) {
    .info-aapl ul {
        margin-left:40%;
    }  
}