sopify-test-modul-fo/View/css/form.css

.facturissynctab__content * {
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    box-sizing: border-box !important;
}
  
.facturissynctab__content  {
    padding: 20px 15% !important;
}

.facturissynctab__content  form
{
    font-family: sans-serif !important;
    color: #3c3c3c !important;
}
  
.facturissynctab__content  form header {
    margin: 0 0 20px 0 !important; 
}

.facturissynctab__content form header div {
    /*font-size: 85% !important; */
    color: #999 !important;
}

.facturissynctab__content form header h2 {
    margin: 0 0 5px 0 !important;
    font-size: 18px !important;
}

.facturissynctab__content form > div {
    clear: both !important;
    overflow: hidden !important;
    padding: 4px !important;
    margin: 0 0 10px 0 !important;
}

.facturissynctab__content form > div > fieldset > div > div {
    margin: 0 0 5px 0 !important;
}

.facturissynctab__content form > div > label,
.facturissynctab__content legend {
    /*width: 25% !important;*/
    width: 31% !important;
    float: left !important;
    padding-right: 10px !important;
    font-size: 14px !important;
    position: relative !important;
    top: 5px !important;
    border-width: 0px !important;
    font-weight: 100 !important;
}

.facturissynctab__content form#order_option_form > div > label,
.facturissynctab__content form#order_option_form legend,
.facturissynctab__content form#stock_option_form > div > label,
.facturissynctab__content form#stock_option_form legend{
    top: 0px !important;
}

.facturissynctab__content form > div > div,
.facturissynctab__content form > div > fieldset > div {
    /*width: 75% !important;*/
    width: 69% !important;
    float: right !important;
}

.facturissynctab__content form > div > fieldset label {
    font-size: 90% !important;
    font-weight: 300 !important;
}

.facturissynctab__content fieldset {
    border: 0 !important;
    padding: 0 !important;
}

.facturissynctab__content input[type=text],
.facturissynctab__content input[type=email],
.facturissynctab__content input[type=url],
.facturissynctab__content input[type=password],
.facturissynctab__content select,
.facturissynctab__content textarea {
    width: 300px !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #c1c1c1 !important;
    /* padding: 7px !important; */
    padding: 3px !important;
    border-radius: 5px !important;
}

.facturissynctab__content input[type=text]:focus,
.facturissynctab__content input[type=email]:focus,
.facturissynctab__content input[type=url]:focus,
.facturissynctab__content input[type=password]:focus,
.facturissynctab__content textarea:focus {
    outline: 0 !important;
    border-color: #4697e4 !important;
}

.facturissynctab__content input[type=radio], 
.facturissynctab__content input[type=radio]+label{
    cursor: pointer !important;
}


@media (max-width: 600px) {
    .facturissynctab__content form > div {
        margin: 0 0 15px 0 !important; 
    }

    .facturissynctab__content form > div > label,
    .facturissynctab__content legend {
        width: 100% !important;
        /*float: none !important;*/
        margin: 0 0 5px 0 !important;
    }

    .facturissynctab__content form > div > div,
    .facturissynctab__content form > div > fieldset > div {
        width: 100% !important;
        float: none !important;
    }

    .facturissynctab__content input[type=text],
    .facturissynctab__content input[type=email],
    .facturissynctab__content input[type=url],
    .facturissynctab__content input[type=password],
    .facturissynctab__content textarea,
    .facturissynctab__content select {
        width: 100% !important; 
    }
}
@media (min-width: 1200px) {
    .facturissynctab__content form > div > label,
    .facturissynctab__content  legend {
        text-align: right !important;
    }
}

.facturissynctab__content .greenButton {
    box-shadow:inset 0px 1px 0px 0px #a4e271 !important;
    background:linear-gradient(to bottom, #89c403 5%, #77a809 100%) !important;
    background-color:#89c403 !important;
    border-radius:6px !important;
    border:1px solid #74b807 !important;
    display:inline-block !important;
    cursor:pointer !important;
    color:#ffffff !important;
    font-family:Arial !important;
    font-size:15px !important;
    font-weight:bold !important;
    padding:9px 24px !important;
    text-decoration:none !important;
    text-shadow:0px 1px 0px #528009 !important;
}

.facturissynctab__content .greenButton:hover {
    background:linear-gradient(to bottom, #77a809 5%, #89c403 100%) !important;
    background-color:#77a809 !important;
}

.facturissynctab__content .greenButton:active {
    position:relative !important;
    top:1px !important;
}

.facturissynctab__content .blueButton {
    box-shadow:inset 0px 1px 0px 0px #97c4fe !important;
    background:linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%) !important;
    background-color:#3d94f6 !important;
    border-radius:6px !important;
    border:1px solid #337fed !important;
    display:inline-block !important;
    cursor:pointer !important;
    color:#ffffff !important;
    font-family:Arial !important;
    font-size:15px !important;
    /*font-weight:bold !important;*/
    padding:9px 24px !important;
    text-decoration:none !important;
    /*text-shadow:0px 1px 0px #1570cd !important;*/
}

.facturissynctab__content .blueButton:hover {
    background:linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%) !important;
    background-color:#1e62d0 !important;
}

