/*servicecard.css v.3.0806*/
/*includes
    employeecard
    individcard
    admincard
    personcard
    */
/*======ANSTÄLLDAKORTET=====*/
/*======FONTS,======*/

.emp-yellow-puff h1,
.emp-yellow-puff h2,
.emp-yellow-puff h3,
.emp-yellow-puff h4
{
    font-weight: 600 !important;
}

.emp-yellow-puff h1
{
    font-size: 44pt !important;
    line-height: 0.8 !important;
}

.emp-yellow-puff h2
{
    font-size: 36pt;
    line-height: 0.8;
}

.emp-yellow-puff h3
{
    font-size: 32pt !important;
}

.emp-yellow-puff h4
{
    font-size: 22pt !important;
    line-height: 1;
}

.emp-yellow-puff
{
    cursor: pointer;
}

.empcard .company-selector, .startpage .company-selector
{
    min-height: 67px !important;
}

#m-salary-headline
{
    color: white;
    height: 100%;
}

    #m-salary-headline strong
    {
        left: -4px;
        font-size: 12px;
    }

    #m-salary-headline::after
    {
        content: "";
        top: 0;
        width: 0;
        height: 0;
        border-top: 24px solid transparent;
        border-left: 15px solid #FF0033;
        border-bottom: 24px solid transparent;
        position: absolute;
        right: -15px;
        z-index: 0;
    }

#salary-status > div
{
    height: 48px;
}

.no-access,
.emp-container > div
{
    height: 140px;
}

.emp-number *
{
    position: absolute;
    bottom: -56px;
    color: var(--ik-card-purple) !important;
    font-weight: 800 !important;
    line-height: 1;
}

#avslutade .emp-number *,
#premie .emp-number *
{
    color: #272727 !important;
}

.new-employee .ik-btn-default
{
    height: 48px;
    margin-top: 0;
    line-height: 1.2;
}

    .new-employee .ik-btn-default .glyphicon
    {
        margin-left: 0 !important;
    }

    .new-employee .ik-btn-default .glyphicon,
    .new-employee .ik-btn-default a
    {
        color: white !important;
    }

    .new-employee .ik-btn-default .glyphicon
    {
        top: -10px;
    }

    .new-employee .ik-btn-default.active .glyphicon
    {
        top: 14px;
    }
/*=======PUFFS=========*/

.emp-yellow-puff
{
    height: 100%;
    background-color: var(--ik-card-yellow);
    padding-left: 10px !important;
}

    .emp-yellow-puff.active
    {
    }

.yellow-puff-header
{
    padding-top: 5px;
}

.yellow-puff-footer
{
    display: block;
    position: absolute;
    width: 91%;
    bottom: 0;
}

    .yellow-puff-footer .detail-container
    {
        margin-top: 23px;
    }

        .yellow-puff-footer .detail-container .glyphicon
        {
            right: -14px;
        }

.emp-yellow-puff .sk-fading-circle
{
    margin: 37px auto !important;
}

.emp-yellow-puff.puff-inactive .yellow-puff-footer
{
    display: none;
}

#m-detail-view ul, .m-detail-view ul li
{
    list-style-type: disc;
    list-style: disc;
}

/*.right-border-thin,
.emp-purple-puffs {
    border-right: white solid 3px;
}*/
.emp-purple-puffs:last-child
{
    border-right: none !important;
}

.report-footer
{
    /*background-color: #009CD7;*/
}

.admincard .info-headline
{
    margin-bottom: 25px;
}

img.img-compass
{
    width: 100%;
}

/*.admincard .puff-body,
.empcard .puff-body,*/
.card .puff-body
{
    font-weight: 600;
    color: white !important;
}

#sjukfrisk .puff-name
{
    font-weight: 500;
}

#individcard .puff-inactive .puff-name > div > div,
.card .puff-body .puff-inactive
{
    font-weight: normal !important;
}

.card .puff-body, .card .puff-icon .glyphicon
{
    color: white !important;
}

.card .puff-icon .glyphicon
{
    position: relative !important;
    margin: 0 !important;
    font-size: 18px;
}

.puffheading-margin-adjust
{
    margin-top: -20px;
}

.emp-reports
{
}

.msg-templates p
{
    margin-bottom: 0;
}

.emp-purple-puffs
{
    min-height: 160px;
}

.emp-purple-footer
{
    position: absolute;
    bottom: 0px;
    background-color: var(--ik-card-purple-dark);
}

.row-17 .details
{
    right: -10px;
}

.empcard #info-msg-area
{
    background-color: white !important;
}

    .empcard #info-msg-area > div,
    .empcard #info-msg-area > div h3
    {
        background-color: var(--ik-card-green-light);
    }

.empcard #info-msg-area
{
    overflow: hidden;
}

    .empcard #info-msg-area img
    {
        width: 153%;
        left: -98px;
        top: 20px;
    }

.empcard #emp-puff4-area .detail-container
{
    /*padding-right: 0 !important;*/
}

.empcard .clip
{
    top: 8px;
}
/*.empcard .itp1 .red,
.empcard .itp2 .red {
    font-weight: 600;
}*/
#issue-puff-container
{
    padding-top: 10px;
}


    #issue-puff-container .notes *
    {
        /*color: black;*/
    }

.issue-puffs *
{
    color: black;
}

.date-spinner
{
    /* float: left!important; */
    top: 29px;
    right: 15px;
}

.right-spinner
{
    float: right;
    top: -29px;
    right: -10px;
}

.sp-left
{
    left: -57px;
}

.img-grp-6, .img-grp-4
{
    overflow: hidden;
}

    .img-grp-6 #img-part-of-group
    {
        right: 232px;
        width: 140%;
    }

    .img-grp-4 #img-part-of-group
    {
        right: 374px;
        width: 192%;
    }

#error-correct h3.active
{
    text-decoration: underline;
}

/*====INDIVIDKORTET/PERSONKORTET====*/

#individcard
{
    /* min-height: 1080px; */
}

#ind-main-info h3
{
    font-size: 12pt !important;
    font-weight: bold !important;
    white-space: normal;
    margin-top: 0 !important;
    text-transform: none !important;
}

