.sprite {
    background-image: url('../../Shared/Images/sprites.png');
    background-repeat: no-repeat;
    display: inline-block;
}

.sprite-accepted {
    width: 154px;
    height: 41px;
    background-position: -5px -5px;
}

.sprite-calendar_icon {
    width: 70px;
    height: 67px;
    background-position: -5px -56px;
}

.sprite-check {
    width: 43px;
    height: 42px;
    background-position: -169px -5px;
}

.sprite-denied {
    width: 141px;
    height: 40px;
    background-position: -85px -57px;
}

.sprite-down {
    width: 14px;
    height: 14px;
    background-position: -85px -107px;
}

.sprite-error {
    width: 16px;
    height: 16px;
    background-position: -109px -107px;
}

.sprite-information {
    width: 16px;
    height: 16px;
    background-position: -135px -107px;
}

.sprite-information-white {
    width: 16px;
    height: 16px;
    background-position: -161px -107px;
}

.sprite-left {
    width: 40px;
    height: 40px;
    background-position: -187px -107px;
}

.sprite-left_inactive_mnet {
    width: 35px;
    height: 34px;
    background-position: -5px -157px;
}

.sprite-left_mnet {
    width: 33px;
    height: 32px;
    background-position: -50px -157px;
}

.sprite-loader {
    width: 31px;
    height: 31px;
    background-position: -93px -157px;
}

.sprite-recurring {
    width: 32px;
    height: 32px;
    background-position: -134px -157px;
}

.sprite-requiredIcon {
    width: 99px;
    height: 34px;
    background-position: -50px -199px;
}

.sprite-right {
    width: 40px;
    height: 40px;
    background-position: -176px -157px;
}

.sprite-right_inactive_mnet {
    width: 35px;
    height: 34px;
    background-position: -222px -5px;
}

.sprite-right_mnet {
    width: 33px;
    height: 32px;
    background-position: -236px -49px;
}

.sprite-wait {
    width: 153px;
    height: 39px;
    background-position: -279px -5px;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

    *::before, *::after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

html {
    background: #fff;
    height: 100%;
    font-size: 10px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    margin: 0;
    padding: 0;
    font-family: Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
    font-size: 100%;
    background: #fff;
    height: 100%;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
}

#header, #footer {
    width: 100%;
    background: rgba(255,255,255,1);
    background-color: #fff;
    margin-bottom: 1em;
}

#container {
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}

#main {
    width: 100%;
}

.wrapper {
    margin: 0 auto;
    position: relative;
    width: 800px;
}

#content {
    font-size: 14px;
    line-height: 1.5em;
    overflow: auto;
    background-color: #fff;
}

#logo {
    padding-top: 16px;
    float: left;
}

.picture {
    height: 100px;
    margin-right: 20px;
    margin-bottom: 10px;
}

.left {
    float: left;
}

.right {
    float: right;
}

.clear {
    clear: both;
}

.full {
    width: 100%;
}

.hidden {
    display: none;
}

.white {
    color: #fff;
}

.text-right {
    text-align: right;
}

.hiddenFormField {
    position: absolute;
    visibility: hidden;
}

fieldset {
    border-radius: 6px;
    background: white;
    margin-bottom: 1em;
}

td {
    padding-right: 12px;
}

h1 {
    font-size: 1.5em;
    margin: 20px 0;
    padding: 0;
}

input, textarea {
    font-family: Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif !important;
}

.active {
    text-decoration: underline;
}

.summaryAppDate {
    display:none;
}

.dateDetails {
    text-align: center;
}

.dayDIV {
    width: 90%;
}


.immediateCallbackDIV {
    cursor: pointer;
    float: right;
    text-align: right;
    margin-bottom: 20px;
    width: 40%;
}

.subTitleImmediateCallback {
    float: left;
    width: 60% !important;
}

.firstLine, .secondLine {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    text-align: center;
}

.currentTimeDIV {
    width: 100%;
    text-align: right;
    padding: 20px;
}

.orangeDIVBox {
    background-color: #D9D9D9;
    border-radius: 5px;
    width: 100%;
    padding: 10px 10px;
    text-align: center;
}

