/* =============================================================================
   site_common_buttons.css
   Extracted from site_common.css — all button styles.
   Toggle this file on/off in _LayoutReciever.cshtml to test the new kit buttons.
   ============================================================================= */

/*LINK BUTTONS*/
.linkbtn {
    background:none;
    border:none;
}
.linkbtn:hover {
    text-shadow:0 1px 2px #ccc;
}
/*BUTTONS -----------------------------------*/
.btn {
    font-size: var(--btn-inp-font-size);
    font-weight: var(--btn-inp-font-weight);
    line-height: var(--btn-inp-line-height);
    border-radius: var(--btn-inp-border-radius);
    padding: var(--btn-inp-padding-y) var(--btn-inp-padding-x);
}
/*BUTTONS BASE -----------------------------------*/
[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {cursor: pointer;}
.btn:not(.disabled):not([disabled]):not(:disabled){cursor: pointer;}
.btn {
    display: inline-block;
    color: var(--text-color-ondark);
    /* background-color: var(--btn-bg);*/
    background-color: transparent;
    border: var(--btn-border-width) solid var(--btn-border-color); /*transparent*/
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    text-decoration: none;
    text-align: center;
    /*white-space: nowrap;*/
    vertical-align: middle;
    height: 40px;
    /* line-height: 36px;*/
    padding: 8px 9px 4px 9px;
}
/*--- BUTTON LOADING ANIM ---*/
button.loading {
    pointer-events:none;
    position:relative;
    overflow:hidden;
}
    button.loading:after {
        content: '⚈';
        position: absolute;
        left: 0px;
        width: 100%;
        height: 100%;
        text-align: center;
        color: black;
        z-index: 1000;
        font-size: 30px;
        animation: loadingicoanim 1s infinite linear;
    }
@keyframes loadingicoanim {
    50% {
        content: '⚉';
        /*content: '⚈';*/
    }
}
button.loading:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 150%;
    height: 150%;
    --first-color: hsl(231, 44%, 56%);
    --first-color-alt: hsl(231, 44%, 51%);
    background: repeating-linear-gradient(60deg, transparent, transparent 0.75rem, #ffffff74 0.75rem, #ffffff74 1.5rem);
    animation: btnloadbackanim 1s infinite linear;
}
@keyframes btnloadbackanim {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-1.75rem);
    }
}
/*--- BUTTON LOADING ANIM END ---*/

.btn:disabled {opacity: 0.4;}
.btn.btn-primary {background-color: var(--btn-bg-primary); color: var(--btn-color-primary);}
.btn.btn-danger {background-color: var(--btn-bg-danger); color: var(--btn-color-danger);}
.btn.btn-descreet {background-color: var(--btn-bg-descreet); color: var(--btn-color-descreet); border: 1px solid rgba(0, 0, 0, 0.2);}

.btn::before, .btn::after {
    width: 20px;
    height: 16px; /*80%*/
    display: inline-block;
    margin-top: -3px;
    margin-right: 5px;
    background-repeat: no-repeat !important;
    background-position: center center;
    background-size: contain;
    vertical-align: middle;
}
.btn::after {margin-right: 0px; margin-left:5px;}
.btn:empty::before {margin-right:0px;}
.btn:empty::after {margin-left:0px;}


/* .topbtn, .content-header .btn-group .btn {
    border-radius: 4px;
    font-size: 0.80rem;
    border: 1px solid transparent;
    border-left: 1px solid rgba(255,255,255,0.5);
    height: 100%; 
    background-color: var(--btn-bg);
}
 .content-header .btn-group .btn{
     white-space:nowrap;
 }*/

/* Moved here to have Hover last*/
@media (hover:hover) {
    .btn:hover:not(:disabled) {
        background: var(--btn-hover-bg);
        border-color: var(--btn-hover-border-color);
        border-color: transparent;
    }
}

/*For topbtn spacing and radius*/
/*.content-header .btn-toolbar, .content-header .btn-group {
    display: flex;
}
    .content-header .btn-toolbar > .flexcenter, .content-header .btn-group > .flexcenter {
        align-self: center;
    }
.btn-toolbar { width:auto; align-self:stretch; }
.btn-toolbar > * { align-self:center; }

.content-header .btn-group .btn { border-radius: 0px}
.content-header .btn-group .btn:first-child { border-radius: 4px 0px 0px 4px;}
.content-header .btn-group .btn:last-child { border-radius: 0px 8px 0px 0px;}
.content-header .btn-group .btn:only-child { border-radius: 4px 8px 0px 0px;}*/