#top-row,
#top-row .no-access
{
    min-height: 160px !important;
}

#individ-status-area .details *,
#individ-status-area .puff-body *
{
    color: white;
}

#top-row .puff-inactive .puff-body,
#individ-status-area .puff-inactive,
.card .puff-inactive, .card .puff-inactive-adm,
.startpage .single-row-puffs a .puff-body
{
    height: 200px;
}

    #individ-status-area .puff-inactive *,
    #top-row .puff-inactive *,
    .card .puff-inactive *
    {
        color: black !important;
    }

    #individ-status-area .puff-inactive .report-footer,
    #top-row .puff-inactive .report-footer,
    .card .puff-inactive .report-footer
    {
        /* display: none; */
    }

    .card .puff-inactive-adm .report-footer-inactive
    {
        height: 60px;
        background-color: #DCDCDC;
    }

    .card .puff-inactive-adm p
    {
        font-weight: normal;
    }

.card #saknade_loner.puff-inactive-adm .report-footer-inactive
{
    top: 16px;
}

.puff-inactive-adm
{
    background-color: #F5F5F5;
}

.puff-name
{
    width: 100%;
    position: absolute;
    /*bottom: 20px;*/
    left: 0;
}

.individarea-row,
.individarea-row > div
{
    height: 237px;
}

    .individarea-row > div > div.bg-lightgreen,
    .individarea-row > div > div.bg-purple,
    .individarea-row > div > div.puff-inactive
    {
        position: absolute;
        top: 37px;
    }

#report-puff-container .puff-heading,
#singlerow .puff-heading
{
    height: 20px;
}

.issues
{
    height: 263px;
}

#customeragent-card .issues
{
    height: 215px !important;
}

#top-row .puff-inactive-adm .puff-body
{
    height: 140px !important;
}

#top-row .puff-body,
.standard-puffs .puff-body,
.emp-issues .standard-puffs > div,
.individarea-row .puff-body
{
    height: 170px !important;
}

/*#top-row > div > div {
        height: auto;
    }*/

#ind-company-info,
#top-row
{
    display: inline-block;
    font-size: 14px;
    margin-bottom: 15px;
}

#individcard #top-row
{
    margin-bottom: 0 !important;
}

.user-icon
{
    position: absolute;
    right: 0;
    top: 0;
}

    .user-icon .glyphicon-user
    {
        font-size: 20px;
        color: #A0A0A0 !important;
    }

#ind-status > div
{
    background-color: var(--ik-card-green-light);
    height: 100% !important;
}

#ind-main-info h3.larger, h3.solid
{
    font-size: 14pt !important;
}

#ind-current-status h3
{
    color: #3F713E !important;
}

.bg-purple #ind-current-status h3
{
    color: var(--ik-card-purple-dark) !important;
}

#ind-current-status h3.small
{
    font-size: 12pt !important;
}

#ind-status h5, .u-case
{
    text-transform: uppercase;
}

#ind-status *
{
    color: white !important;
}

#ind-status ul li,
#ind-employments ul li
{
    font-size: 14px;
}

#ind-main-info.grey-border
{
    border-right: none !important;
}

#emp-single
{
    /*height: 100% !important;*/
    min-height: 85px;
    padding-top: 5px;
    padding-bottom: 5px;
}

    #emp-single .sk-fading-circle
    {
        margin: 33px auto;
    }

    #emp-single ul li
    {
        /*margin-bottom: 4px;*/
    }

    #emp-single > div > div
    {
        padding-bottom: 4px;
    }

#emp-multiple
{
    padding-top: 10px;
    padding-bottom: 10px;
    /*margin-bottom: 13px;*/
}

    #emp-multiple > div ul li
    {
        display: inline !important;
        padding-left: 10px;
    }

        #emp-multiple > div ul li:first-child
        {
            padding-left: 0;
        }

    #emp-multiple li a
    {
        float: right;
    }

#emp-multiple-last
{
    margin-top: 15px;
}

#ind-employments > div ul
{
    margin-bottom: 0;
}

    #ind-employments > div ul li
    {
        display: block;
    }

/*====HISTORY=====*/

#hs-area
{
    margin-top: 15px;
}

#opt-event-type
{
    width: 100%;
}

label[for=opt-list-size]
{
    margin-left: -5px;
}

/*.filterheader {
    bottom: 10px;
}*/

#hs-period-start,
#hs-period-end
{
    width: 90%;
}

#hs-period-lbl
{
    padding-top: 6px;
}

.date .glyphicon-calendar,
.date-edit .glyphicon-calendar,
#hs-filter-area .glyphicon-calendar
{
    font-size: 18px;
    right: 16px;
    color: var(--ik-btn-primary);
    cursor: pointer;
}

#hs-filter-area .glyphicon-calendar
{
    margin: 6px 16px;
}

.date .glyphicon-calendar,
.date-edit .glyphicon-calendar
{
    margin: 31px 10px;
    /* margin: 31px 20px 31px 10px; */
}

.move-emp-area .date .glyphicon-calendar
{
    top: -24px;
    position: relative !important;
    right: 37px;
}

.ik-modal-welcome .date .glyphicon-calendar
{
    /* Take the icon out of flow and center it on the input instead of using
       hardcoded offsets, so it stays aligned regardless of modal/column width. */
    position: absolute;
    top: 50%;
    right: 25px;
    margin: 0;
    transform: translateY(-50%);
}

.move-emp-area .plans
{
    height: 100%;
    /* min-height: 800px; */
}

.userinfo .date .glyphicon-calendar
{
    margin: 0 0 0 160px;
    position: relative !important;
    top: -26px;
    right: 0;
    display: block;
}

#report-health-status .userinfo .date input[type=text],
#health-status-view .month-year-input
{
    width: 185px;
    height: 36px;
}

.reportsalary .date .glyphicon-calendar
{
    margin: 5px -8px;
}

#retroperiods-itp2 .date .glyphicon-calendar
{
    margin: 6px -8px;
}

.simpledrop select
{
    width: 100%;
    padding: 5px;
}