.calenderInnerDIV {
    display: inline-block;
    background-color: white;
    border: 2px solid black;
    border-radius: 5px 5px 5px 5px;
    width: 400px;
    height: 80px;
}


.subPageTitle {
    font-size: 0.7em;
    display: block;
    line-height: 1.4;
    font-weight: bold;
    margin-bottom: 10px;
}

.SubHeaderTitle {
    display: none;
}


.sectionTitle {
    width: 100%;
    background-color: #7F7F7F;
    color: #ffffff;
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
}

.formTitle {
    float: left;
    font-size: 2em;
    font-weight: bold;
    min-height: 100px;
    text-align: center;
    padding-top: 30px;
    text-align: left;
    max-width: 70%;
}

.sectionSubTitle {
    display: block !important;
    width: 100%;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

.subRequest:hover, .collapsed:hover, .timeSlot:hover {
    cursor: pointer;
    background-color: #7F7F7F;
    color: #fff;
}

.formFieldLabel {
    float: left;
    padding: 10px 0;
    width: 30%;
    font-weight: normal;
}

.formCheckboxLabel {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.errorSummary {
    display: none;
}

.error, .errorText {
    color: red !important;
    width: 65% !important;
    font-weight: normal;
}

.errorContainer .error {
    font-weight: normal;
    width: 90% !important;
    float: none !important;
}

.fieldMargin {
    margin-left: 17.5%;
    margin-right: 17.5%;
}

.checkBoxLeftDIV {
    width: 30%;
    float: left
}

.checkBoxMainDIV {
    width: 65%;
    float: left
}

.checkbBoxInputContainer {
    max-width: 10%;
}

.checkBoxLabelContainer {
    max-width: 90%;
}

.requestContainer, .employeeContainer {
    margin-bottom: 1em;
    float: left;
    width: 50%;
    color: white;
    padding-left: 5% !important;
    padding-right: 5% !important;
    border: 3px solid #ffffff;
}

    .requestContainer:nth-child(even), .employeeContainer:nth-child(even) {
        padding-left: 5% !important;
        padding-right: 5% !important;
    }

.ticketMenuItem {
    margin-bottom: 1em;
    width: 100%;
    color: white;
    border: 3px solid #ffffff;
}

.toolTipDIV {
    display: none;
}

.calenderLogo {
    width: 70px;
}

.root, .subRequest {
    cursor: pointer;
    text-align: center;
    padding: 20px;
    min-height: 40px;
    font-weight: bold;
    font-size: 1.2em;
    width: 100%;
}


.root {
    background-color: #D9D9D9;
    color: black;
    border-radius: 5px;
}

    .root:hover {
        background-color: #7F7F7F;
        color: #ffffff;
    }

    .root:focus {
        background-color: #263661;
        color: #ffffff;
    }

.subRequest {
    background-color: #eaeaea;
    color: black;
    text-align: left;
}

.summaryDIV, .toolTipDIV, .noAppointmentsDIV {
    margin-bottom: 10px;
    padding: 1em;
    width: 100%;
    border: 0 solid #f2a833;
    display: none;
}

.noAppointmentsDIV {
    display: block;
}

.summaryDIV.statusNoError, .summaryDIV.statusError {
    border: none;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    border-radius: 5px;
    padding: 12px;
}

.summaryDIV.statusNoError {
    background-color: #263661;
    color: white !important;
}

.summaryDIV.statusError {
    background-color: #263661;
    color: white !important;
}

.summaryDIV2 {
    border: none;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    border-radius: 5px;
    padding: 12px;
    margin-bottom: 10px;
    padding: 1em;
    width: 100%;
    background-color: #263661;
    display: none;
}

.daysection {
    background-color: #fff;
    width: 100%;
    padding: 5px;
    margin: 5px;
    text-align: center;
}

    .daysection.opened > .header {
        border-bottom: solid 1px black;
    }

.leftNav, .rightNav {
    width: 5%;
    height: 100%;
}

.dayHeadLine {
    text-align: center;
    color: black;
    font-weight: bold;
    font-size: 1em;
    min-height: 45px;
}

.checkbox-control {
    float: none !important;
    width: 5% !important;
    display: inline;
    height: auto;
}

#statusMsgDIV {
    color: white !important;
}

#captchaDetails {
    text-align: center;
    display: none;
    margin-bottom: 20px;
}


