@import url("/VallourecTheme/Theme.VallourecTheme.css?10506");

/*HEADER*/
.header .header-top {
    transition: all 300ms ease;
    background-color: #f6f6f6;
    border-bottom: #858585 1px dashed;
}

/*MENU*/
.app-menu {
    background: linear-gradient(422deg, #009EE0, #172983, #009EE0, #c50c2a 80%, #009EE0,#172983  );
    background-size: 400% 400%;
    animation: gradientBG 40s ease infinite;
    color: #fff;
    position: fixed;
    max-width: 350px;
    width: 90%;
    height: 100%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    will-change: transform;
    z-index: 160;
    pointer-events: auto;
}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/*BODY*/
body, .content {
    background-color: #f6f6f6;
}

/*FONTS*/

@font-face {
    font-family: 'Museo';
    src: url('/VallourecAppStoreMobile/fonts/Museo300-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Museo';
    src: url('/VallourecAppStoreMobile/fonts/Museo900-Regular.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Helvetica';
    src: url('/VallourecAppStoreMobile/fonts/HelveticaNeueLTCom-Roman.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Helvetica';
    src: url('/VallourecAppStoreMobile/fonts/HelveticaNeue-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Helvetica';
    src: url('/VallourecAppStoreMobile/fonts/HelveticaNeueLTCom-Bd.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

.museoo {
    font-family: 'Museo' !important;
}
* {
     font-family: 'Helvetica', sans-serif !important;
      text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}
.icon {
    font-family: FontAwesome !important;
}

.upper{
    text-transform: uppercase;
}

/*SPLASH AND LOGIN*/
.splash-screen,
.login-screen {
    background: linear-gradient(422deg, #009EE0, #172983, #009EE0, #c50c2a 80%, #009EE0,#172983  );
    background-size: 100% 100%;
}
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
/*TITLES*/
.heading1, .heading2, .heading3, .heading4, .heading5, .heading6 {
    font-weight: 300;
     text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}

/*HEADER*/
.header {
    background-color: #fff;
}
.header-title {
    color: #3a739d;
    font-size: 18px;
    text-align: center;
    
    
        
            
    
}
.app-menu-line {
    background-color: #3a739d;
    border-radius: 2px;
    height: 2px;
    transition: all 500ms ease;
    width: 20px;
}

/*APP LIST*/
.sumary {
    color: #3e3e3e;
    font-size: 12px;
    line-height: 12px;
    font-weight: normal;
    font-family: 'Museo';
}

/*DOWNLOAD BTN HOME*/
.download-btn {
    font-size: 0.8em;
    font-weight: bold;
    text-align: left;
    color: #009de0;
     -webkit-transition: color 0.3s, font-size 0.3s;
    -moz-transition: color 0.3s, font-size 0.3s;
     -o-transition: color 0.3s, font-size 0.3s;
        transition: color 0.3s, font-size 0.3s;
}
.download-btn:hover {
    font-size: 0.8em;
    font-weight: bold;
    text-align: left;
    color: #172983;
}

/*Buttons */
.Button,
.btn {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    background-color: #009ee0;
    border-radius: 5px;
    border: none !important;
    color: #fff;
    cursor: pointer;
    display: -ms-inline-flexbox;
    display: -webkit-inline-box;
    display: inline-flex;
    font-weight: bold;
    height: 40px;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
    margin: 0;
    padding: 5px 20px;
    -webkit-transition: all 180ms linear;
            transition: all 180ms linear;
    white-space: nowrap;
    box-shadow: 0px 3px 3px 1px #009ee091;
}

.Is_Default {
    background-color: #009ee0;
    border: none;
    color: #fff;
}
.Button:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
    -webkit-filter: brightness(.95);
            filter: brightness(.95);
}

.Button:hover:active {
    box-shadow: none;
    -webkit-filter: brightness(.90);
            filter: brightness(.90);
}

.Is_Default:hover {
    -webkit-filter: brightness(.9);
            filter: brightness(.9);
}
.btn,
.btn:hover,
.btn:focus {
    color: #009ee2; /*primary-color*/
    border-radius: 50px;
    min-height: 30px;
    max-height: 30px;
    font-size: 12px;
    border-radius: 5px;
    /*background-color: #009ee0;*/
        background-image: linear-gradient(0deg, #172983, transparent);
}

/* Ripple effect 
.ripple {
  background-position: center;
  transition: background 0.8s;
}
.ripple:hover {
  background: #009ee0 radial-gradient(circle, transparent 1%, #009ee0 1%) center/15000%;
}
.ripple:active {
  background-color: #6eb9f7;
  background-size: 100%;
  transition: background 0s;
}
*/
.card {
    padding: 20px;
    border-radius: 6px;
    border: 1px solid;
    text-align: center;
    border-color: #dcdcdc;
    text-align: -webkit-center;
}
.badge-step {
    align-items: center;
    background-color: rgb(0, 158, 224);
    border-radius: 50%;
    color: rgb(255, 255, 255);
    display: flex;
    font-size: 13px;
    font-weight: bold;
    height: 30px;
    justify-content: center;
    text-align: center;
}