.facturissynctab__content .blueButton:active {
    position:relative !important;
    top:1px !important;
}

.facturissynctab__content .center
{
    text-align: center !important;
}

.facturissynctab__content .red
{
    color: red !important;
    padding: 6px !important;
}

.facturissynctab__content .hide
{
    display: none;
}

.btn {
    display: inline-block;
    padding: 6px 12px !important;
    margin-bottom: 0 !important;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1.428571429 !important;
    text-align: center !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    background-image: none !important;
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    -o-user-select: none !important;
    user-select: none !important;
    text-decoration:none !important;
}

.btn-blue { 
    color: #ffffff !important; 
    background-color: #337FED !important; 
    border-color: #1570cd !important; 
} 

.btn-blue:hover, 
.btn-blue:focus, 
.btn-blue:active, 
.btn-blue.active, 
.open .dropdown-toggle.btn-blue { 
    color: #ffffff !important; 
    background-color: #1570CD !important; 
    border-color: #1570cd !important; 
} 

.btn-blue:active, 
.btn-blue.active, 
.open .dropdown-toggle.btn-blue { 
    background-image: none !important; 
} 

.btn-blue.disabled, 
.btn-blue[disabled], 
fieldset[disabled] .btn-blue, 
.btn-blue.disabled:hover, 
.btn-blue[disabled]:hover, 
fieldset[disabled] .btn-blue:hover, 
.btn-blue.disabled:focus, 
.btn-blue[disabled]:focus, 
fieldset[disabled] .btn-blue:focus, 
.btn-blue.disabled:active, 
.btn-blue[disabled]:active, 
fieldset[disabled] .btn-blue:active, 
.btn-blue.disabled.active, 
.btn-blue[disabled].active, 
fieldset[disabled] .btn-blue.active { 
    background-color: #337FED !important; 
    border-color: #1570cd !important; 
} 

.btn-blue .badge { 
    color: #337FED !important; 
    background-color: #ffffff !important; 
}

.btn-green { 
    color: #ffffff !important; 
    background-color: #74B807 !important; 
    border-color: #528009 !important; 
} 

.btn-green:hover, 
.btn-green:focus, 
.btn-green:active, 
.btn-green.active, 
.open .dropdown-toggle.btn-green { 
    color: #ffffff !important; 
    background-color: #528009 !important; 
    border-color: #528009 !important; 
} 

.btn-green:active, 
.btn-green.active, 
.open .dropdown-toggle.btn-green { 
    background-image: none !important; 
} 

.btn-green.disabled, 
.btn-green[disabled], 
fieldset[disabled] .btn-green, 
.btn-green.disabled:hover, 
.btn-green[disabled]:hover, 
fieldset[disabled] .btn-green:hover, 
.btn-green.disabled:focus, 
.btn-green[disabled]:focus, 
fieldset[disabled] .btn-green:focus, 
.btn-green.disabled:active, 
.btn-green[disabled]:active, 
fieldset[disabled] .btn-green:active, 
.btn-green.disabled.active, 
.btn-green[disabled].active, 
fieldset[disabled] .btn-green.active { 
    background-color: #74B807 !important; 
    border-color: #528009 !important; 
} 

.btn-green .badge { 
    color: #74B807 !important; 
    background-color: #ffffff !important; 
}

.btn-light-blue { 
    color: #ffffff !important; 
    background-color: #84BBF3 !important; 
    border-color: #528ECC !important; 
  } 
   
  .btn-light-blue:hover, 
  .btn-light-blue:focus, 
  .btn-light-blue:active, 
  .btn-light-blue.active, 
  .open .dropdown-toggle.btn-light-blue { 
    color: #ffffff !important; 
    background-color: #528ECC !important; 
    border-color: #528ECC !important; 
  } 
   
  .btn-light-blue:active, 
  .btn-light-blue.active, 
  .open .dropdown-toggle.btn-light-blue { 
    background-image: none !important; 
  } 
   
  .btn-light-blue.disabled, 
  .btn-light-blue[disabled], 
  fieldset[disabled] .btn-light-blue, 
  .btn-light-blue.disabled:hover, 
  .btn-light-blue[disabled]:hover, 
  fieldset[disabled] .btn-light-blue:hover, 
  .btn-light-blue.disabled:focus, 
  .btn-light-blue[disabled]:focus, 
  fieldset[disabled] .btn-light-blue:focus, 
  .btn-light-blue.disabled:active, 
  .btn-light-blue[disabled]:active, 
  fieldset[disabled] .btn-light-blue:active, 
  .btn-light-blue.disabled.active, 
  .btn-light-blue[disabled].active, 
  fieldset[disabled] .btn-light-blue.active { 
    background-color: #84BBF3 !important; 
    border-color: #528ECC !important; 
  } 
   
  .btn-light-blue .badge { 
    color: #84BBF3 !important; 
    background-color: #ffffff !important; 
  }