.botbtn {
    /* overflow: hidden;*/
    background: rgba(0, 0, 0, 0.0);
    width: 100%;
    border-top: 0.05rem solid rgba(0, 0, 0, 0.1);
    border-radius: 0px 0px 4px 4px;
    height: 40px;
    background: linear-gradient(1deg, rgba(200, 200, 200, 0.0) 0%, rgba(180,180,180, 0.15) 100%);
}
    .botbtn:hover /*, .botbtn.dark:hover*/ {
        background-color: rgba(0, 0, 0, 0.5) !important; /*bytt ifrån background-color: till background*/
        background: rgba(0, 0, 0, 0.5) !important;
        /*color: rgba(255, 255, 255, 1.0) !important;*/
        -webkit-animation: none;
    }

.inlinebtn /*I samband med text och rubriker*/ {
    max-height: 30px;
    width: 30px;
    background-color: rgba(0, 0, 0, 0.1);
    padding:0px;
    line-height:30px;
    border-radius: 50%;
    margin: 0px 5px;
}

 .btn_prev, .btn_next {
    border: none;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    padding: 4px 0px;
    background: rgba(0, 0, 0, 0.05);
} .btn_prev {margin-right:10px;} .btn_next {margin-left:10px;}

.btn_changepage /*in the bottom*/ {
    /*   background: linear-gradient(2deg, rgba(90, 90, 90, 0.5) 0%, rgba(120,120,120, 0.5) 100%);*/
    border: transparent;
    background-color: rgba(60, 60, 60, 1.0); /*color: var(--text-color-ondark);*/
    margin:0px auto;
    height:50px;
    min-width:160px;
}
    .btn_changepage.next {/*float:right; */border-radius: 12px 20px 20px 12px; padding-left:15px;}
        .btn_changepage.next::after {content: ""; background-image: url(../images/icos/actico_arrow_next.png);}
    .btn_changepage.prev {/*float:left;*/  border-radius: 25px 12px 12px 25px; padding-right:15px;}
        .btn_changepage.prev::before {content: ""; background-image: url(../images/icos/actico_arrow_prev.png);}

/*Dialog Btns - Borttagen på grund av krock med topbtn under Skapa produkt*/
/*.modal-body .btn { color: var(--btn-color); border-color:rgba(80,80,80,0.1);*/ /*background-color:rgba(0, 0, 0, 0.5);*/ /*}
.modal-body .btn::before   {filter: brightness(30%);}
.modal-body .btn:hover {background-color:rgba(80,80,80,0.15) !important; border: 1px solid transparent;}

.modal-footer .btn {height:15px;}*/
.btn.half {width: 50%;}
.btn.long {width: 100%;}
.btn.slim {display:inline-block; height:30px; margin:0px 4px; padding:0px 10px; line-height:30px;}

/*Lägg till säsong*/
.btn.high { height: 100px;} /*Lägg till säsong*/
.btn.float {  box-shadow: 0px 1px 8px 0px rgba(40,40,40,0.2);} /*Lägg till säsong*/
.btn.dark {background-color: rgba(80, 80, 80, 1.0); color: var(--text-color-ondark);}
.btn.on_bright, .content-header.bright .btn { color: var(--btn-color); background-color:transparent;}
/*.topbtn.on_bright, .content-header.bright .btn { border-left-color:rgba(80,80,80,0.1);}*/
.btn.on_bright::before, .btn.on_bright::after, .content-header.bright .btn::before, .btn.darken::before {filter: brightness(30%);}
.btn.on_bright:hover, .content-header.bright .btn:hover {background-color:rgba(80,80,80,0.15) !important; border: 1px solid transparent;}