.appointmentDayDIV {
    float: left;
    width: 33%;
    height: 100%;
    padding: 10px;
    padding-left:1px;
}

.appointmentDayDIV, .even {
    background-color: #D9D9D9;
}


.selectedTimeSlot, .selectedElem {
    background-color: #263661 !important;
    color: white !important;
}

.arrow {
    width: 100%;
    display: none;
}


.languageSelector {
    position: absolute;
    top: 30px;
    right: 0;
    font-size: .7em;
}

.languageSelector a {
    color: #7F7F7F;
    font-size: 0.7em;
    margin-left: 3px;
    margin-right: 3px;
    text-decoration: none;
    line-height: 1em;
}

.languageSelector a span {
    text-decoration: underline;
}

.language-flag {
    height: 1em;
    vertical-align: text-bottom;
    padding: 0 4px 0 8px;
    border: 0;
}

.daysectionText {
    width: 90%;
}


.additionalBookingHint {
    float: left;
    width: 65% !important;
    font-size: 1em;
}



.arrowDown {
    height: 14px;
    margin-top: 3px;
}


.oceanLink {
    color: grey;
    margin-bottom: 15px;
    margin-right: 10px;
}

.stornoLink {
    color: white;
}

#phoneError {
    display: none;
}

.emailMismatchDIV {
    color: red;
    font-weight: bold;
}


.phoneAdviceText {
    font-size: 9px;
    color: #a7a7a7;
}


.timeSlot {
    width: 100%;
}

.formBtns {
    margin-top: 20px;
    text-align: center;
    margin-bottom: 20px;
}

.employeePhoto {
    height: 50px;
    margin-right: 20px;
    margin-bottom: 10px;
}

.tooltip {
    position: absolute;
    z-index: 1070;
    display: block;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.4;
    filter: alpha(opacity=0);
    opacity: 0;
}

    .tooltip.in {
        filter: alpha(opacity=90);
        opacity: .9;
    }

    .tooltip.top {
        padding: 5px 0;
        margin-top: -3px;
    }

    .tooltip.right {
        padding: 0 5px;
        margin-left: 3px;
    }

    .tooltip.bottom {
        padding: 5px 0;
        margin-top: 3px;
    }

    .tooltip.left {
        padding: 0 5px;
        margin-left: -3px;
    }

.tooltip-inner {
    max-width: 200px;
    padding: 3px 8px;
    color: #000;
    text-align: center;
    text-decoration: none;
    background: #fff;
    border-radius: 4px;
    border: solid 1px #000;
}

.tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}

.tooltip.top .tooltip-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 5px 5px 0;
    border-top-color: #808080;
}

.tooltip.top-left .tooltip-arrow {
    right: 5px;
    bottom: 0;
    margin-bottom: -5px;
    border-width: 5px 5px 0;
    border-top-color: #000;
}

.tooltip.top-right .tooltip-arrow {
    bottom: 0;
    left: 5px;
    margin-bottom: -5px;
    border-width: 5px 5px 0;
    border-top-color: #000;
}

.tooltip.right .tooltip-arrow {
    top: 50%;
    left: 0;
    margin-top: -5px;
    border-width: 5px 5px 5px 0;
    border-right-color: #000;
}


.tooltip.left .tooltip-arrow {
    top: 50%;
    right: 0;
    margin-top: -5px;
    border-width: 5px 0 5px 5px;
    border-left-color: #000;
}


.tooltip.bottom .tooltip-arrow {
    top: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #000;
}

.tooltip.bottom-left .tooltip-arrow {
    top: 0;
    right: 5px;
    margin-top: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #000;
}

.tooltip.bottom-right .tooltip-arrow {
    top: 0;
    left: 5px;
    margin-top: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #000;
}

.form-control {
    width: 65% !important;
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    height: auto;
}


