@charset "UTF-8";

/*@import url(jquery.countdown.css);*/
@import url(animate.css);
/*@import url(owl.carousel.css);*/
/*@import url(component2.css);*/
/*@import url(font-awesome.min.css);*/
/*@import url(bootstrap.min.css);*/
/*@import url(inputtext.css);*/

@font-face {
    font-family: Sansation Light Italic;
    src: url(Sansation_Light_Italic.woff);
}


html, body, div, span, applet, object, iframe, h1, h3, h2, h4, h5, h6, p, pre, a, abbr, acronym, address, 
big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, 
dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, 
aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  
}

strong {
  font-weight: bold; }

body {
  color: #fff;
  
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-style: normal;
  line-height: 1.5;
 
  
}

.body-overflow{
    overflow: hidden; 
}

a:hover, a:active {
  outline: 0; }

button:focus {
  border: none;
  outline: 0; }

ul {
  list-style: none; }

a {
  color: #fff;
  text-decoration: none; }

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

a:focus {
  color: #fff;
  text-decoration: none;
  outline: none; }

h1{
  color: #000;
  font-size: 80px;
  letter-spacing: -1px;
  font-weight: 600; }

h3 {
  font-size: 55px;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: -1px; }

p{
  font-size: 14px;
  font-weight: 500;
  color: #000;
  line-height: 25px; }

.force-UTF-8 {
  content: "¡"; }



/*****************************************************/
/* Main  */
/*****************************************************/


.menubar{
    background-color: #000;
    height: 100px;
}



.logo{
    width: auto;
    vertical-align: central;
    padding-top: 10px;
}
.side-left{
    z-index: 200;
    width: 50%;
    /*background: #fbf18e;*/ 
    /*background: #ffe382;*/
}

.side-left .content-wrap{
    height: 100%;
    margin: auto;
    width: 65%;
    padding: 10px;
}

.side-right{
    float: right;
    width: 49%;
    background: transparent url(../img/car-wheel.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #000;
    z-index: 0;
    opacity: 0.6;
    /*border: 1px solid #f00;*/
}
.align-center{
    overflow: hidden;
    clear: both;
    float: none;
    margin: 0 auto;
}

.content-layout{
    height: 100vh;
}
.content-wrap h3{
    color: #000;
    font-family: Sansation Light Italic;
    font-weight: bold;
    font-size: 35px;
    margin-top: 20%;
    
}

.menu-link{
    
    margin-top: 40px;
    color: #000;
    font-family: Sansation Light Italic;
    font-weight: bold;
}


.menu-link button{
    text-align: center;
    font-family: Sansation Light Italic;
    font-weight: bold;
    font-size: 15px;
    background: #fea600 !important;
    border: #f12f23 !important;
    width: 125px;
}

.menu-link button:hover{
    border: none;
}
.menu-link button:active{
    border: none;
}
.menubar button.active{
    border: none;
}

.copyright{
    /*vertical-align: bottom;*/
    color: #000;
    font-size: 10px;
    font-style: italic;
    margin-top: 45%;
}



/*for animation*/

.ngIncludeItem {
    position: absolute;
    top: 35px;
    bottom: 0;
    right: 0;
    left: 0;
    animation-duration: 0.30s;
    animation-timing-function: ease-in-out;
    -webkit-animation-duration: 0.30s;
    -webkit-animation-timing-function: ease-in-out;
}

/* When the page enters, slide it from the right */
.ngIncludeItem.ng-enter {
    animation-name: slideFromRight;
    -webkit-animation-name: slideFromRight;
}
/* When the page enters and moveToLeft is true, slide it from the left(out of the user view) to the right (left corner) */
.ngIncludeItem.moveToLeft.ng-enter {
    animation-name: slideFromLeft;
    -webkit-animation-name: slideFromLeft;
}
/* When the page leaves, slide it to left(out of the user view) from the left corner,
    in other words slide it from the left(out of the view) to the left corner but in reverse order */
.ngIncludeItem.ng-leave {
    animation-name: slideFromLeft;
    animation-direction: reverse;
    -webkit-animation-name: slideFromLeft;
    -webkit-animation-direction: reverse;
}
/* When the page leaves, slide it to the right(out of the user view) from the the left corner,
    in other words, slide it from the right but in reverse order  */
.ngIncludeItem.moveToLeft.ng-leave {
    animation-name: slideFromRight;
    animation-direction: reverse;
    -webkit-animation-name: slideFromRight;
    -webkit-animation-direction: reverse;
}


/*ng class*/

form {
    /*border: 3px solid #f1f1f1;*/ 
    background: #fff; width: 100%;
    /*margin-top: 4%;*/
    /*width: 83%;*/
    height: 100%;
}
h2{
    color: #000;
    padding: 15px 10px;
    font-size: 22px;
}

input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

button {
    background-color: #fea600;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}

button:hover {
    opacity: 0.8;
}

.container {
    padding: 35px;
    
}

span.psw {
    float: right;
    padding-top: 15px;
}
.cancelbtn {
       width: 50%;
       border-radius: 5px;
    }
/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 50%;
       border-radius: 5px;
    }
}