/*Button Colours ---------- */
.btn_dark {background-color: rgba(0, 0, 0, 0.4); color:var(--text-color-ondark);}
.btn_colored {background-color: #808080;} /* Meant to be over-ruled in themes*/
.btn_noticeme {background-color: #c29f2b;}
.btn_red, .btn.red {background-color: rgb(137, 77, 70, 0.90); color:var(--text-color-ondark);} .btn_red:hover, .btn.red:hover {background-color: rgba(124, 75, 70, 1.0);}
.linkbtn.red {color: #872f25;} .linkbtn.red:hover  {color: rgba(124, 75, 70, 1.0);}
.btn_green, .btn.green, .btn_primary {background-color: rgb(91, 141, 65, 0.90); color:var(--text-color-ondark);} .btn_green:hover, .btn.green:hover {background-color: rgba(86, 122, 76, 1.0);}
.linkbtn.green {color: rgb(91, 141, 65, 1.00);} .linkbtn.green:hover  {color: rgba(86, 122, 76, 1.0);}
.btn_blue, .btn.blue, .btn_secondary {background-color: rgb(80, 141, 143, 0.90); color:var(--text-color-ondark);} .btn_blue:hover, .btn.blue:hover {background-color: rgb(75, 122, 122, 1.0);}
.linkbtn.blue {color: #337d8a;} .linkbtn.blue:hover  {color: rgb(75, 122, 122, 1.0);}

/*Button Icos ---------- */
.btn_save::before {content: "";background-size: contain; background-image: url(../images/icos/actico_save.png);}
/*.btn_top.save {-webkit-animation: color_change 2s infinite alternate;}*/
.btn_upload::before {content:"";background-size: contain; background-image: url(../images/icos/actico_upload.png);}
.btn_edit::before {content:""; background-size: contain;background-image: url(../images/icos/actico_edit.png);}
.btn_add::before {content:""; background-size: contain;background-image: url(../images/icos/actico_add.png);}
.btn_search::before {content:"";background-size: contain; background-image: url(../images/icos/actico_search.png);}
.btn_filter::before {content:""; background-size: contain;background-image: url(../images/icos/actico_filter.png);}
.btn_lables::before {content:""; background-size: contain;background-image: url(../images/icos/ico_addresslables.png);}
.btn_print::before {content:""; background-size: contain;background-image: url(../images/icos/actico_print.png);}
.btn_excell::before {content:"";background-size: contain;background-image: url(../images/icos/actico_excell.png); filter: brightness(100%);}
.btn_labels::before {content:"";background-size: contain;background-image: url(../images/icos/actico_labels.png);}
.btn_export::before {content:"";background-size: contain;background-image: url(../images/icos/actico_download.png); filter: brightness(100%);}
.btn_visualize::before {content:"📊";/*📈*/ margin-top:-6px/*-10px*/; font-size:17px; filter: brightness(100%);}
.btn_clear::before {content:"";background-size: contain; background-image:url(../images/icos/actico_clear.png);}
.btn_calendar::before {content:"";background-size: contain;background-image: url(../images/icos/ico_calendar.png);}
.btn_close::before {content:""; background-size: contain;background-image: url(../images/icos/actico_close.png);}
.btn_delete::before {content:"";background-size: contain; background-image: url(../images/icos/actico_delete.png);}
.btn_confirm::before {content:""; background-size: contain;background-image: url(../images/icos/ico_check.png);}
.btn_continue::before {content:"";background-size: contain; background-image: url(../images/icos/actico_arrow_next.png);}
.btn_img::before {content:""; background-size: contain;background-image: url(../images/icos/ico_image.png);}
.btn_send::before {content:""; background-size: contain;background-image: url(../images/icos/ico_newsletter.png);}
.btn_show::before {content:""; background-size: contain;background-image: url(../images/icos/actico_show.png);}
.btn_prev::before {content:"";background-size: contain; background-image: url(../images/icos/actico_arrow_prev.png); }
.btn_next::before {content:""; background-size: contain;background-image: url(../images/icos/actico_arrow_next.png); }
.btn_arrow::before {content:""; background-size: contain;background-image: url(../images/icos/actico_arrow_next.png); }
.btn_more::before {content:""; background-size: contain;background-image: url(../images/icos/actico_arrow_down.png);}
.btn_up::before {content:""; background-size: contain;background-image: url(../images/icos/actico_arrow_up.png); -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.btn_split::before {content:"";background-size: contain; background-image: url(../images/icos/actico_split.png); }
.btn_merge::before {content:"";background-size: contain; background-image: url(../images/icos/actico_merge.png); }
.btn_coll::before {content:"";background-size: 70%; background-image: url(../images/icos/actico_arrow_openclose.png); }
.btn_email::before {content:"";background-size: contain; background-image: url(../images/icos/ico_newsletter.png); }
.btn_alert::before {content:"";background-size: contain; background-image: url(../images/icos/ico_alert.png); }
.btn_msg::before {content:"";background-size: contain; background-image: url(../images/icos/ico_newsletter.png); }
.btn_checked::before {content:"";background-size: contain; background-image: url(../images/icos/ico_check.png); }
.btn_wallet::before {content:"";background-size: contain; background-image: url(../images/icos/ico_wallet.png); }
.btn_open::before {content:"";background-size: 70%;background-image: url(../images/icos/actico_open.png); }
.btn_settings::before {content:"";/*background-size: 60%;*/ background-image: url(../images/icos/ico_settings.png); }
.btn_list::before {content:""; background-size: contain;background-image: url(../images/icos/ico_list.png); }
.btn_pricehistory::before {content:"📈"; font-size:16px; line-height:15px; text-align:center; }
.btn_fullscreen::before {content:'\26F6'; font-size:16px; line-height:15px; text-align:center; }
.btn_copy::before {content:"⧉"; font-size:16px; line-height:15px; text-align:center; }

/*.btn_accept::before {content:""; background-image: url(../images/icos/actico_accept.png);}
.btn_deny::before {content:""; background-image: url(../images/icos/actico_deny.png);} */
.btn_accept::before {content:"\2714\FE0E" /*✓ \2714\FE0E ✔︎*/ !important; filter:none !important; font-size:16px; line-height: 30px; text-align:center; }
.btn_deny::before {content:"\274C\FE0E" /*✕ \274C\FE0E ✖&#xFE0E*/ !important; filter:none !important; font-size:16px; line-height:30px; text-align:center; }

.btn_lock:not(:hover)::before, .btn_unlock:hover::before {content:""; background-image: url(../images/icos/ico_padlock_open.png); }
.btn_unlock:not(:hover)::before, .btn_lock:hover::before {content:""; background-image: url(../images/icos/ico_padlock_closed.png); }

/*.btn_invoice::before {content:""; background-image: url(../images/icos/ico_invoice.png); }
.btn_organisation::before {content:""; background-image: url(../images/icos/ico_organisation.png); }
.btn_organisations::before {content:""; background-image: url(../images/icos/ico_organisations.png); }*/
/*.btn_show_more (E-post)
.btn_show_less*/


.btn_wait{
    pointer-events:none;
}
.btn_wait::before {
    content: "";
    color: rgba(255, 255, 255, 0.25) !important;
    /*-webkit-animation: btn_wait_anim 2s ease infinite !important;
    -moz-animation: btn_wait_anim 2s ease infinite !important;
    animation: btn_wait_anim 2s ease infinite !important;*/
    -webkit-animation: btn_wait_anim 4s ease infinite !important;
    -moz-animation: btn_wait_anim 4s ease infinite !important;
    animation: btn_wait_anim 4s ease infinite !important;
    background-image: url(../images/icos/actico_wait.png) !important;
} .btn_wait:hover {background-color: rgba(0, 0, 0, 0.2) !important;}
  .btn_save {
    -webkit-animation: color_change 2s infinite alternate;
    animation: color_change 2s infinite alternate;
    transition: ease-in-out;
} @keyframes btn_wait_anim {
    /*0% { background-position: 0% 50%; }
    50% {background-position: 5px 50%; }10%
    100% { background-position: 0% 50%;}
    50% {background-position: -5px 50%; }
    100% { background-position: 0% 50%; }*/
     0% { }
    25% { transform:rotate(180deg); }
    100% { }
    75% { transform:rotate(180deg); }
    100% {  transform:rotate(360deg); }
}
/*Background*/
/*@keyframes color_change {
    0% { background-color: inherit; }
	100% { background-color: rgba(0, 0, 0, 0.6); }
}*/
/*Border*/

@keyframes color_change {
    0% {box-shadow: inherit;}
    100% {box-shadow: 0px 0px 2px 2px rgba(100,40,40,0.30);}
}

/*TABS (EG in Modals) ----------------*/
.tabs {
    border-bottom: 2px solid rgba(0,0,0,0.08);
    display:flex;
    margin-bottom:20px;}

    .tabs .btn {
            vertical-align: middle;
            display: flex;
            align-items: center;
            color: var( --text-color-onbright);
            border-radius: 4px 4px 0px 0px;}
    .tabs .btn img {
            display: inline-block;
            height: 18px;
            margin-right: 10px;
            vertical-align: middle;
            filter: brightness(30%);}
      .tabs .btn:hover {background-color: rgba(0,0,0,0.05);}

      .tabs .btn.btn-primary {
            /* background-color: var(--btn-bg-primary);*/
            /* color: var(--btn-color-primary);*/
            background-color: rgba(0,0,0,0.01);
            border: 1px solid rgba(0,0,0,0.08);
            border-bottom: 0px solid rgba(0,0,0,0.05);
            box-shadow: 0px -2px 4px 0px rgba(0,0,0,0.05);
        }
/* .tabs .btn.btn-primary img {filter: brightness(100%);}*/


/*QuickEdit ---------------  */
@media (hover: hover /* - Only devices supporting hover*/ ) /*pointer:fine - only accurate pointing device*/ {
    .quickedit .listbtn {
        visibility: hidden;
    }
        .quickedit tr:hover .listbtn, .quickedit .list-row:hover .listbtn, .quickedit .listbtn.visible {
            visibility: visible;
        }
}