.simpledrop select,
.simpledrop input,
#hs-filter-area select,
#hs-filter-area input
{
    height: 35px;
    border: none;
    cursor: pointer;
}

.simpledrop input,
#hs-filter-area input
{
    padding-left: 5px;
}

#hs-filter-area label
{
    padding-top: 7px;
    cursor: pointer;
}

.simpledrop label
{
    top: -10px;
}

    .simpledrop label[for='opt-list-size']
    {
        top: 10px;
        right: -10px;
    }

#health-status-type label, #crew label
{
    font-weight: normal;
}

#edit-date-view .glyphicon-remove,
#new-employee-view .glyphicon-remove,
.edit-emp-row .glyphicon-remove,
.salarytax-area .glyphicon-remove,
#health-status-view .glyphicon-remove
{
    right: 52px;
    top: 32px;
}

.reportsalary .date .glyphicon-remove
{
    right: 36px;
    top: 7px;
}

#retroperiods-itp2 .glyphicon-remove
{
    right: 34px;
    top: 8px;
}

#retroperiods-itp2 .glyphicon-remove-sign,
#retroperiods-ftp .glyphicon-remove-sign
{
    font-size: 18px;
    cursor: pointer;
    top: 3px;
    left: 10px;
}

#report-health-status .glyphicon-remove.large
{
    top: 5px;
    left: 0;
    font-size: 15px;
}

.glyphicon-remove.large
{
    top: 5px;
    left: 14px;
    font-size: 15px;
}

#hs-filter-area .glyphicon-remove
{
    right: 52px;
    top: 11px;
}

#hs-area .thead div
{
    cursor: default !important;
}

    #hs-area .thead div:hover
    {
        text-decoration: none;
    }

.hs-future
{
    font-style: italic;
}

    .hs-future:after
    {
        content: "Kommande";
        font-size: 10px;
        text-transform: uppercase;
        right: 0;
        position: absolute;
    }

#hs-area .excel-link .clip
{
    background-size: 93%;
    padding: 15px;
    margin-right: 0;
    top: 6px;
}

#hs-area table.tbl-searchresult thead tr td
{
    text-transform: initial !important;
}
/*=======Datepicker/jquery-ui-multiselect tweaks=====*/
.ui-datepicker-div
{
    z-index: 1001 !important;
}

.ui-datepicker-header, .month-picker-header
{
    background-color: var(--ik-card-green-light) !important;
    border: none !important;
    background-image: none !important;
}

.month-picker-header
{
    height: 31px!important;
    padding: 3px!important;
}

.ui-state-highlight
{
    border: 1px solid #489058 !important;
    background: white!important;
}

.ui-state-hover
{
    border: 1px solid #6cc06d!important;
    background-image: url("") !important;
    background-color: transparent !important;
}
.ui-state-active, .ui-button.ui-state-active:hover
{
    border: 1px solid #fbd850;
    background: white !important;
}

.ui-datepicker-year,
.ui-datepicker-year *,
.ui-datepicker-month,
.ui-datepicker-month *,
.month-picker-header *
{
    color: #272727!important;
}

.hide-calendar .ui-datepicker-calendar
{
    display: none !important;
}

.ui-icon-triangle-1-s
{
    top: 10px !important;
}
/*.ui-widget-header .ui-icon {
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}
.ui-icon-circle-triangle-w::after {
    content: "\e080";
    background-position: 0;
}
 {
        content: "\e079";
}*/
/*======IKONER==========*/
.card .icons
{
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    width: 90px;
    height: 80px;
    background-size: 95%;
    padding: 15px;
}

    .card .icons.NOTISER
    {
        width: 91px;
        /* height: 80px; */
        /* padding-bottom: 0; */
    }

.icons.NOTISER.sk-fading-circle
{
    right: 29px;
    top: -12px;
}



#NOTISER .NOTISER .circle,
#NOTISER.active .NOTISER .circle, .ARENDEN .circle
{
    width: 36px;
    height: 36px;
    top: -17px;
    background: red;
}

#saknade_loner .circle,
#saknade_loner.active .circle
{
    width: 40px;
    height: 40px;
    background: red;
    right: -74px;
    top: -69px;
    z-index: 1001;
}

    #saknade_loner .circle p,
    #saknade_loner.active .circle p
    {
        top: 10px;
    }
    anstalldakort.tgl.url.lank
    #saknade_loner .circle.large p,
    #saknade_loner.active .circle.large p
    {
        top: 21px;
        font-size: 15px;
        margin-bottom: 0;
    }

#NOTISER .NOTISER .circle, .ARENDEN .circle
{
    right: -38px;
}

#NOTISER.active .NOTISER .circle p,
#saknade_loner.active .circle p
{
    color: white !important;
}

#saknade_loner .circle.large,
#saknade_loner.active .circle.large
{
    width: 65px;
    top: -74px;
    height: 64px;
    right: -109px;
}


.circle,
.NOTISER .circle
{
    width: 53px;
    /* height: 50px; */
    border-radius: 70%;
    display: inline-block;
}

    .circle p
    {
        font-size: initial;
        top: 7px;
        left: 0px;
        background-color: transparent !important;
    }

    .circle.red,
    .NOTISER .circle.red
    {
        background: red;
    }

    .circle.bankID
    {
        position: absolute;
        height: 38px;
        width: 38px;
        background: #0978b0;
        left: -34px;
        top: -8px;
    }

        .circle.bankID p
        {
            top: 1px;
            left: -3px;
        }

        .circle.bankID img
        {
            width: 37px;
            left: 3px;
        }

    .circle.white
    {
        background: white;
        border: 2px solid var(--ik-btn-primary);
    }

        .circle.white.d-single
        {
            width: 25px;
            height: 25px;
        }

        .circle.white.d-double
        {
            width: 34px;
            height: 33px;
        }

        .circle.white.d-triple
        {
            width: 38px;
            height: 35px;
        }

        .circle.white p
        {
            top: 0;
            color: #474747;
        }

        .circle.white.d-single p
        {
            top: -2px;
            left: -4px
        }

        .circle.white.d-double p
        {
            top: 2px;
            left: -2px;
        }

        .circle.white.d-triple p.dd
        {
            top: 6px;
            left: -3px;
            font-size: small !important;
        }

        .circle.white p.dd
        {
            font-size: large;
        }

