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

.facturissynctab-wrap {
    border-radius: 6px !important;
    max-width: 100% !important;
    display: -webkit-box !important;
    display: flex !important;
    flex-wrap: wrap !important;
    position: relative !important;
    list-style: none !important;
    background-color: #fff !important;
    /*margin: 40px 0 !important;*/
    margin: 10px 0 40px !important;
    border-color: #c2c2c2 !important;
    border-width: 1px !important;
    border-style: solid !important;
}

.facturissynctab {
    display: none !important;
}

.facturissynctab:checked:nth-of-type(1) ~ .facturissynctab__content:nth-of-type(1) {
    opacity: 1 !important;
    -webkit-transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease !important;
    transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease !important;
    transition: 0.5s opacity ease-in, 0.8s transform ease !important;
    transition: 0.5s opacity ease-in, 0.8s transform ease, 0.8s -webkit-transform ease !important;
    position: relative !important;
    top: 0 !important;
    z-index: 100 !important;
    -webkit-transform: translateY(0px) !important;
            transform: translateY(0px) !important;
    text-shadow: 0 0 0 !important;
}

.facturissynctab:checked:nth-of-type(2) ~ .facturissynctab__content:nth-of-type(2) {
    opacity: 1 !important;
    -webkit-transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease !important;
    transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease !important;
    transition: 0.5s opacity ease-in, 0.8s transform ease !important;
    transition: 0.5s opacity ease-in, 0.8s transform ease, 0.8s -webkit-transform ease !important;
    position: relative !important;
    top: 0 !important;
    z-index: 100 !important;
    -webkit-transform: translateY(0px) !important;
            transform: translateY(0px) !important;
    text-shadow: 0 0 0 !important;
}

.facturissynctab:checked:nth-of-type(3) ~ .facturissynctab__content:nth-of-type(3) {
    opacity: 1 !important;
    -webkit-transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease !important;
    transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease !important;
    transition: 0.5s opacity ease-in, 0.8s transform ease !important;
    transition: 0.5s opacity ease-in, 0.8s transform ease, 0.8s -webkit-transform ease !important;
    position: relative !important;
    top: 0 !important;
    z-index: 100 !important;
    -webkit-transform: translateY(0px) !important;
            transform: translateY(0px) !important;
    text-shadow: 0 0 0 !important;
}

.facturissynctab:checked:nth-of-type(4) ~ .facturissynctab__content:nth-of-type(4) {
    opacity: 1 !important;
    -webkit-transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease !important;
    transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease !important;
    transition: 0.5s opacity ease-in, 0.8s transform ease !important;
    transition: 0.5s opacity ease-in, 0.8s transform ease, 0.8s -webkit-transform ease !important;
    position: relative !important;
    top: 0 !important;
    z-index: 100 !important;
    -webkit-transform: translateY(0px) !important;
            transform: translateY(0px) !important;
    text-shadow: 0 0 0 !important;
}

.facturissynctab:checked:nth-of-type(5) ~ .facturissynctab__content:nth-of-type(5) {
    opacity: 1 !important;
    -webkit-transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease !important;
    transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease !important;
    transition: 0.5s opacity ease-in, 0.8s transform ease !important;
    transition: 0.5s opacity ease-in, 0.8s transform ease, 0.8s -webkit-transform ease !important;
    position: relative !important;
    top: 0 !important;
    z-index: 100 !important;
    -webkit-transform: translateY(0px) !important;
            transform: translateY(0px) !important;
    text-shadow: 0 0 0 !important;
}

