@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic,400italic,600italic&subset=latin,latin-ext);
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");

/*View port for mobile devices on IE Mobile*/
@-ms-viewport {
    width: auto!important;
}



body {
    background-color: #fcfbfb;
    padding: 0px;
    margin: 0px;
    font-family: Helvetica,Arial,sans-serif;
    color: #373b3d;
    font-size: 12px;
    min-width: 300px;
    -moz-outline: 0;
    -webkit-outline: 0;
    outline: 0; /*Evita que salgan los puntitos en el rectangulo de seleccion cuando le das click*/
    overflow-y: scroll;
}

a {
    color: #488dd8;
    text-decoration: none;
}

    a:hover, a:focus {
        color: #529DCB;
        text-decoration: underline;
    }


/*This is to set the pointer to each anchor that has the angularJS data-target attr. Also it disables the text selection*/
[data-target] {
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*To show a loading indicator on iframes*/
iframe {
    background-image: url("/_StaticContent_/Images/Public/ajax-loader.gif");
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 15px;
}

/* --------------------------- Icomoon (Personalized glyps/font icons) -------------------------- */





@font-face {
    font-family: 'icomoon';
    src: url('/_StaticContent_/Css/Icomoon/icomoon.eot?-xxiskr');
    src: url('/_StaticContent_/Css/Icomoon/icomoon.eot?#iefix-xxiskr') format('embedded-opentype'), url('/_StaticContent_/Css/Icomoon/icomoon.woff?-xxiskr') format('woff'), url('/_StaticContent_/Css/Icomoon/icomoon.ttf?-xxiskr') format('truetype'), url('/_StaticContent_/Css/Icomoon/icomoon.svg?-xxiskr#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-glyps_firewallIcon:before {
    content: "\e600";
}

.icon-glyps_routerIcon:before {
    content: "\e601";
}

.icon-glyps_switchIcon:before {
    content: "\e602";
}












/* --------------------------- Selection color -------------------------- */
::selection {
    background: #488dd8; /* Safari */
    color: white;
}

::-moz-selection {
    background: #488dd8; /* Firefox */
    color: white;
}

._clear {
    clear: left;
}

.hidden {
    display: none;
}

.AlignLeft {
    text-align: left;
}

.AlignCenter {
    text-align: center;
}

.AlignRight {
    text-align: right;
}

.bold {
    font-weight:bold;
}

/* --------------------------- just colors to be used -------------------------- */
.colorGray, .colorGray > a, .colorGray > span, .colorGray > i, .colorGray > b {
    color: #676767;
}

.colorLightGray, .colorLightGray > a, .colorLightGray > span, .colorLightGray > i, .colorLightGray > b {
    color: #9F9F9F;
}

.colorOrange, .colorOrange > a, .colorOrange > span, .colorOrange > i, .colorOrange > b {
    color: #F58126;
}

.colorRed, .colorRed > a, .colorRed > span, .colorRed > i, .colorRed > b {
    color: #FF4729;
}

.colorBlue, .colorBlue > a, .colorBlue > span, .colorBlue > i, .colorBlue > b {
    color: #488dd8;
}

.colorGreen, .colorGreen > a, .colorGreen > span, .colorGreen > i, .colorGreen > b {
    color: #71b53b;
}

.colorLightBlue, .colorLightBlue > a, .colorLightBlue > span, .colorLightBlue > i, .colorLightBlue > b {
    color: #529DCB;
}


.validationColorRed {
    color: #DB8A8A;
}





/* --------------------------- Prevent the browser selection dots box around an anchor, for example -------------------------- */

.disable-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/* --------------------------- headings -------------------------- */

h1 {
    font-family: 'Source Sans Pro', sans-serif;
    color: #DE992B;
    font-size: 33pt;
    margin: 0px;
    font-weight: 300;
}

h2 {
    font-family: 'Source Sans Pro', sans-serif;
    color: #DE992B;
    font-size: 25pt;
    margin: 0px;
    font-weight: 300;
}

h3 {
    font-family: 'Source Sans Pro', sans-serif;
    color: #DE992B;
    font-size: 20pt;
    margin: 0px;
    font-weight: 300;
}

h4 {
    font-family: 'Source Sans Pro', sans-serif;
    color: #DE992B;
    font-size: 15pt;
    margin: 0px;
    font-weight: 300;
}

/* --------------------------- To use with bootstrap Panels (Used in login pages and/or others) -------------------------- */

.PanelsContainer {
    width: 100%;
    text-align: center;
}

    .PanelsContainer .panel {
        display: inline-block;
        text-align: left;
    }





/* --------------------------- Just dividers -------------------------- */
.verticalDivider {
    background-color: #C7C6BB;
    -moz-box-shadow: 1px 0 0 #FFFFFF;
    -webkit-box-shadow: 1px 0 0 #FFFFFF;
    box-shadow: 1px 0 0 #FFFFFF;
    height: 350px;
    margin: 35px auto 0;
    position: relative;
    width: 1px;
}

.horizontallDivider {
    background-color: #C7C6BB;
    -moz-box-shadow: 1px 0 0 #FFFFFF;
    -webkit-box-shadow: 1px 0 0 #FFFFFF;
    box-shadow: 1px 0 0 #FFFFFF;
    height: 1px;
    margin: 35px auto 0;
    position: relative;
    width: 100%;
}







/* --------------------------------- Loading animation ---------------------------------- */

.loadingIndicator {
    background-color: rgba(255, 255, 255, 0.98);
    height: 100%;
    left: 0;
    padding-top: 250px;
    position: fixed;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 100000;
}

.loadingIndicator2 {
  background-color: #fefefe;
  border: 1px solid #d5d4d4;
  left: 45%;
  padding: 8px 25px;
  position: fixed;
  text-align: center;
  top: 43px;
  z-index: 10000;
}

    /* --------- Little animation CSS code --------- */

    .loadingIndicator2 .spinner {
        float: left;
        width: 75px;
    }

    .loadingIndicator2 h4 {
        float: left;
        font-size: 12pt;
        white-space: nowrap;
    }

/* --------- animation CSS code --------- */
.spinner {
    height: 27px;
    margin: 0 auto;
    position: relative;
    text-align: center;
    width: 100px;
    -webkit-animation: rotate 2.0s infinite linear;
    -moz-animation: rotate 2.0s infinite linear;
    -o-animation: rotate 2.0s infinite linear;
    animation: rotate 2.0s infinite linear;
}

    .spinner > div {
        width: 18px;
        height: 18px;
        background-color: rgba(59, 112, 149, 0.80);
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        border-radius: 100%;
        display: inline-block;
        margin-right: 2px;
        -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
        -moz-animation: bouncedelay 1.4s infinite ease-in-out;
        -o-animation: bouncedelay 1.4s infinite ease-in-out;
        animation: bouncedelay 1.4s infinite ease-in-out;
        /* Prevent first frame from flickering when animation starts */
        -webkit-animation-fill-mode: both;
        -o-animation-fill-mode: both;
        -moz-animation-fill-mode: both;
        animation-fill-mode: both;
    }

    .spinner .bounce1 {
        -webkit-animation-delay: -0.32s;
        -moz-animation-delay: -0.32s;
        -o-animation-delay: -0.32s;
        animation-delay: -0.32s;
    }

    .spinner .bounce2 {
        -webkit-animation-delay: -0.16s;
        -moz-animation-delay: -0.16s;
        -o-animation-delay: -0.16s;
        animation-delay: -0.16s;
    }

@-moz-keyframes bouncedelay {
    0%, 80%, 100% {
        -moz-transform: scale(0.0);
        -ms-transform: scale(0.0);
        -webkit-transform: scale(0.0);
        -o-transform: scale(0.0);
        transform: scale(0.0);
    }

    40% {
        -moz-transform: scale(1.0);
        -ms-transform: scale(1.0);
        -webkit-transform: scale(1.0);
        -o-transform: scale(1.0);
        transform: scale(1.0);
    }
}

@-webkit-keyframes bouncedelay {
    0%, 80%, 100% {
        -moz-transform: scale(0.0);
        -ms-transform: scale(0.0);
        -webkit-transform: scale(0.0);
        -o-transform: scale(0.0);
        transform: scale(0.0);
    }

    40% {
        -moz-transform: scale(1.0);
        -ms-transform: scale(1.0);
        -o-transform: scale(1.0);
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}


@keyframes bouncedelay {
    0%, 80%, 100% {
        -moz-transform: scale(0.0);
        -ms-transform: scale(0.0);
        -webkit-transform: scale(0.0);
        -o-transform: scale(0.0);
        transform: scale(0.0);
    }

    40% {
        -moz-transform: scale(1.0);
        -ms-transform: scale(1.0);
        -o-transform: scale(1.0);
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}


/* --------------------------------- End Loading animation ---------------------------------- */





/*Hides the input type number arrows*/
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
}