/*.circle.white p.td {
                font-size: x-large;
            }*/

/*======MARGINS======*/

.r15
{
    right: 15px;
}

.r-15
{
    right: -15px;
}

.r10
{
    right: 10px;
}

.r5
{
    right: 5px;
}

.t15
{
    top: 15px;
}

.t10
{
    top: 10px;
}

.t-10
{
    top: -10px;
}

.t3
{
    top: 3px;
}

.t5
{
    top: 5px;
}

.t6
{
    top: 6px;
}

.t-5
{
    top: -5px;
}
.l5{
    left:5px;
}

.l10{
    left:10px;
}
.l15{
    left:15px;
}

.l30
{
    left: 30px;
}
/*======COMMON========*/

.flex
{
    display: flex;
    flex-direction: row;
}

.flex-col
{
    display: flex;
    flex-direction: column;
}

.flex-rr
{
    flex-direction: row-reverse;
}

.flex-force-b
{
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.flex-sp-btw
{
    display: flex;
    justify-content: space-between;
}

.flex-even-sp-row
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.flex-col-center
{
    display: flex;
    flex-direction: column;
    -o-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.fw
{
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.SKICKA_ARENDEN
{
    background-image: url("../images/puffs/A6.png");
}

.VISA_SKICKADE
{
    background-image: url("../images/puffs/A8.png");
}

.VISA_MOTTAGNA
{
    background-image: url("../images/puffs/A7.png");
    background-position-y: 2px !important;
}

/*.BESTALL_FIL {
    background-image: url("../images/puffs/A1_light.png");
}*/

.ARENDEN
{
    background-image: url("../images/mail_W.png");
    background-position-y: -15px !important;
    width: 116px !important;
    height: 80px !important;
    background-size: 110% !important;
}

.FILEMANAGER
{
    background-image: url("../images/puffs/A44.png");
}

.ENGANGSPREMIE
{
    background-image: url("../images/puffs/A28_light.png");
}

.active .ENGANGSPREMIE
{
    background-image: url("../images/puffs/A28.png");
}

#issue-puff-container .icons.SAKNADE_LONER
{
    left: -16px;
}
    #issue-puff-container .icons.SAKNADE_LONER.nocircle
    {
        left: 0;
        background-position-y: -5px !important;
    }


.SAKNADE_LONER
{
    background-image: url("../images/puffs/A45_light.png");
    background-position-y: -6px !important;
}

.puff-inactive-adm .SAKNADE_LONER
{
    background-image: url("../images/puffs/A45.png");
}

.single-row-puffs .SAKNADE_LONER
{
    height: 84px;
}

.active .SAKNADE_LONER
{
    background-image: url("../images/puffs/A45.png");
    height: 84px;
}

.INTRO
{
    background-image: url("../images/puffs/A46_light.png");
}

.active .INTRO
{
    background-image: url("../images/puffs/A46.png");
}

.NOTISER
{
    background-image: url("../images/puffs/notifications_light.png");
}

.active .NOTISER
{
    background-image: url("../images/puffs/A47.png");
    right: 2px;
}


/*======ANSTÄLLDAKORT========*/
.NEW_EMPLOYEE
{
    background-image: url("../images/puffs/NEW_EMP_light.png");
}

.active .NEW_EMPLOYEE
{
    background-image: url("../images/puffs/NEW_EMP.png");
}

.LON
{
    background-image: url("../images/puffs/A26_light.png");
}

.active .LON
{
    background-image: url("../images/puffs/A26.png");
}

.FLYTTA_ANST
{
    background-image: url("../images/puffs/A98_light.png");
}

.active .FLYTTA_ANST
{
    background-image: url("../images/puffs/A98.png");
}

.FLYTTA_ANST_KOST
{
    background-image: url("../images/puffs/A4_light.png");
}

.FLYTTA_ANST_ORGNR
{
    /*background-image: url("../images/puffs/A2_light.png");*/
    background-image: url("../images/puffs/A98_light.png");
}

.active .FLYTTA_ANST_ORGNR
{
    /*background-image: url("../images/puffs/A2.png");*/
    background-image: url("../images/puffs/A98.png");
}

.FLYTTA_ANST_PLANER
{
    background-image: url("../images/puffs/A3_light.png");
}

.lonevaxling
{
    background-image: url("../images/puffs/A5_light.png");
}

.SJUKFRISK
{
    background-image: url("../images/puffs/A9_light.png");
}

/*=======ADMIN==============*/
.HANTERA_ADMIN
{
    background-image: url("../images/puffs/A15_light.png");
}

.admincard .NY_ADMIN
{
    background-image: url("../images/puffs/A50_light.png");
}

.admincard .BYT_HUVUDADMIN
{
    background-image: url("../images/puffs/A24_light.png");
}

.active .HANTERA_ADMIN,
.puff-inactive-adm .HANTERA_ADMIN,
.active .NY_ADMIN,
.puff-inactive-adm .NY_ADMIN
{
    background-image: url("../images/puffs/A15.png");
}

.active .BYT_HUVUDADMIN,
.puff-inactive-adm .BYT_HUVUDADMIN
{
    background-image: url("../images/puffs/A24.png");
}

.admincard .active .NY_ADMIN,
.admincard .puff-inactive-adm .NY_ADMIN
{
    background-image: url("../images/puffs/A50.png");
}

.admincard .active .BYT_HUVUDADMIN,
.admincard .puff-inactive-adm .BYT_HUVUDADMIN
{
    background-image: url("../images/puffs/A24.png");
}

.adminpersoncard .NY_ADMIN
{
    background-image: url("../images/puffs/A49_light.png");
    image-rendering: pixelated;
}

.adminpersoncard .BYT_HUVUDADMIN
{
    background-image: url("../images/puffs/A24_light.png");
    image-rendering: pixelated;
}

.adminpersoncard .active .NY_ADMIN,
.adminpersoncard .puff-inactive-adm .NY_ADMIN
{
    background-image: url("../images/puffs/A49.png");
    image-rendering: pixelated;
}

.adminpersoncard .active .BYT_HUVUDADMIN,
.adminpersoncard .puff-inactive-adm .BYT_HUVUDADMIN
{
    background-image: url("../images/puffs/A24.png");
    image-rendering: pixelated;
}

.icons.NY_ADMIN
{
}

.icons.BYT_HUVUDADMIN
{
}

.MINA_KONTAKTUPPG
{
    background-image: url("../images/puffs/A13_light.png");
}

.active .MINA_KONTAKTUPPG,
.puff-inactive-adm .MINA_KONTAKTUPPG
{
    background-image: url("../images/puffs/A13.png");
}

.MINA_BEHORIGHETER
{
    background-image: url("../images/puffs/A48_light.png");
}

.ANDRA_KONTAKTUPPGIFTER
{
    background-image: url("../images/puffs/A14_light.png");
}

.active .MINA_BEHORIGHETER
{
    background-image: url("../images/puffs/A48.png")
}

.active .ANDRA_KONTAKTUPPGIFTER,
.puff-inactive-adm .ANDRA_KONTAKTUPPGIFTER,
.puff-inactive-adm .MINA_BEHORIGHETER
{
    background-image: url("../images/puffs/A14.png");
}

/*=======CUSTOMERAGENT======*/
.FULLMAKT
{
    background-image: url("../images/puffs/A10__light.png");
}

.KUNDINFO
{
    background-image: url("../images/puffs/A12_light.png");
}

.active .BESTALL_FIL
{
    background-image: url("../images/puffs/A11.png");
}

.BESTALL_FIL
{
    background-image: url("../images/puffs/A11_light.png");
}

.HAMTA_FIL
{
    background-image: url("../images/puffs/A1_light.png");
}

.active .HAMTA_FIL
{
    background-image: url("../images/puffs/A1.png");
}

/*=======INSURER==========*/
.KAPITALFLYTT
{
    background-image: url("../images/puffs/A16_light.png");
}

.KAPITALFLYTT_FELLISTA
{
    background-image: url("../images/puffs/A17_light.png");
}

.HAMTA_RESULTAT
{
    background-image: url("../images/puffs/A18_light.png");
}

.SOK_RESULTAT
{
    background-image: url("../images/puffs/A19_light.png");
}

/*========INDIVID========*/

.active .FORALDRALEDIG,
.active .ANGRA_FORALDRALEDIGHET
{
    background-image: url("../images/puffs/A22.png");
}

.FORALDRALEDIG,
.ANGRA_FORALDRALEDIGHET
{
    background-image: url("../images/puffs/A22_light.png");
}

.active .SJUKFRISK,
.puff-inactive .SJUKFRISK
{
    background-image: url("../images/puffs/A23.png");
}

.SJUKFRISK
{
    background-image: url("../images/puffs/A23_light.png");
}



.active .ANDRA_UPPGIFTER
{
    background-image: url("../images/puffs/A20.png");
}


.TJANSTLEDIG,
.ANGRA_TJANSTLEDIGHET,
.ANDRA_UPPGIFTER
{
    background-image: url("../images/puffs/A20_light.png");
}

.active .ANNULLERA
{
    background-image: url("../images/puffs/A24.png");
}

.ANNULLERA
{
    background-image: url("../images/puffs/A24_light.png");
}

.active .ANSTALLNING1,
.active .AVSLUTA,
.active .AVANMALD,
.active .ANGRA_AVSLUTA,
.active .AVANMALD,
.active .ANGRA_AVANMALAN,
.active .TA_BORT_ADMIN,
.puff-inactive-adm .TA_BORT_ADMIN
{
    background-image: url("../images/puffs/A21.png");
}

.AVANMALD,
.ANGRA_AVANMALAN,
.ANSTALLNING1,
.AVSLUTA,
.ANGRA_AVSLUTA,
.TA_BORT_ADMIN
{
    background-image: url("../images/puffs/A21_light.png");
}

.active .ATER_I_TJANST,
.active .ANMAL_ANSTALLNING
{
    background-image: url("../images/puffs/A25.png");
}

.ATER_I_TJANST,
.ANMAL_ANSTALLNING
{
    background-image: url("../images/puffs/A25_light.png");
}

/*=========PUFFAR=======*/

.min-top-5
{
    top: -5px;
}

.min-top-13
{
    top: -13px;
}

.min-top-15
{
    top: -15px;
}

.min-top-20
{
    top: -20px;
}

.black
{
    color: #272727 !important;
}

.card .details
{
    height: 30px;
    padding-top: 5px !important;
}

.card #notification-view .details,
.card .calendar .details
{
    padding-top: 0 !important;
}

a.pufflink, a.pufflink:focus, a.pufflink:active
{
    outline: 0;
}

.card .pufflink:hover .details *
{
    text-decoration: underline;
}

.card .pufflink:hover .glyphicon
{
    text-decoration: none;
}

.card .pufflink:hover .bg-purple
{
    background-color: var(--ik-card-purple-hover) !important;
}

.card .pufflink:hover .blue-backdrop, .pufflink.blue-backdrop:hover
{
    background-color: var(--ik-card-blue-hover);
}

.card .pufflink.active:hover .blue-backdrop,
.card .pufflink.active:hover .bg-purple
{
    background-color: var(--ik-canvas-level-2) !important;
}

.card .pufflink.active:hover
{
    background-color: var(--ik-canvas-level-2) !important;
}

.card .pufflink:hover .bg-contrastblue
{
    background-color: var(--ik-card-blue-dark-hover);
}

.card .pufflink:hover .bg-darkgrey, .report-footer.bg-darkgrey
{
    background-color: #a5a4a4;
}

.card .pufflink:hover .bg-contrastdarkgrey
{
    background-color: #8c8a8a;
}

.card .pufflink:hover .bg-contrastyellow
{
    background-color: var(--ik-card-yellow-hover);
}

.card .pufflink:hover .bg-lightgreen
{
    background-color: var(--ik-card-green-light-hover);
}

.card .pufflink:hover .bg-contrastgreen
{
    background-color: var(--ik-card-green-cont-hover);
}

.pufflink .puff-heading
{
    color: #272727;
}

#filemanager-puff .pufflink .report-footer
{
    cursor: pointer;
}

#filemanager-puff .pufflink.active .puff-body
{
    cursor: default;
}

.detail-btn
{
    cursor: pointer;
}

    .detail-btn:hover
    {
        text-decoration: underline;
    }

#error .detail-btn span.glyphicon
{
    margin: 3px 0px 0 10px;
    font-size: 15px;
}

.error-list
{
    border-top: 2px solid white;
}

.pufflink.active,
.inactive .pufflink.active
{
    /*height: 217px;*/
    /* border-right: white 3px solid; */
    cursor: pointer;
    filter: none;
    opacity: 1;
    pointer-events: inherit;
    background-color: var(--ik-canvas-level-2);
    color: #272727 !important;
}

button.ik-btn-default:hover::after
{
    /*    position: absolute;
    top: 0;
    left: 75%;
    width: 100%;
    content: attr(title);
    background-color: #ffa;
    color: #000;
    line-height: 1.4em;*/
    /*border: 1px solid #000;*/
}


#salarypuffrow .pufflink.active.last#itp2
{
    border-right: none !important;
}

#issue-puff-container .pufflink.active > div::after
{
    top: 172px;
}

.issue-puffs .puff-body
{
    height: 145px !important;
}

.pufflink.active::after, #ind-employments.active::after, .pufflink.active > div::after, .module.active::after
{
    content: "";
    background-color: var(--ik-canvas-level-2);
    width: 100%;
    height: 25px;
    top: 200px;
    left: 0;
    display: block;
    position: absolute;
    /* border-right: white solid 3px; */
}

.module.active::after
{
    top: 158px;
    height: 35px !important;
}

.pufflink.active#saknade_loner::after,
.pufflink.active#intro::after
{
    top: 229px;
}

.pufflink.active#NOTISER::after
{
    top: 174px;
    width: 95.5%;
}

.adminpersoncard #user-main-info .active:after
{
    content: "";
    background-color: var(--ik-canvas-level-2);
    width: 100.5%;
    height: 25px;
    top: 160px;
    left: -2px;
    display: block;
    position: absolute;
    border: none;
}

#health-puff-container .pufflink.active::after
{
    content: "";
    background-color: var(--ik-canvas-level-2);
    width: 100%;
    height: 52px;
    top: 209px;
    left: 0;
    display: block;
    position: absolute;
}

#ind-employments.active::after
{
    top: 163px;
}

.new-employee .pufflink.active::after
{
    content: "";
    background-color: var(--ik-canvas-level-2);
    width: 100%;
    height: 17px;
    top: 47px;
    left: 0;
    display: block;
    position: absolute;
}


.individarea-row > div:last-child .pufflink.active,
.individarea-row div:last-child .pufflink
{
    border-right: none;
}

.pufflink.active > div
{
    height: inherit;
}

#issue-puff-container .pufflink.active .puff-body
{
    height: 145px;
    max-height: 145px;
}

/*=====BILDER=====*/
.img-compass
{
    top: -70px;
}

#spinner-save
{
    position: absolute;
    right: -25px;
    top: 13px;
}

.list-spinner
{
    right: -20px;
    top: 9px;
}

.center-spinner
{
    margin-left: 50%;
    margin-right: 50%;
}

#companydrop_changeperm .sk-fading-circle.small
{
    top: 9px;
    right: -90px;
}

/*======NY MEDARBETARE=======*/
#btn-new-employee.active *
{
    color: #272727 !important;
}

.card input[type="text"]:disabled
{
    background-color: white;
    border: 1px solid rgb(209, 185, 185);
    padding: 6px;
}

button.newemployee
{
    height: 32px;
}

#newemp-pnr .glyphicon
{
    cursor: pointer;
    top: 30px;
    right: 38px;
    font-size: 17px;
    z-index: 2003;
}

.edit-emp-wrapper
{
    margin: 0 auto 50px;
}

.monthname
{
    position: absolute;
    left: -30px;
    top: 4px;
}

#edit-employee-view .glyphicon-print,
.msg-templates .glyphicon-print
{
    margin-left: -28px;
    position: relative !important;
    top: 4px;
    left: 4px;
}

#edit-employee-view .red#error .glyphicon-alert
{
    top: 0;
}

#edit-employee-view .red#error .glyphicon-print
{
    top: -9px;
}

.salary-itp1 .glyphicon-plus,
.salary-itp2 .glyphicon-plus
{
    margin-left: -17px;
}

.salary-itp2 .ui-datepicker-calendar
{
    display: none;
}

.footer-actions
{
    /* height: 90px; */
}

.datepicker-spinner
{
    position: absolute;
    top: 30px;
    right: 0;
}

.save-spinner,
.plan-spinner
{
    position: relative;
    top: 27px;
    float: right;
    right: 10px;
}

.reemploy .save-spinner
{
    right: 60px;
}

#report-puff-container .save-spinner,
#edit-date-view .plan-spinner
{
    right: 0;
}

#edit-admin-view .save-spinner
{
    right: 55px;
    z-index: 1;
}

#mina_behorigheter .save-spinner
{
    top: 10px;
    right: 130px !important;
}

#edit-admin-view .spinner-container
{
    display: inline-block;
    float: left;
    left: 248px;
    top: -23px;
}

#mina-behorigheter .save-spinner
{
    top: 10px;
    right: 35px;
}

.move-emp-area .save-spinner
{
    top: 10px;
}

.move-emp-area .info-puff-widget p, .info-puff-widget p
{
    font: inherit;
    font-family: Arial, Helvetica, sans-serif !important;
    font-style: inherit;
    text-transform: none;
    white-space: pre-wrap;
    font-size: 14px !important;
    line-height: 1.42857143 !important;
    color: #333 !important;
    margin: 0 0 10px;
}

.save-spinner.newemp
{
    position: absolute;
    float: right;
    /* top: 0; */
    right: -10px;
}

#retroperiods-ftp .date .glyphicon-calendar
{
    margin: 6px 2px;
    right: 4px;
}

#retroperiods-ftp .date .glyphicon-remove
{
    right: 30px;
    top: 8px;
}

/*=====AVSLUTA/ÄNDRA ANSTÄLLNING=====*/
#avsluta > div.right-border-thin
{
    border-right: none !important;
}

.pufflink .glyphicon-chevron-down,
.pufflink .glyphicon-chevron-up
{
    font-size: 15px;
    margin-top: 7px;
}

/*====ÄNDRA ANSTÄLLNINGSPERIOD==== */
#edit-date-view
{
    border-right: solid white 1px;
}

#DATUM.active
{
    background-color: white;
}

    #DATUM.active #emp-start-date::after
    {
        content: "";
        width: 0;
        height: 0;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-top: 50px solid white;
        position: absolute;
        left: 205px;
    }

/*====BYT KOSTNADSSTÄLLE==== */
#ind-kst
{
    display: flex;
    align-items: center;
    margin-top: 5px;
}

    #ind-kst .ind-kst-label
    {
        flex: 1 1 auto;
        min-width: 0;
        position: relative;
        margin-left: -10px;
        padding: 5px 10px;
    }

        #ind-kst .ind-kst-label p
        {
            margin: 0;
        }

    #ind-kst.active .ind-kst-label
    {
        background-color: #00AEEF;
        color: white;
    }

        #ind-kst.active .ind-kst-label::after
        {
            content: "";
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 10px solid #00AEEF;
            position: absolute;
            top: 100%;
            left: 50%;
        }

    #ind-kst .ind-kst-edit
    {
        flex: 0 0 auto;
        position: relative;
        height: 30px;
        line-height: 30px;
        margin-left: 15px;
        padding-right: 40px;
    }

    #ind-kst .ind-kst-edit-disabled,
    #ind-kst .ind-kst-edit-disabled .edit-details
    {
        color: #A0A0A0;
        cursor: not-allowed;
    }

#edit-cc-view
{
    border-right: solid white 1px;
}

    #edit-cc-view select.ecm-select
    {
        -moz-appearance: none;
        -webkit-appearance: none;
        appearance: none;
        height: 32px;
        padding: 0 40px 0 10px;
        border: 1px solid #ccc;
        background: white url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'><path d='M1 1l7 7 7-7' fill='none' stroke='%2300AEEF' stroke-width='2.5'/></svg>") no-repeat right 10px center;
    }

    #edit-cc-view label.ecm-month-label
    {
        display: inline;
        font-weight: normal;
        cursor: pointer;
    }

        #edit-cc-view select.ecm-select:disabled
        {
            background-color: #d6d6d6;
            color: #333;
        }

/*======ADMIN- & PERSONKORT=======*/

.main-portal.adminpersoncard > div
{
    min-height: 163px;
}

.one-company-input
{
    background-color: white;
    border: none;
    padding: 5px;
}

#user-main-info > div
{
    height: 163px;
}

.access-badge > div
{
    background-color: white;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
    padding-top: 2px;
    text-transform: uppercase;
    margin-right: 3px;
}

#edit-admin-view
{
    border-right: white solid 1px;
}

/*.comma-sep-list li + li:after {
    content: ",";
    display: inline;
}*/
.servicegroups,
.ik-tbl-default .servicegroups ul li,
.ik-tbl-default .access-details ul li
{
    overflow-x: visible !important;
    overflow-wrap: break-word;
}

.comma-sep-list
{
    /*display: inline;*/
    overflow-wrap: break-word;
}

    .comma-sep-list li
    {
        display: inline;
    }

        .comma-sep-list li:nth-child(n+2):before
        {
            content: ', ';
            position: absolute;
            left: -4px;
        }

        .comma-sep-list li:last-child:after
        {
            content: '.';
            position: absolute;
        }

.selectall span:after
{
    content: "ALLA";
    font-size: 12px;
    position: absolute;
    left: 5px;
    top: -6px;
}

/*======NY STARTSIDA=======*/

.notification, .calendar-itp
{
    border: solid black 1px;
    min-height: 35px;
    margin-bottom: 10px;
}

    .notification.unread
    {
        background-color: white;
    }

        .notification.unread:before, .thin-border-list .searchhit:before
        {
            content: "•";
            position: absolute;
            font-size: 50px;
            color: #FFE046 !important;
            top: -15px;
            left: 8px;
        }

.notes-header
{
    position: absolute;
    right: 0;
    z-index: 2005;
}

.notification-header
{
    border-color: #00AFEF;
}
/*====MULTISELECT/TAIL SELECT TWEAK=====*/
.ui-notification
{
    height: 35px;
    overflow: visible;
}

label.ui-corner-all .notification-badge
{
    position: absolute;
    top: 0px;
    right: 0;
}

.tail-select .notification-badge
{
    top: -5px;
}

label.ui-state-active .notification-badge strong,
label.ui-state-hover .notification-badge strong
{
    color: #474747;
}

.info-bg
{
    color: white;
    background-color: var(--ik-action-link-blue);
}

.notification-badge
{
    width: 33px;
    height: 33px;
    border-radius: 47px;
    background: white;
    border: 2px solid #00AFEF;
}

    .notification-badge strong
    {
        position: relative;
        /* right: -7px; */
        top: 5px;
    }

#blue-puffs-view, #notification-view
{
    height: auto !important;
    min-height: 0px;
}


.header-list-base
{
    position: absolute;
    top: 34px;
}

.header-company-list
{
    position: absolute;
    /* top: 34px; */
    z-index: 2004;
    border: solid #474747 1px;
}

    .header-company-list li
    {
        border-bottom: solid #474747 1px;
    }

        .header-company-list li:first-child
        {
            color: #474747;
            /*border: none;*/
        }

        .header-company-list li:last-child
        {
            border: none;
        }

        .header-company-list li div,
        .header-company-list li div a
        {
            color: #474747;
            font-family: Arial;
            font-size: 13px;
        }

        .header-company-list li span
        {
            color: #474747;
            font-family: Arial;
        }

/*=====INTROJS TWEAKS==========*/

.introjs-tooltip.startpage
{
    min-width: 400px !important;
}

.introjs-tooltip.ultrawide
{
    min-width: 600px;
}

.introjs-tooltip ul.intro-list
{
    list-style: disc;
}
/*=====TAIL SELECT TWEAKS======*/
.list-size .tail-select
{
    width: 100%;
}

.tail-select .tail-select-dropdown
{
    width: 100% !important;
}

.tail-select .select-label
{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    border-radius: 0 !important;
}

/*=======ÄRENDEN==========*/

.stangd
{
    pointer-events: none;
    background-color: var(--ik-canvas-level-2);
    opacity: 0.7;
}

.requests-view input:focus-visible, .requests-view textarea:focus-visible, .adminpersoncard input:focus-visible, #report-salary-view input:focus-visible
{
    outline: none !important;
}

#inbox, #message-view, #message-view .msg-area
{
    height: 570px;
    margin-bottom: 20px;
}

    #inbox, #message-view .msg-area
    {
        overflow-y: scroll;
    }

#requests textarea
{
    resize: vertical;
}

.thin-border-list > div, .thread > div, .tab
{
    border-top: 2px solid var(--ik-canvas-level-2);
    border-left: 2px solid var(--ik-canvas-level-2);
    border-right: 2px solid var(--ik-canvas-level-2);
}

    .thin-border-list > div:first-child
    {
        border-top: none;
    }

    .thin-border-list > div:last-child, .last
    {
        border-bottom: 2px solid var(--ik-canvas-level-2) !important;
    }

    .thread > div:last-child
    {
        /*border-bottom: none !important;*/
    }

    .thin-border-list.thread .selected, .tab.active, #message-view .selected
    {
        background-color: #f2f0ec;
    }

        #message-view .selected::after
        {
            content: '';
            position: absolute;
            background-color: #f2f0ec;
            width: 100%;
            height: 2%;
            bottom: -3px;
            right: 0px;
        }

.thin-border-list .selected
{
    background-color: var(--ik-canvas-level-2);
    /*border-bottom: 2px solid var(--ik-canvas-level-2);*/
}

.thin-border-list.thread > div:first-child
{
    border-top: none !important;
}

/*.searchhit {
    background-color: cornflowerblue;
}*/

.thread > div
{
    margin-left: 41px;
    /*margin-right: -2px;*/
}

.thin-border-list .unread *
{
    font-weight: bold !important;
}

.thin-border-list .icon .glyphicon
{
    font-size: 22px;
    top: 10px;
    left: 20px;
}

#attachements .dz-message
{
    width: 80%;
}

#arende .file-upload, #attachements .file-upload
{
    padding: 10px;
}

#arende .dz-default.dz-message, #attachements .dz-default.dz-message
{
    padding-top: 10px;
}

.module
{
    display: flex;
    flex-direction: column;
    -o-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;
}

    .module.top
    {
        min-height: 159px !important;
        -o-justify-content: space-between;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }

.bg-lightgrey
{
    background-color: lightgrey;
}

.sort-asc
{
    transform: scaleY(1);
}

.sort-desc
{
    transform: scaleY(-1);
    top: -7px;
}

.gem
{
    background-image: url(../images/attachment_angle.svg);
    -ms-background-size: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
    width: 20px;
    display: flex;
    height: 30px;
    right: 5px;
}

.grow-wrap
{
    /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
    display: grid;
}

    .grow-wrap::after
    {
        /* Note the weird space! Needed to preventy jumpy behavior */
        content: attr(data-replicated-value) " ";
        /* This is how textarea text behaves */
        white-space: pre-wrap;
        /* Hidden from view, clicks, and screen readers */
        visibility: hidden;
    }

    .grow-wrap > textarea
    {
        /* You could leave this, but after a user resizes, then it ruins the auto sizing */
        resize: none;
        /* Firefox shows scrollbar on growth, you can hide like this. */
        overflow: hidden;
    }

    .grow-wrap > textarea,
    .grow-wrap::after
    {
        /* Identical styling required!! */
        border: 1px solid black;
        padding: 1.5rem;
        font: inherit;
        /* Place on top of each other */
        grid-area: 1 / 1 / 2 / 2;
    }

/*=====ABSOLUTE CENTER=====*/
.Center-Container
{
    position: relative;
}

.Absolute-Center
{
    width: 50%;
    height: 50%;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
/*=====BLANKETTSIDAN====*/
.formspage, #forms
{
    min-height: 530px;
}

.forms-item-row
{
    display: flex;
    align-items: center;
    gap: 8px;
}

.forms-item-link
{
    flex: 1;
    min-width: 0;
}

.forms-item-pdf
{
    flex-shrink: 0;
}

.forms-item-digital
{
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 6px;
    padding-right: 16px;
}

.forms-item-bankid
{
    position: relative !important;
    left: auto !important;
    top: auto !important;
}

    #forms span.glyphicon-new-window
    {
        position: relative !important;
        top: 2px;
        float: right;
    }
/*#forms .pufflink:hover{
    background-color: lightgrey!important;
}
#forms .pufflink.expanded:hover{
   background-color: var(--ik-canvas-level-2) !important;
}*/

.dropzone .dz-preview.dz-error .dz-error-mark
{
    opacity: 1;
    -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
    -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
    -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
    animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1)
}

.dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark
{
    pointer-events: none;
    opacity: 0;
    z-index: 500;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    margin-left: -27px;
    margin-top: -27px
}

    .dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg
    {
        display: block;
        width: 54px;
        height: 54px
    }

.dropzone .dz-preview.dz-error .dz-error-message
{
    display: block
}

.dropzone .dz-preview.dz-error:hover .dz-error-message
{
    opacity: 1;
    pointer-events: auto
}

.dropzone .dz-preview .dz-error-message
{
    pointer-events: none;
    z-index: 1000;
    position: absolute;
    display: block;
    display: none;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    border-radius: 8px;
    font-size: 13px;
    top: 130px;
    left: -10px;
    width: 140px;
    background: #be2626;
    background: linear-gradient(to bottom, #be2626, #a92222);
    padding: .5em 1.2em;
    color: #fff
}

    .dropzone .dz-preview .dz-error-message:after
    {
        content: "";
        position: absolute;
        top: -6px;
        left: 64px;
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #be2626
    }