.animate-hide {
    border: 1px solid #f2f2f2;
 -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
  opacity:1;
  position: absolute;
  left: 0;
  width: 50%;
  top:17%;
      
}

.animate-hide.ng-hide {
  left: -100%;
  opacity:0;
  padding:0 10px;
}

.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: #000;
   color: #fff;
   text-align: center;
   height: 40px;
}

.footer p{
    color: #fff;
    padding: 5px 0 5px 0;
}

.navbar a,a:visited{
    color: #fff;
    text-decoration: none;
}

.navbar a:hover{
    color: #fea600;
    text-decoration: none;
}

.brands a:visited{
    color: #fea600;
    text-decoration: none;
}

/*****************************************************/
/* Mediaqueries */
/*****************************************************/
@media only screen and (max-width: 1710px) {
  

}
@media only screen and (max-width: 1530px) {
  

   }
@media only screen and (max-width: 1082px) {
}
@media only screen and (max-width: 973px) {
  
}
@media only screen and (max-width: 971px) {
  
}
@media only screen and (max-width: 870px) {
 }
@media only screen and (max-width: 834px) {
 }
@media only screen and (max-width: 766px) {
   }
@media only screen and (max-width: 615px) {}
@media only screen and (max-width: 438px) {}
@media only screen and (max-width: 380px) {
 .col-xs-12 {
    display: flex;
    flex-direction: column-reverse;
  }
}


.forenameandzipcode, .emailId, .telephone, .username{
    display:none;
}

.brands{
    border:1px solid #dee2e6!important;
    padding: 3px;
    margin:3px;
    float:left;
    
}
.error-message {
  color: #f12f23;
  font-size: 10px;
}

.success-message {
  color: #218838;
  font-size: 10px;
}

.error-message-heading {
  color: #f12f23;
  padding: 20px;
  margin: 5px auto;
}

.success-message-heading {
  color: #218838;
  padding: 20px;
  margin: 5px auto;
}

 .edit-link {
    text-decoration: none;
    color: #3498db;
}

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
            */
            @media 
            only screen and (max-width: 760px),
            (min-device-width: 768px) and (max-device-width: 1024px)  {

                /* Force table to not be like tables anymore */
                table, thead, tbody, th, td, tr { 
                    display: block; 
                }

                /* Hide table headers (but not display: none;, for accessibility) */
                thead tr { 
                    position: absolute;
                    top: -9999px;
                    left: -9999px;
                }

                tr { border: 1px solid #ccc; }

                td { 
                    /* Behave  like a "row" */
                    border: none;
                    border-bottom: 1px solid #eee; 
                    position: relative;
                    padding-left: 50% !important; 
                }

                .table-style  tr td:before { 
                    /* Now like a table header */
                    position: absolute;
                    /* Top/left values mimic padding */
                    top: 6px;
                    left: 6px;
                    width: 45%; 
                    padding-right: 10px; 
                    white-space: nowrap;
                }

                /*
                Label the data
                */
                #tyre_data tr td:nth-of-type(1):before { content: "OrderId"; }
                #tyre_data tr td:nth-of-type(2):before { content: "Customer Name"; }
                #tyre_data tr td:nth-of-type(3):before { content: "Fitter"; }
                #tyre_data tr td:nth-of-type(4):before { content: "Order Total"; }
                #tyre_data tr td:nth-of-type(5):before { content: "Fitting Date"; }
                #tyre_data tr td:nth-of-type(6):before { content: "Payment Method"; }
                #tyre_data tr td:nth-of-type(7):before { content: "Details"; }
                
                #list_location_data tr td:nth-of-type(1):before { content: "Location"; }
                #list_location_data tr td:nth-of-type(2):before { content: "Enabled"; }
                #list_location_data tr td:nth-of-type(3):before { content: "Edit"; }
                #list_location_data tr td:nth-of-type(4):before { content: "Delete"; }


                #list_tyre_data tr td:nth-of-type(1):before { content: "Tyre Code"; }
                #list_tyre_data tr td:nth-of-type(2):before { content: "Tyre Size"; }
                #list_tyre_data tr td:nth-of-type(3):before { content: "Brand"; }
                #list_tyre_data tr td:nth-of-type(4):before { content: "S/R"; }
                #list_tyre_data tr td:nth-of-type(5):before { content: "Supplier"; }
                #list_tyre_data tr td:nth-of-type(6):before { content: "Location"; }
                #list_tyre_data tr td:nth-of-type(7):before { content: "DustCap Stock"; }
                #list_tyre_data tr td:nth-of-type(8):before { content: "Supplier Stock"; }
                

            }
            table.dataTable tbody th, table.dataTable tbody td {
                padding: none;
            }