.facturissynctab:first-of-type:not(:last-of-type) + label {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.facturissynctab:not(:first-of-type):not(:last-of-type) + label {
    border-radius: 0 !important;
}

.facturissynctab:last-of-type:not(:first-of-type) + label {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.facturissynctab:checked + label {
    background-color: #528ecc !important; /* #fff !important; */
    cursor: default !important;
}

.facturissynctab:checked + label:hover {
    background-color: #528ecc !important; /* #fff !important; */
}

.facturissynctab + label {
    border-radius: 6px 6px 0 0 !important;
    cursor: pointer !important;
    display: block !important;
    text-decoration: none !important;
    color: #fff !important; /* #333 !important; */
    -webkit-box-flex: 3 !important;
            flex-grow: 3 !important;
    text-align: center !important;
    background-color: #84bbf3 !important; /*#dbebff !important;*/ /* #e8e8e8 !important; */
    -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
            user-select: none !important;
    text-align: center !important;
    height: 50px !important;
    box-sizing: border-box !important;
    padding: 15px !important;
    font-size: 15px;
}

.facturissynctab + label:hover {
    /*background-color: #bddbfa !important; */ /* #f9f9f9 !important; */
    text-decoration: underline !important;
}

.facturissynctab__content {
    padding: 10px 25px !important;
    background-color: transparent !important;
    position: absolute !important;
    width: 100% !important;
    z-index: -1 !important;
    opacity: 0 !important;
    left: 0 !important;
    -webkit-transform: translateY(-3px) !important;
            transform: translateY(-3px) !important;
    border-radius: 6px !important;
}


.facturis-online-sync {
    font-family: 'Helvetica', sans-serif !important;
    background-color: #f6f6f6 !important;
    color: #777 !important;
    padding: 10px 0 !important;
    font-weight: 300 !important;
    margin-top: 10px;
}

.facturis-online-sync-container {
    margin: 0 auto !important;
    display: block !important;
    max-width: 800px !important;
}

/*
.facturis-online-sync-container > *:not(.facturissynctab-wrap) {
    padding: 0 80px !important;
}*/


.facturis-online-sync h1,
.facturis-online-sync h2 {
    margin: 17px 0px !important;
    color: #444 !important;
    text-align: center !important;
    font-weight: 400 !important;
    font-family: sans-serif !important;
}

.facturis-online-sync h2 {
    font-size: 1em !important;
    margin-bottom: 30px !important;
}

.facturis-online-sync h3 {
    font-weight: 400 !important;
}

/*
.facturis-online-sync p {
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
}*/

.facturis-online-sync .alert,
.facturis-online-sync .notice {
    /* padding: 17px !important; */
    padding: 8px !important;
    color: #721c24 !important;
    background-color: #f8d7da !important;
    /*opacity: 1 !important;
    transition: opacity 0.6s !important;
    margin-bottom: 15px !important;*/
    border-radius: 7px;
    margin: 0px !important;
    border-width: 1px !important;
    border-color: #cfcfcf  !important;
    font-size: 13px;
}
  
.facturis-online-sync .alert.success,
.facturis-online-sync .notice-success {
    background-color: #d4edda !important;
    color: #155724 !important;
}

.facturis-online-sync .alert.success
{
    padding: 17px !important;
}

.facturis-online-sync .alert.info {
    color: #004085 !important;
    background-color: #cce5ff !important;
    margin-bottom: 13px !important;
}
.facturis-online-sync .alert.warning {
    color: #856404 !important;
    background-color: #fff3cd !important;
}
  
.facturis-online-sync .closebtn,
.facturis-online-sync .notice-dismiss{
    margin-left: 15px !important;
    color: #b4b4b4 !important;
    font-weight: bold !important;
    float: right !important;
    font-size: 22px !important;
    line-height: 20px !important;
    cursor: pointer !important;
    transition: 0.3s !important;
}

.closebtn:hover {
    color: black !important;
}

.facturis-online-sync p a{
    color: #444 !important;
    text-align: center !important;
    font-weight: 400 !important;
    font-size: 13px;
    text-decoration: none;
}

.facturis-online-sync p a:hover {
    text-decoration: underline;
}

.facturis-online-sync .spinner
{
    position: relative;
    top: 2px;
    left: 28px;
}

.facturis-online-sync .hide-element
{
    display: none;
}

.facturis-online-sync #alert-sync
{
    margin: 10px 0px !important;
}

#datepicker-container input
{
    width: 30% !important;
}

.datepicker
{
	font-family: 'Helvetica', sans-serif !important;
}

.datepicker-controls button.view-switch
{
    background-color: #528ecc !important;
    color: white !important;
}

.datepicker-controls button.prev-btn,
.datepicker-controls button.next-btn,
.datepicker-cell.selected, .datepicker-cell.selected:hover,
.datepicker-cell.range-end:not(.selected), .datepicker-cell.range-start:not(.selected)
{
    background-color: #84bbf3 !important;
    color: white !important;
}

.datepicker-cell.today:not(.selected) {
    background-color: #74B807 !important;
}

.datepicker-controls button.prev-btn
{
    margin-right: 2px !important;
}

.datepicker-controls button.next-btn
{
    margin-left: 2px !important;
}