@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');




/*
    Column classer för olika skärmstorlekar. Inställningarna för detta finns i lib/bootstrap/dist/css/bootstrap.css
    Nedan visar nuvarande inställning. Detta är inte boostraps ursprungliga utan jag har ändrat detta för att passa in bättre
    i vår kundzon. Jag lyckades tyvärr inte göra override så jag blev tvungen att ändra direkt i bootstrap filen.

    lg = @media (min-width:1592px)  large screen
    md = @media (min-width:1292px)  medium screen
    sm = @media (min-width:868px)   small screen
    xs = allt under 868px           extra small screen (mobilskärm)
*/

body {
    /*font-family: 'proxima_nova', sans-serif;*/
    /*font-family: 'Montserrat', sans-serif !important;*/
    /*font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";*/
    /*font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";*/
    font-family: "Poppins", sans-serif !important;    
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges. */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* No need for this in customer zone. */
.customer-body-content {
    padding-left: 0px;
    padding-right: 0px;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
/*input,
select,
textarea {
    max-width: 280px;
}*/

/* Carousel */
.carousel-caption {
    z-index: 10 !important;
}

    .carousel-caption p {
        font-size: 20px;
        line-height: 1.4;
    }

@media (min-width: 768px) {
    .carousel-caption {
        z-index: 10 !important;
    }
}

/*
 *  Start Valett customization 
 */

/**********************************************************
 *  General
 **********************************************************/


label {
    font-weight: normal;
}

footer {
    /*margin-left: -15px;*/
}

/*Kommenterade ut denna overiden eftersom den döljer radiobuttons. Vet inte varför jag har lagt till denna men jag gissar att den var någonstans 
    jag inte ville de skulle visas. Om så är fallet behöver jag det mer specifikt och inte för alla radiobuttons. Gjorde en ny override längre ner istället. */
/*input[type=radio]:not(old) {
    margin: 0;
    margin-left: -1.3em;
    padding: 0;
    opacity: 0;
}*/



a:hover.h3 {
    text-decoration: none;
}

a:focus {
    outline: none;
}

a.disabled {
    pointer-events: none;
}

#main-layout-header {
    height: 180px;
}

/*.valett-project-logo {    
   margin-top: 20px;
}*/


/*.img-main-logo {    
    max-width: 250px;    
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
}*/

.empty-grid::before {
    padding: 1em;
    line-height: 5em;
    content: "Inga poster kunde hittas.";
}

.empty-grid2::before {
    padding: 1em;
    line-height: 5em;
    content: "";
}

.box-radius-5 {
    border-radius: 3px;
}

.box-radius-5-top {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.box-radius-5-bottom {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.box-radius-50 {
    border-radius: 50px;
}

.margin-bottom-20 {
    margin-bottom: 20px;
}

.box-radius-50 {
    border-radius: 50px;
}

.box-radius-percent {
    /*border-radius: 50px, 50px, 50px, 50px;*/
    border-top-left-radius: 50px;
    border-top-right-radius: 6px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 0px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.box-padding-20 {
    padding: 20px,20px,20px,20px;
}

.box-margin-20 {
    margin: 20px,20px,20px,20px;
}

/*box-padding-top-20
{
    padding-top: 11% !important;
}*/

.box-valign-middle {
    vertical-align: middle;
}

.box-shadow {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.box-MyBox {
}

.subGridTitle {
    font-size: 15px;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
    width: 100%;
}

.grid-hide-columnMenu > a {
    display: none;
}

div {
    outline: none;
}

/*****************************
* Main colors *
/*****************************/

/*Background colors*/

.edit-bgcolor {
    background-color: #F6944A;
}

.save-bgcolor {
    background-color: #4CAF50;
}

.delete-bgcolor {
    background-color: #BD2249;
}

.blue-bgcolor {
    background-color: #5C88F6;
}

/*Colors*/

.edit-color {
    color: #F6944A;
}

.save-color {
    color: #4CAF50;
}

.delete-color {
    color: #BD2249;
}

.blue-color {
    color: #5C88F6;
}

.yellow-color {
    color: #CDD61D;
}


/*****************************
* Kendo Grid icons colors *
/*****************************/
/*Main Item color*/
span.mainItem-color {
    color: #F6944A;
}

/*if theme-color is used in selectable grid it needs to be color white if grid row is selected */
.k-state-selected > td > span.mainItem-color {
    color: #FFFFFF;
}

/*Package Item color*/
span.packageItem-color {
    color: #BA8F8F;
}

/*if theme-color is used in selectable grid it needs to be color white if grid row is selected */
.k-state-selected > td > span.packageItem-color {
    color: #FFFFFF;
}

/*Store Item color*/
span.storeItem-color {
    color: #6F7F8F;
}

/*if theme-color is used in selectable grid it needs to be color white if grid row is selected */
.k-state-selected > td > span.storeItem-color {
    color: #FFFFFF;
}


.k-state-selected > td > span.grid-icon-check-circle {
    color: #FFFFFF;
}


/*****************************
* Kendo Grid status colors *
/*****************************/
/*Main Item color*/
.greenStatus-color {
    color: #4CAF50;
}

/*if theme-color is used in selectable grid it needs to be color white if grid row is selected */
.k-state-selected > td > .greenStatus-color {
    color: #FFFFFF;
}

/*Main Item color*/
.redStatus-color {
    color: #BD2249;
}

/*if theme-color is used in selectable grid it needs to be color white if grid row is selected */
.k-state-selected > td > .redStatus-color {
    color: #FFFFFF;
}


/*****************************
* Kendo Grid link buttons *
/*****************************/

.gridSettings-icon {
    position: absolute;
    right: 0px;
}
    .gridSettings-icon > div {
        font-size: 17px;
    }

    .gridSettings-icon > div > span {
        font-size: 18px;
    }



    .close {
        font-size: 35px;
        filter: alpha(opacity=30);
        opacity: .3;
    }

/*.k-column-menu .k-sprite, .k-icon, .k-pager-numbers .k-current-page .k-link:after, .k-scheduler-toolbar>ul.k-scheduler-views>li.k-current-view>.k-link:after, .k-state-disabled .k-icon {    
    vertical-align: top;
}*/


/*****************************
* Kendo Override *
/*****************************/

.k-grid-norecords {    
    display: block;    
}

#LoginContent .k-animation-container {
    left: -100% !important;
}

.k-button.k-state-focused, .k-button.k-state-focused.k-state-disabled, .k-button:focus, .k-button:focus:hover, .k-state-disabled .k-button.k-state-focused {
    border: none;    
}

/* OLD Window Override. Remove when certain that it works all over.*/
/*.k-window {
    max-width: 100%;
}

.k-window-title {    
    text-align: center;
    font-weight: bold;
}

.k-window-titlebar .k-window-actions {    
    padding-top: .1em;    
}

.k-window-titlebar .k-window-action {
    width: 25px;
    height: 25px;
    padding: 4px;
}*/

/*Window*/
.k-window {
    border: none !important;
    border-radius: 5px !important;
}

.k-window-maximized {
    border-radius: 0px !important;
}


.k-window-title {
    text-align: center;
    font-weight: bold;
    color: #FFFFFF;
    font-size: 21px;
    margin-top: -3px;
    margin-bottom: -3px;
}

div.k-window-content {
    overflow-x: hidden !important;
    margin: 0px;
    /*overflow-y: hidden;*/
}

.k-window-titlebar .k-window-action {
    /*width: 35px;
    height: 35px;
    padding: 4px;*/
    color: #FFFFFF !important;
    margin-left: 5px;
    padding: 2px !important;
}

.k-window-action .k-icon {
    font: 28px/1 WebComponentsIcons !important;
    margin-top: -8px !important;
    right: 5px;
}

.k-detail-row {
    background-color: #5F9EA0 !important;
}

/* Css for Calendar in Grid */
.k-calendar .k-today .k-link {    
    box-shadow: none !important;
}

.k-calendar .k-content td {    
    box-shadow: none !important;    
}

.k-calendar td.k-state-focused .k-link {    
    box-shadow: none !important;
}

.k-calendar .k-footer {    
    display: none !important;
}


/*Grid*/

.k-pager-sizes .k-dropdown, .k-pager-sizes > select {
    width: 80px;
}

.k-grid-edit-row > td > .check-box { /*Hides the small checkbox which appears for bools. This way links will be hidden when in edit mode.*/
    display: none;
}

.k-grid-header {
    background-color: #f5f5f5 !important;
}

.k-command-cell {
    text-overflow: unset !important;
}

.k-grid > ::-webkit-scrollbar-track {
    background: transparent;
    border-style: solid;
    border-width: 0 0 0 1px;
    border-color: #ccc;
    /*border: 1px solid #ccc;*/
    border-radius: 0px;
}

.k-filter-row th, .k-grid-header th.k-header {
    font-weight: bold !important;
}

.k-grid-toolbar, .k-grouping-header {
    padding: 0px !important;
}

.gridCommandButton-small, gridCommandButton-small:focus {
    /*min-width: 0px !important;
    width: 0px;
    padding-left: 6px !important;
    margin: 0px !important;*/
    font-size: 16px !important;
    margin-right: 2px !important;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    transition: all 0.5s ease !important;
    padding-left: 4px !important;
    padding-right: 0px !important;
    min-width: 10px !important;
    min-height: 10px !important;
}

    .gridCommandButton-small:hover {
        /*border-radius: 50% !important;*/
    }

/*Grid kolumn menu show hide columns overide*/
.k-menu .k-animation-container .k-menu-group, .k-menu-scroll-wrapper .k-animation-container .k-menu-group, .k-popups-wrapper .k-animation-container .k-menu-group {
    max-height: 300px !important;
}

/*Edit Window*/
.k-edit-form-container {
    width: 100% !important;
}

/*Tabstrip*/

.k-panelbar > li.k-state-default > .k-link, .k-tabstrip-items .k-state-default .k-link {
    font-weight: bold;
}

/*Specific css for Tabstrips inside grid detail template. 
    Must do this since we changed the background color of k-detail-cell to dark green*/

td.k-detail-cell > .k-tabstrip-wrapper > .k-widget.k-tabstrip {
    background-color: #f5f5f5;
    border-radius: 3px;
    margin-top: 15px;
    margin-bottom: 15px;
    box-shadow: none;
}

.k-tabstrip:focus {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

/*Numeric textbox*/
.k-numerictextbox .k-input {    
    height: 2.43em;
}



/*MultiSelect*/
.k-multiselect-wrap li {
    /*line-height: 1.5em !important;*/
}

/*Kendo Checkbox*/
.k-checkbox {
    width: 20px;
    height: 20px;
}

    .k-checkbox::before {
        width: 17px;
        height: 17px;
        font-size: 17px;
    }

input[type=file]:focus, input[type=checkbox]:focus, input[type=radio]:focus {
    outline: none;
}

/*Kendo Radiobutton*/
input[type=radio] {
    margin: 0px 0 0;
    height: 18px;
    width: 18px;
    border: 2px solid #CCC;
    -moz-transition: all .2s cubic-bezier(0.0, 0.0, 0.2, 1);
    transition: all .2s cubic-bezier(0.0, 0.0, 0.2, 1);
    will-change: border-color;
}

.k-radio:checked:focus {
    box-shadow: none;
    border-color: #428bca;
}

/*Kendo viewhtml textarea */
.k-viewhtml-dialog .k-editor-textarea {
    width: 95%;
}

/*Kendo Switch*/
.k-switch-handle {
    height: 30px;
}

.k-switch-label-on {    
    font-weight: bold;
}

.k-switch-off.k-state-focused, .k-switch-off:focus {
    box-shadow: none;    
}

.k-switch.k-state-focused .k-switch-container, .k-switch:focus .k-switch-container {
    box-shadow: inset 0 0 0 1px #ccc;
}

.k-switch-off.k-state-focused .k-switch-handle, .k-switch-off:focus .k-switch-handle {
    border-color: #ccc;   
}


/*****************************
* Kendo Icon Override *
/*****************************/
.k-column-menu .k-sprite, .k-gantt-views > .k-current-view > .k-link:after, .k-grid-mobile .k-resize-handle-inner:after, .k-grid-mobile .k-resize-handle-inner:before, .k-i-drag-and-drop, .k-icon, .k-pager-numbers .k-current-page .k-link:after, .k-scheduler-toolbar > ul.k-scheduler-views > li.k-current-view > .k-link:after, .k-tool-icon {
    font: 18px/1 WebComponentsIcons !important;
}

.k-icon_large {
    font-size: 20px !important;
}

/*****************************
* Font Awesome icon Override *
/*****************************/
.fa, .fas, .far, .fal, .fad, .fab {
    font-size: 16px;
}

    .fa.large, .fas.large, .far.large, .fal.large, .fad.large, .fab.large {
        font-size: 18px;
    }

/*Set icon size for notifications*/
.notification-icon-size {
    font-size: 22px;
}

/*Set icon size for k-Button with no text. */
.valett-button-icon {
    font-size: 22px !important;
}

    .valett-button-icon:hover {
        animation: swing ease-in-out 0.5s 1 alternate;
    }


/*****************************
* Bootstrap Override *
/*****************************/

.close:focus, .close:hover {
    outline: none;
}

input[type=checkbox], input[type=radio] {
    margin: 4px 0 4px;    
}


/**********************************************************
 *  General: Telerik Kendo grid styling
 **********************************************************/
table[role="grid"] td {
    vertical-align: middle;
    padding-top: 0px;
    padding-bottom: 0px;
    /*line-height: 1.3em;*/
}

.k-grid td {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    line-height: 1.78em !important;
}

.grid-icon-check-circle {
    color: #4CAF50;
    font-size: 18px;
    display: table-cell;
    vertical-align: top;
    text-align: center;
    display: block;
}


/*Used when displaying images in all Kendo Grids in Valett. Column width shall be set to 72px*/
.kendoGrid-column-image {
    height: 32px;
    width: auto;
    max-width: 52px;
}

.kendoGrid-column-userImage {
    height: 32px;
    border-radius: 50%;
    /*width: auto;
    max-width: 52px;*/
    width: 32px;
}




/*button, input, select, textarea {    
    line-height: 1.6em !important;
}

.k-autocomplete .k-input, .k-dropdown-wrap .k-input, .k-numeric-wrap .k-input, .k-picker-wrap .k-input, .k-selectbox .k-input, .k-textbox>input {
    height: 1.6em !important;
    line-height: 1.6em !important;
    
}

.k-dropdown-wrap .k-select, .k-numeric-wrap .k-select, .k-picker-wrap .k-select {
    min-height: 1.60em !important;
    line-height: 1.80em !important;    
}*/



/**********************************************************
 *  Custom: Telerik Kendo grid styling
 **********************************************************/
table[role="grid"] th[gridStyleRight="true"] {
    text-align: right;
}

table[role="grid"] td[gridStyleRight="true"] {
    text-align: right;
}

table[role="grid"] th[gridStyleCenter="true"] {
    text-align: center;
}

table[role="grid"] td[gridStyleCenter="true"] {
    text-align: center;
}

/*For some reason the above grid settings for centering the grid image did not work for some?????
      But the header seemed to work. Created below class for them instead. Perhaps use this for all and remove above in the future. */
.gridStyleCenter {
    text-align: center !important;
}

.gridStyleRight {
    text-align: right !important;
}

/**********************************************************
 *  General: Telerik Kendo gauge styling
 **********************************************************/
div.k-gauge > div > svg > g > g[transform] {
    /* the pointer (needle) in the gauge */
    display: none;
}

/**********************************************************
 *  General: Telerik Kendo button and link styling
 **********************************************************/

span.k-button, span.k-calendar, span.k-footer, span.k-header, span.k-link {
    text-transform: none;
}

a.k-button, a.k-calendar, a.k-footer, a.k-header, a.k-link {
    text-transform: none;
}

.k-button {
    line-height: 1.72em;
    display: inline-block;
    transition: all 0.5s ease;
    box-shadow: none !important;
    padding: 3px 0px 0px;
}

.k-grid-content .k-button, .k-grid-toolbar .k-button {
    padding: 1px;
    padding-left: 5px;
    padding-right: 5px;
}

/*Nedan 8 ingår krävs för de de nya gridknapparna med endast ikon*/

.k-grid tbody .k-button, .k-ie8 .k-grid tbody button.k-button {
    min-width: 45px !important;
}

.k-grid .k-button {
    margin: 0px !important;
    /*padding: 0px;*/
}

.k-grid tbody .k-button-icontext > span {
    display: none;
}

.k-header > .k-button {
    padding: 0px;
}

    .k-toolbar > .k-button > span {
        display: none;
    }

.k-button.k-state-active:hover, .k-button:active:hover {
    border-color: transparent !important;
    background-color: transparent !important;
}

.k-button.k-state-hover, .k-button:hover {
    border-color: transparent;
}

/*.k-edit-form-container .k-edit-buttons {
    display: none;
}*/


.k-window-content .k-edit-form-container .k-edit-buttons {
    display: none;
}

.k-editor-dialog .k-edit-form-container .k-edit-buttons {
    display: block;
}

    .k-editor-dialog .k-edit-form-container .k-edit-buttons .k-button {
        padding: 4px 8px;
    }

.k-header-column-menu.k-state-active > span {
    color: #FFFFFF !important;
}




/**********************************************************
 *  Kendo Grid: Extend Grid to full page size
 **********************************************************/
/*Detta med fullsizeGrid slutade och fungerade när jag gjorde om alla knappar till vgl och vgxl m.m.
    Detta behöver göras på ett nytt sätt om det skall vara kvar. Används just nu bara i Items tror jag.
    Lösningen är egentligen förlegad. Den kom till när vi hade den gamla skapa val lösningen med delad skärm.
*/
.k-grid-fullSizeGrid {
    float: right !important;
}

    .k-grid-fullSizeGrid:hover {
        border-radius: 50%;
    }

    .k-grid-fullSizeGrid > span:before {
        font: 20px/1 WebComponentsIcons;
        content: "\e017";
    }

div.kendo-grid-extended {
    position: fixed;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100% !important;
    z-index: 1500;
    -webkit-animation: zoomIn 0.5s; /* Safari 4.0 - 8.0 */
    animation: zoomIn 0.5s;
}

    div.kendo-grid-extended > .k-header > .k-grid-fullSizeGrid > span:before {
        font: 20px/1 WebComponentsIcons;
        content: "\e019" !important;
    }



/**********************************************************
 *  General: Bootstrap styling
 **********************************************************/
body {
    background-repeat: no-repeat;
    background-position: center top !important;
    background-attachment: fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    /*font-family: 'proxima_nova', sans-serif;*/
    padding-bottom: 0px;
}

.row {
    /*border-bottom: 8px solid;*/
    margin-bottom: 20px !important;
}

.row-no-margin {
    margin-right: -15px;
    margin-left: -15px;
}

.col-centered {
    float: none;
    margin-right: auto;
    margin-left: auto;
}

.valett-row-transparent {
    background: inherit;
}

.valett-top-header {
}

    .valett-top-header > .col-md-4 {
        background: none;
        margin-right: 0px;
    }

.valett-header {
    padding-left: 15px;
    border-bottom: 3px solid;
}

.noborder {
    border-bottom: none !important;
}

.bordertop {
    border-top: 8px solid;
}

.borderbottom {
    border-bottom: 8px solid;
}

.bordercomplete {
    border: 8px solid;
}

.valett-row-transparent > .col-md-12 {
    background: none;
}

.titletext > .col-md-12 {
    background: none;
}

.container#fullwidth {
    width: 98%;
}

.container#mediumwidth {
    width: 68%;
}


.valett-period-headerblock {
    width: 25%;
    margin: auto;
    border-top-left-radius: 3px;
    border-top-right-radius: 50px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.valett-period-headerblock-spacer {
    text-align: center;
}

.valett-period-headerblock-text {
}

/*div.valett-period-name {
    float: left;
    padding: 10px;
    background: none;
}


.valett-period-deadline {
    font-size: small;
}

.valett-period-deadline_bold {
    font-size: small;
    font-weight: bold;
}


.valett-period-headerblock-underline {
    text-align: center;
    font-weight: bold;        
}*/

.bigtile {
    min-height: 150px;
    /*border-right: 15px solid;*/
    padding: 10px;
    margin-bottom: 15px;
}

.large-image-tile {
    margin-bottom: 20px !important;
    padding-right: -15px !important;
    padding-left: -15px !important;
    /*border-right: 15px solid;*/
}

.medium-tile {
    min-height: 100px;
}

.smalltile {
    /*border-right: 15px solid;*/
}

/*OLD itemtile*/
/*.itemtile {    
    padding: 10px;
    margin-bottom: 15px;    
}*/

.itemtile {
    /*padding: 10px;*/
    margin-bottom: 15px;
}

.itemTileHeader {
    padding-top: 5px;
    padding-left: 10px;
}

.itemTileContent {
    padding: 10px;
}

.titletext {
    font-size: 1.3em;
    padding-top: 2%;
    padding-bottom: 1%;
    margin-top: 0px;
}



/**********************************************************
 *  Areas: Account, Backoffice, Frontoffice, Platform
 **********************************************************/
.valett-admin-headerblock {
}

.valett-admin-header {
    font-weight: bold;
    font-size: larger;
}

.valett-admin-subheader {
}

.flex {
    display: flex;
}

.vcenter {
    position: absolute;
    top: 50%;
    transform: translate(0,-50%);
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.relative {
    position: relative;
}

.logForm {
    display: flex;
}

.logOutContainer {
    position: relative;
}

.logOut {
    position: absolute;
    bottom: 0;
}

.main-content-title {
    color: #818896;
    font-size: 20px;
    /*font-weight: bold;*/
    flex-grow: 1;
    text-transform: uppercase;
    /*text-align: center;*/
    margin-bottom: 10px;
}

.sub-content-title {
    color: #818896;
    font-size: 18px;
    font-weight: bold;
    flex-grow: 1;
}


/**********************************************************
 *  Area: FrontOffice
 **********************************************************/
/* START */

div.frontoffice_valett-period-percent {
    float: right;
    font-size: x-large;
    font-weight: bold;
    padding: 10px;
    margin-right: -15px;
    /*background-color: #4CAF50;
    color: #FFFFFF;*/
}

#frontoffice_valett_grid_showPercent {
    text-align: center;
    font-weight: bold;
    font-size: 16px;
}

/* Period */
.frontoffice_valett-period-center {
    text-align: center;
    /*border: 1px solid #000000;*/
    padding: 10px;
    background: none;
}

frontoffice_valett-period-left {
    float: left;
}

frontoffice_valett-period-right {
    float: right;
}

/* Period_Details */
.frontoffice_period_detatils {
}



.frontoffice_Period_Title {
    text-align: center;
}




.valett-period-percent-gauge_small {
    text-align: center;
    float: left;
}

    .valett-period-percent-gauge_small > a > .k-gauge {
        display: inline-block;
        text-align: center;
        vertical-align: middle;
    }

span.valett-period-percent-gauge_small {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}

.valett-period-percent-gauge-imageLayer-1_small {
    /*background: #a94442;*/
    font-size: larger;
    width: 85px;
    height: 85px;
    position: absolute;
    bottom: 80px;
    left: 15px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    color: #000000;
}

.valett-period-percent-gauge-imageLayer-2_small {
    /*background: #a94442;*/
    font-size: larger;
    width: 85px;
    height: 85px;
    position: absolute;
    bottom: 80px;
    left: 150px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.valett-period-percent-gauge-imageLayer-content_small {
    /*background: #000000;*/
    max-width: 50px;
    max-height: 50px;
    line-height: 50px;
    text-align: center;
    color: #000000;
}

.valett-period-font {
    /*font-family: Montserrat;
    color: #818896;*/
    font-size: small;
    font-weight: bold;
}







/**********************************************************
 *  Area: Customer
 **********************************************************/
/* START */
div.valett-period-percent {
    float: right;
    font-size: x-large;
    font-weight: bold;
    padding: 10px;
    margin-right: -15px;
}

.valett-period-percent-gauge {
    text-align: center;
    margin-right: 15px;
}

    .valett-period-percent-gauge > a > .k-gauge {
        display: inline-block;
        text-align: center;
        vertical-align: middle;
    }

span.valett-period-percent-gauge {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    justify-content: center;
    align-items: center;
}

.valett-period-percent-gauge-imageLayer {
    /*background: #a94442;*/
    font-size: larger;
    width: 140px;
    height: 140px;
    position: absolute;
    top: 79px;
    left: 95px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.valett-period-percent-gauge-imageLayer-content {
    /*background: #000000;*/
    width: 90px;
    height: 90px;
    line-height: 90px;
    text-align: center;
}



.valett-period-textblock {
    clear: both;
    padding-left: inherit;
}

.valett-customer-main-pagetitle {
    font-weight: bold;
    font-size: 30px;
    text-align: center;
}

.valett-customer-second-pagetitle {
    font-size: 20px;
}

ul {
    padding: 0;
    list-style: none;
}

li {
    /*border-bottom: 1px solid #dddddd;*/
}


/* MADECHOICES */

.choiceGroup-editTemplate {
    width: 100%;
    text-align: center;
    background: rgba(0, 0, 0, 0.19);
}

a:hover {
    text-decoration: none;
}

a:focus {
    text-decoration: none;
}

a:active {
    text-decoration: none;
}

.madechoices-choicegroup-column {
    width: 18%;
    position: relative;
    min-height: 1px;
    /*padding-right: 15px;
    padding-left: 15px;
    padding-bottom: 15px;*/
    padding: 15px;
    float: left;
}

.madechoices-choicegroup-container {
    padding-right: 10px;
    padding-top: 5px;
    text-align: center;
}


.madechoices-choicegroup-container-noitems {
    padding: 10px;
    border-radius: 3px;
}

.madechoices-choicegroup-container-hasitems {
    padding: 10px;
    border-radius: 3px;
}

/*.madechoices-choicegroup-container-bottom {
    height: 50%;
    padding: 10px;
    border-left: 2px solid #DE7733;
    border-right: 2px solid #DE7733;
    border-bottom: 2px solid #DE7733;
    color: #818896;
    background: #FFFFFF;
    
    
    
}*/

/*.madechoices-choicegroup-container-bottom ul {	
	padding: 0;
	list-style: none;
}

.madechoices-choicegroup-container-bottom li {
	border-bottom: 1px solid #dddddd;	
}*/


.madechoices-choicegroup-text {
    /*clear: both;*/
    word-wrap: break-word;
}

.madechoices-choicegroup-icon {
    float: right;
}

.madechoices-choicegroup-heading {
    font-weight: bold;
}

.madechoices-choicegroup-heading-price {
    font-weight: bold;
    font-size: 30px;
}

.madechoices-room-name {
    font-weight: bold;
    font-size: larger;
}

.madechoices-total-sum-left {
    font-weight: bold;
    float: left;
    width: 70%;
}

.madechoices-total-sum-right {
    float: right;
    width: 30%;
}



/* OLD MADECHOICES */

/*.madechoices-choicegroupitem-column {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    padding-top: 15px;
    float: left;
    width: 33.33333333%;
}*/

.madechoices-choicegroupitem-container#chosen {
    /*border: 2px solid;*/
}

.madechoices-list-rooms {
}

/* The big choicegroupitems div are hidden by default */
.madechoices-choicegroupitems {
    /* display: none; */
}



.madechoices-choicegroup-heading {
    font-weight: bold;
    font-size: larger;
}

.madechoices-choicegroup-itemlist {
}

.madechoices-choicegroup-item li {
    list-style: none;
}

.madechoices-choicegroup-item-text {
    /*font-style: italic;*/
}

.madechoices-choicegroup-item-price {
    font-weight: bold;
    font-size: 1.4em;
}

.madechoices-choicegroup-item-chosen {
}

.madechoices-choicegroup-item-name-title {
    width: 100%;
    text-align: center;
    font-weight: bold;
    font-size: medium;
    /*padding-bottom: 10px;*/
}

.madechoices-choicegroup-item-presets {
    padding-bottom: 10px;
    text-align: center;
}

.madechoices-choicegroup-item-moreinfo {
    text-align: left;
}

.madechoices-choicegroup-item-name {
    /*display: block;*/
    min-height: 60px;
}

.madechoices-choicegroup-item-image {
    width: 150px;
    height: 150px;
    border-radius: 10px;
}

#fade {
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 1001;
    -moz-opacity: 0.7;
    opacity: .70;
    filter: alpha(opacity=70);
}

#light {
    display: none;
    position: fixed;
    top: 20%;
    left: 30%;
    border: 2px solid #000;
    background: #CCC;
    z-index: 1002;
    overflow: visible;
    border-radius: 3px;
}

.madechoices-choicegroup-item-button {
    width: 100%;
    text-align: right;
    padding-top: 10px;
}

.madechoices-choicegroup-selecteditem-icon {
    position: absolute;    
    background: url("../images/Icons/Chosen_checkbox.png");
    width: 32px;
    height: 32px;
    left: 158px;
    bottom: 143px;
}

/*.choiceGrp-selecteditem-icon {
    position: absolute;    
    background: url("../images/Icons/Chosen_checkbox.png");
    width: 32px;
    height: 32px;
    right: -10px;
    top: -10px;
}*/

.madechoices-choicegroup-item-name-Desc {
    width: 100%;
    text-align: center;
    font-weight: bold;
    font-size: medium;
    padding-top: 10px;
}

.madechoices-instructions-error {
}

.madechoices-period-sum {
    font-weight: bold;
}

.madechoices-total-sum {
    font-weight: bold;
}

/* MADE CHOICES EDIT TOOLTIP*/


.tooltip-example {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip-example-title {
    font-weight: bold !important;
    font-size: large !important;
}

.tooltip-example-content {
    width: 100%;
    background: #FFFFFF;
    border-radius: 3px;
    /*color: #818896;*/
    font-size: 14px;
}

.tooltip-example > div {
    text-align: center;
    /*color: #818896;*/
    line-height: 1.5;
    /*background: #4dffdb;*/
    background-clip: padding-box;
    box-shadow: 0 0px 2px rgba(0, 0, 0, 0.5);
    /*border: 5px solid #4dffdb;*/
    border-radius: 3px;
    position: absolute;
    width: 350px;
    right: 0%;
    margin-left: -175px;
    padding: 0px 5px 5px 5px;
    bottom: 100%;
    margin-bottom: 10px;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

    .tooltip-example > div:before, a > div:after {
        content: "";
        position: absolute;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        top: 100%;
        left: 80%;
        margin-left: -10px;
    }

    .tooltip-example > div:before {
        /*border-top: 10px solid #4dffdb;*/
        margin-top: 5px;
    }

    .tooltip-example > div:after {
        /*border-top: 10px solid #4dffdb;*/
        margin-top: -2px;
        z-index: 1;
    }

.tooltip-example:hover > div {
    visibility: visible;
    opacity: 1;
}


/* ------ MADE CHOICES EDIT TOOLTIP END -----*/







/* VALETT-SUMMARY */


.valett-summary-col-md-12 {
    width: 100%;
    position: relative;
    float: left;
    /*border-top-right-radius: 16px;*/
}

.valett-summary {
    clear: both;
}

.valett-summary-imagetile {
    /*min-height: 300px;*/
    background-color: #000000;
    width: 100%;
    text-align: center;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

img.valett-summary-imagetile-image {
    width: 100%;
    /*float: left;*/
    clear: both;
    opacity: 0.3;
}

.valett-summary-name {
    font-size: x-large;
    font-weight: bold;
    /*font-family: 'proxima_nova', sans-serif;*/
    color: #FFFFFF;
    width: 100%;
    /*border: 1px solid #4dffdb;*/
}

/*.overlay {
    width: 100%;
    height: 70px;        
    position: absolute;
    top: 0px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border: 1px solid #4dffdb;       
}

.overlay2 {
    width: 100%;
    height: 153px;        
    position: absolute;
    top: 70px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border: 1px solid #4dffdb;   
}*/


.overlay {
    width: 100%;
    height: 223px;
    position: absolute;
    top: 0px;
    /*top: 53px;*/
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

/*.overlay:hover {
    text-decoration: underline;
    color: #FFFFFF;
}*/

.icon-image {
    width: 100px;
}

    .icon-image:hover {
        width: 120px;
    }

/*.valett-summary-imagetile-image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  background-color: red;
  z-index: 200;
}*/
/*.valett-summary-imagetile-image-overlay:hover {
  display: block;
}*/


.valett-summary-padlock-locked {
    float: right;
    font-size: x-large;
    font-weight: bold;
    padding: 10px;
    width: 60px;
    height: 54px;
    /*border-radius: 50px, 9px, 50px, 0px;*/
    /*border-top-left-radius: 50px;
    border-top-right-radius: 9px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 0px;*/
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 0px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.valett-summary-padlock-unlocked {
    float: right;
    font-size: x-large;
    font-weight: bold;
    padding: 10px;
    width: 54px;
    height: 54px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 0px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.valett-summary-image-edit {
    float: right;
    font-size: x-large;
    font-weight: bold;
    padding: 10px;
    width: 54px;
    height: 54px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 0px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


.valett-summary-period-emphasized {
    font-weight: 700;
    padding: 10px;
}

.valett-summary-period-emphasized-graph {
    display: inline-block;
}

.valett-summary-periods {
}

.valett-summary-periods-period {
    /*font-size: small;*/
    /*width: 33%;*/
    float: left;
    padding-left: 20px;
    padding-top: 10px;
    /*border: 1px solid #000000;*/
    text-align: center;
    position: relative;
}

.valett-summary-periods-period-text {
}

.valett-summary-periods-period-text-name {
    /*font-size: larger;*/
    width: 100%;
}

.valett-summary-periods-period-text-numbers {
}

.valett-summary-periods-period-graph {
    height: 70px;
    width: 70px;
}

.valett-summary-periods-period-image-checked {
    height: 70px;
    width: 70px;
    background: url("../images/graphCheckmark70px.png");
}

.valett-summary-periods-period-image-locked {
    height: 70px;
    width: 70px;
    background: url("../images/graphLockedRed70px.png");
}

.valett-summary-periods-period-graph-imageLayer {
    font-size: larger;
    width: 70px;
    height: 70px;
    position: absolute;
    bottom: 0px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.valett-summary-periods-period-graph-imageLayer-content {
    /*background: #a94442;*/
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    /*vertical-align: middle;*/
}

/* VALETT-PERIOD */

/*.valett-period-choiceGroups
{
    padding-top: 40px;    
}*/








/**********************************************************
 *  Backoffice area
 **********************************************************/

/* CHOICEGROUPS */
.choicegroups-residencetypedescription {
    font-weight: bold;
}

.choicegroups-period-container {
    border-top: 1px dotted;
    margin-top: 1em;
}

.choicegroups-period-deadline {
    font-style: italic;
}

.choicegroups-description {
    font-size: smaller;
}

/* RESIDENCE TYPES */


/*TODO: Flytta alla login klasser nedan till egen css under Account arean och importera i alla views under Account. */
/**********************************************************
 *  Login area
 **********************************************************/

/*.login-body-content {
    align-content: center;    

}*/

/*.login-col-md-10 {
    width: 200px;
  }*/

.login-valett-title {
    font-size: 30px;    
    text-align: right;
    margin-right: 100px;
    margin-top: 40px;
}


/*Varför blir textboxen gul när man väljer tidigare värde?*/

.login-block input#Username {
    background: #fff url('../images/login_user.png') 20px top no-repeat;
    background-size: 16px 80px;
}

    .login-block input#Username:focus {
        background: #fff url('../images/login_user.png') 20px bottom no-repeat;
        background-size: 16px 80px;
    }

.login-block input#Password {
    background: #fff url('../images/login_password.png') 20px top no-repeat;
    background-size: 16px 80px;
}

    .login-block input#Password:focus {
        background: #fff url('../images/login_password.png') 20px bottom no-repeat;
        background-size: 16px 80px;
    }

.login-block input#ConfirmPassword {
    background: #fff url('../images/login_password.png') 20px top no-repeat;
    background-size: 16px 80px;
}

    .login-block input#ConfirmPassword:focus {
        background: #fff url('../images/login_password.png') 20px bottom no-repeat;
        background-size: 16px 80px;
    }

.login-block input asp-for:active, .login-block input:focus {
    /*border: 1px solid #328953;*/
    border: 1px solid #0A3575;
}

.login-block input#RememberMe {
    margin: 3px 0 0;
    margin-bottom: 1px \9;
    line-height: normal;
    text-align: center;
    width: 15px;
    height: 15px;
}

/*.login-block input {
        padding: 0 20px 0 12px !important;
    }*/

.login-option {
    /*display: flex;*/
    justify-content: space-between;
}

.full-width {
    width: 100%;
}

.login-block button {
    background: #ECECEC;
    /*border-radius: 15px;*/
    padding: 10px 20px;
    display: block;
    /*font-family: arial;*/
    font-weight: bold;
    color: #7f7f7f;
    text-decoration: none;
    text-shadow: 0px 1px 0px #fff;
    border: 1px solid #ccc;
    margin: 0px auto;
    margin-bottom: 10px;
    /*box-shadow: 0px 2px 1px white inset, 0px -2px 8px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);*/
    -webkit-transition: box-shadow 0.5s;
}

login-block button i {
    float: right;
    margin-top: 2px;
}

.login-block button:hover {
    /*box-shadow: 0px 2px 1px white inset, 0px -2px 20px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);*/
}

.login-block button:active {
    /*box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5) inset, 0px -2px 20px white, 0px 1px 5px rgba(0, 0, 0, 0.1), 0px 2px 10px rgba(0, 0, 0, 0.1);*/
    background: -webkit-linear-gradient(top, #d1d1d1 0%,#ECECEC 100%);
    border: 1px solid #ccc;
}


.login-space {
    text-align: left;
    display: flex;
}

    .login-space label {
        padding-left: 4px;
        color: #303030;
        font-weight: bold;
        text-decoration: none;
        font-size: small;
    }

.login-text-danger {
    font-weight: bold;
    color: #a94442;
}