#confirmAppointmentMenuDIV {
    padding: 30px 0;
    text-align: center;
}

.confirmationCodeTxt {
    width: 300px !important;
    display: inline-block;
    margin-left: 20px;
    margin-bottom: 20px;
}


.phoneTxt {
    width: 40% !important;
}

.countrySelect {
    width: 20% !important;
    margin-right: 5%;
}

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: bold;
}

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

    .btn:focus,
    .btn:active:focus,
    .btn.active:focus,
    .btn.focus,
    .btn:active.focus,
    .btn.active.focus {
        outline: thin dotted;
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px;
    }

    .btn:hover,
    .btn:focus,
    .btn.focus {
        color: #333;
        text-decoration: none;
    }

    .btn:active,
    .btn.active {
        background-image: none;
        outline: 0;
        -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    }

    .btn.disabled,
    .btn[disabled],
    fieldset[disabled] .btn {
        pointer-events: none;
        cursor: not-allowed;
        filter: alpha(opacity=65);
        -webkit-box-shadow: none;
        box-shadow: none;
        opacity: .65;
    }

.btn-default {
    color: #333;
    background-color: #fff;
    border-color: none;
}

    .btn-default:hover,
    .btn-default:focus,
    .btn-default.focus,
    .btn-default:active,
    .btn-default.active,
    .open > .dropdown-toggle.btn-default {
        color: #333;
        background-color: #e6e6e6;
        border-color: none;
    }

    .btn-default:active,
    .btn-default.active,
    .open > .dropdown-toggle.btn-default {
        background-image: none;
    }

    .btn-default.disabled,
    .btn-default[disabled],
    fieldset[disabled] .btn-default,
    .btn-default.disabled:hover,
    .btn-default[disabled]:hover,
    fieldset[disabled] .btn-default:hover,
    .btn-default.disabled:focus,
    .btn-default[disabled]:focus,
    fieldset[disabled] .btn-default:focus,
    .btn-default.disabled.focus,
    .btn-default[disabled].focus,
    fieldset[disabled] .btn-default.focus,
    .btn-default.disabled:active,
    .btn-default[disabled]:active,
    fieldset[disabled] .btn-default:active,
    .btn-default.disabled.active,
    .btn-default[disabled].active,
    fieldset[disabled] .btn-default.active {
        background-color: #fff;
        border-color: none;
    }

    .btn-default .badge {
        color: #fff;
        background-color: #333;
    }



fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

.btn-default {
    background-image: linear-gradient(to bottom,#263661 100%,#263661 100%);
    background-repeat: repeat;
    text-shadow: 0 0 0 #fff;
    border-color: none;
    color: white;
    outline: #263661;
}

    .btn-default:focus {
        background-image: linear-gradient(to bottom,#0F5e99 100%,#0F5e99 100%);
        background-repeat: repeat;
        text-shadow: 0 0 0 #fff;
        border-color: none;
        color: white;
        outline: #263661;
    }

    .btn-default:hover {
        background-image: linear-gradient(to bottom,#263661 100%,#263661 100%);
        background-repeat: repeat;
        text-shadow: 0 0 0 #fff;
        border-color: none;
        color: white;
        outline: #263661;
    }

.bg {
    display: none;
}

#requestDIV, #employeeDIV {
    margin-bottom: 20px;
}

.formFieldLabel + .form-control + label.error {
    margin-left: 30%;
}

.fieldMargin .form-control, .fieldMargin .error, .fieldMargin .errorText, .fieldMargin .checkBoxMainDIV, .fieldMargin .additionalBookingHint {
    width: 100% !important;
}

.fieldMargin .checkbBoxInputContainer .formField {
    width: auto !important;
}

.fieldMargin .phoneTxt {
    width: 65% !important;
}

.fieldMargin .countrySelect {
    width: 30% !important;
}

.no-text-decoration {
    text-decoration: none;
}

.requiredInfoDIV {
    margin-top: 1em;
    color: rgb(153, 153, 153);
}

.change-date-for-customer-hint {
    background: #333;
    height: 56px;
    color: white;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
    font-size: 16px;
}