/*-- Fonts --*/
@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Regular.eot') format('embedded-opentype');
    src: url('../fonts/Lato-Regular.ttf') format('truetype'), url('../fonts/Lato-Regular.woff') format('woff'), url('../fonts/Lato-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Lato Light';
    src: url('../fonts/Lato-Light.eot') format('embedded-opentype');
    src: url('../fonts/Lato-Light.ttf') format('truetype'), url('../fonts/Lato-Light.woff') format('woff'), url('../fonts/Lato-Light.woff2') format('woff2');
}

@font-face {
    font-family: 'Lato Hairline';
    src: url('../fonts/Lato-Hairline.eot') format('embedded-opentype');
    src: url('../fonts/Lato-Hairline.ttf') format('truetype'), url('../fonts/Lato-Hairline.woff') format('woff'), url('../fonts/Lato-Hairline.woff2') format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Regular.eot');
    src: url('../fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans-Regular.woff') format('woff'), url('../fonts/OpenSans-Regular.ttf') format('truetype'),
}

@font-face {
    font-family: 'Open Sans Light';
    src: url('../fonts/OpenSans-Light.eot');
    src: url('../fonts/OpenSans-Light.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans-Light.woff') format('woff'), url('../fonts/OpenSans-Light.ttf') format('truetype'),
}

@font-face {
    font-family: 'Open Sans Semibold';
    src: url('../fonts/OpenSans-Semibold.eot');
    src: url('../fonts/OpenSans-Semibold.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans-Semibold.woff') format('woff'), url('../fonts/OpenSans-Semibold.ttf') format('truetype'),
}

@font-face {
    font-family: 'Raleway Thin';
    src: url('../fonts/Raleway-Light.ttf') format('truetype');
}

/*-- variables --*/
@baseRowHeight: 22px;
@basePadding: 14px;
@primaryColor: #666666;
@secondaryColor: #0099cc;
@navDefaultColor: #666666;
@navHoverColor: #0099cc;
@navSelectedColor: #0099cc;
@primaryFont: 'Open Sans', sans-serif;
@primaryFontLight: 'Open Sans Light', sans-serif;
@primaryFontSemibold: 'Open Sans Semibold', sans-serif;
@secondaryFont: Lato, sans-serif;
@secondaryFontLight: 'Lato Light', sans-serif;
@secondaryFontSize: 18px;


@titleFontFamily1: 'Raleway Thin', sans-serif;
@titleFontFamily2: 'Open Sans Light', sans-serif;
@titleFontFamily3: 'Lato Light', sans-serif;

@title1FontSize: 52px;
@title2FontSize: 22px;
@title2FontSize: 20px;
@testBorderColor: none;

@bodyFontSize: 15px;
@fateIconBackgroundColor: #e8e8e8;

/*-- buttons --*/
//primary
@buttonPrimaryWidth: 256px;
@buttonPrimaryBackgroundColor: #0099cc;
@buttonPrimaryColor: #ffffff;
@buttonPrimaryFontFamily: 'Lato Light', sans-serif;
@buttonPrimaryBackgroundColorHover: #ffffff;
@buttonPrimaryColorHover: #0099cc;
@buttonPrimaryFontSize: 20px;
@buttonPrimaryBorderColorHover: #0099cc;

//secondary
@buttonSecondaryWidth: 256px;
@buttonSecondaryBackgroundColor: #ffffff;
@buttonSecondaryColor: #666666;
@buttonSecondaryFontFamily: 'Lato Light', sans-serif;
@buttonSecondaryBackgroundColorHover: #666666;
@buttonSecondaryColorHover: #ffffff;
@buttonSecondaryFontSize: 20px;
@buttonSecondaryBorderColorHover: #666666;

//3rd level
@button3rdLevelWidth: 142px;
@button3rdLevelBackgroundColor: #0099cc;
@button3rdLevelColor: #ffffff;
@button3rdLevelFontFamily: 'Lato Light', sans-serif;
@button3rdLevelBackgroundColorHover: #ffffff;
@button3rdLevelColorHover: #0099cc;
@button3rdLevelFontSize: 12px;
@button3rdLevelBorderColorHover: #0099cc;

/*layout*/


body {
    font-family: @primaryFont;
    color: @primaryColor;
}

#test-guide-line {
    background: url('images/grid_cell.png') repeat;
    width: 100%;
    height: 112%;
    z-index: 555;
    position: absolute;
}

h1, h2 {
    margin: 0;
    padding: 0;
    border-bottom: solid 1px @testBorderColor;
    color: #0099cc;
}

.row-1x {
    height: @baseRowHeight;
    display: block !important;
    border-bottom: solid 1px @testBorderColor;
}

.row-2x {
    height: @baseRowHeight * 2;
    display: block !important;
    border-bottom: solid 1px @testBorderColor;
}

.row-3x {
    height: @baseRowHeight * 3;
    display: block !important;
    border-bottom: solid 1px @testBorderColor;
}

.row-4x {
    height: @baseRowHeight * 4;
    display: block !important;
    border-bottom: solid 1px @testBorderColor;
}

.row-5x {
    height: @baseRowHeight * 5;
    display: block !important;
    border-bottom: solid 1px @testBorderColor;
}

.row-content-bottom {
    position: relative;
}

.base-bottom-right {
    position: absolute;
    right: @basePadding;
    bottom: 0;
}

.base-bottom-left {
    position: absolute;
    left: 3px;
    bottom: 0;
}

.site-nav li a.selected, nav-active {
    color: @navSelectedColor;
}

.footer a {
    color: @primaryColor;
}

.footer a:hover {
    color: @primaryColor;
}

/*-- user menu style --*/
.dropdown {
    position: relative;
}

.submenu {
    display: none;
    background-color: #ffffff;
    border: 1px solid #f0efef;
    position: absolute;
    right: 0px;
    z-index: 100;
    width: 340px;
    height: @baseRowHeight*7;
    padding: 22px;
    margin-top: 22px;
}

.dropdown {
    top: 5px;
    float: right;
}

.dropdown li a {
    color: #555555;
    display: block;
    font-family: arial;
    font-weight: bold;
    padding: 6px 15px;
    cursor: pointer;
    text-decoration: none;
}

.dropdown li a:hover {
    background: #155FB0;
    color: #FFFFFF;
    text-decoration: none;
}

a.account {
    background: url(images/arrow.png) right center no-repeat;
    padding-right: 12px;
    font-size: 13px;
    color: @primaryColor;
    font-family: @primaryFontLight;
}

a.account:hover {
    text-decoration: none;
    cursor: pointer;
}

.root {
    list-style: none;
}

.user-name {
    font-family: @primaryFontSemibold;
}

.menu-user-name {
    width: auto;
    font-family: @secondaryFontLight;
    font-size: 30px;
    color: @primaryColor;
}

.user-image {
    background: #d1d1d1;
    width: 64px;
    height: 64px;
    color: @primaryColor;
    font-size: 20px;
    font-family: @secondaryFont;
    text-align: center;
    line-height: 64px;
    display: inline-block;
}

.user-info {
    width: 64px;
    height: 64px;
    color: @primaryColor;
    font-size: 16px;
    font-family: @primaryFont;
    position: absolute;
    left: 98px;
    padding-top: 5px;
    display: inline-block;
    width: auto;
}

.btn {
    border-radius: 0;
}

.btn-primary {
    width: @buttonPrimaryWidth;
    background-color: @buttonPrimaryBackgroundColor;
    color: @buttonPrimaryColor;
    font-family: @buttonPrimaryFontFamily;
    font-size: @buttonPrimaryFontSize;
    height: @baseRowHeight*2;
}

.btn-primary:hover {
    background-color: @buttonPrimaryBackgroundColorHover;
    color: @buttonPrimaryColorHover;
    border: solid 1px @buttonPrimaryBorderColorHover;
}

.btn-secondary {
    width: @buttonSecondaryWidth;
    background-color: @buttonSecondaryBackgroundColor;
    color: @buttonSecondaryColor;
    font-family: @buttonSecondaryFontFamily;
    font-size: @buttonSecondaryFontSize;
    border: solid 1px @buttonSecondaryBorderColorHover;
    height: @baseRowHeight*2;
}

.btn-secondary:hover {
    background-color: @buttonSecondaryBackgroundColorHover;
    color: @buttonSecondaryColorHover;
}

.btn-3rdlevel {
    width: @button3rdLevelWidth;
    background-color: @button3rdLevelBackgroundColor;
    color: @button3rdLevelColor;
    font-family: @button3rdLevelFontFamily;
    font-size: @button3rdLevelFontSize;
}

.btn-3rdlevel:hover {
    background-color: @button3rdLevelBackgroundColorHover;
    color: @button3rdLevelColorHover;
    border: solid 1px @button3rdLevelBorderColorHover;
}

.btn-user-profile {
    position: absolute;
    bottom: 0;
}

.user-sign-out {
    width: 100%;
    margin-top: 22px;
    border-top: 1px solid #f0efef;
}

.user-sign-out a {
    color: @primaryColor;
}

.user-sign-out a:hover {
    color: @primaryColor;
    text-decoration: underline;
}

.slide-menu {
    background-color: #f0efef;
    overflow: hidden;
}

.slide-header {
    width: 100%;
    height: @baseRowHeight*2;
    background-color: aqua;
    background: url('images/genea-logo-mobile.jpg') left top no-repeat;
    background-size: 101px 32px;
    margin: @baseRowHeight;
}

.value-label {
    text-align: left !important;
}

.sub-title {
    font-family: @secondaryFontLight;
    font-size: @secondaryFontSize;
}

//div.caption:hover,
a.thumbnail:hover + div.caption, a.thumbnail:focus div.caption {
    background-color: #ffffff;
    color: @primaryColor;
    border: none;
    cursor: pointer;
}

.embryos-cell {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    float: none;
    margin: 0;
    padding: 0;
}

.embryos-nav {
    display: block;
    padding: 15px 0;
}

.embryos-nav:hover {
    background-color: #eee;
}

.pagination {
    margin: 0;
    padding: 0;
    text-align: center;
    webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    z-index: 10;
}

.pagination > a > span {
    padding: 7px 9px !important;
    font-family: 'Lato Light', sans-serif !important;
    border-radius: 50% !important;
    display: inline-block;
}

.pagination > a:hover {
    text-decoration: none;
}

.pagination-bullet {
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    background-color: #d1d1d1 !important;
    color: #ffffff !important;
    font-size: 14px;
    padding: 6px 8px !important;
    margin: 6px !important;
}

.pagination-bullet-active {
    width: 44px !important;
    height: 44px !important;
    background-color: #0099cc !important;
    margin: 0 !important;
    padding-right: 10px !important;
    line-height: 30px !important;
    font-size: 20px !important;
    padding: 9px 11px !important;
}

.pagination-bullet-disabled {
    color: #bcdff0 !important;
    background-color: #ffffff !important;
    font-size: 14px;
    width: 32px !important;
    height: 32px !important;
    padding: 6px 8px !important;
    margin: 6px !important;
}

video::-webkit-media-controls {
    display: none !important;
}

.logo-header {
    height: 66px;
    background-image: url('images/genea-logo.jpg');
    background-position: center bottom;
    background-repeat: no-repeat;
    margin-top: 22px;
    margin-bottom: 44px;
}

.txt-control {
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid #666666;
    color: #333333;
    bottom: 0;
    left: 0;
    padding-bottom: 8px;
    background-repeat: no-repeat;
    background-position: center right;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    border-radius: 0;
    padding-left: 0;
}

.txt-password {
    background-image: url('images/password_icon.png');
}

.input-validation-error {
    border-bottom: 1px solid #ff6600;
}

.field-validation-error {
    color: #ff6600;
    font-size: 13px;
}

*:focus {
    outline: 0px none transparent;
}

input:required {
    box-shadow: none;
}

::-ms-clear {
    display: none;
}

.non-clickable-menu-item,
.non-clickable-menu-item:hover {
    cursor: default !important;
    color: #999999 !important;
}


.caption-color-active {
    color: #0099cc;
}

.caption-color-frozen {
    color: #f58026;
}

/* Override jQuery UI Dialog styles, to work with jQuery Timeout and Bootstrap */
.ui-dialog-buttonset {
    font-size: 13px;
    float: none;
    text-align: center;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: none;
}

/*Environment*/
.environment-local {
    background-color: deepskyblue;
    text-align: center;
    font-weight: bold;
}

.environment-local::after {
    content: 'Local';
}

.environment-development {
    background-color: #d2cefb;
    text-align: center;
    font-weight: bold;
}

.environment-development::after {
    content: 'Develoment'
}

.environment-staging {
    background-color: #ffb6c1;
    text-align: center;
    font-weight: bold;
}

.environment-staging::after {
    content: 'Staging'
}

.environment-uat {
    background-color: #90ee90;
    text-align: center;
    font-weight: bold;
}

.environment-uat::after {
    content: 'UAT'
}

.custom-message {
    margin-top: 10px;
    margin-bottom: 0px;
}

@media (max-width: 761px) {
    .select-day-title {
        display: none;
    }
}

@media (max-width: 991px) {
    .body-background {
        margin: 0 -10px;
        padding: 0 10px;
        border-top: 3px solid #0099cc;
        background-color: #fff;
    }

    .back-icon {
        background-image: url('images/back_icon.png');
        background-repeat: no-repeat;
        background-position: center center;
        width: 26px;
        height: 34px;
        display: block;
        background-size: contain;
        z-index: 9;
        left: 15px;
    }

    .back-text {
        font-family: @secondaryFontLight;
        color: #0099cc;
        font-size: 15px;
        top: 10px;
        left: 15px;
    }

    .non-dashboard-background {
        background-position-y: -10px !important;
    }

    h1 {
        font-family: @titleFontFamily1;
        font-size: 30px;
        bottom: -6px;
        color: #0099cc;
        padding-left: 10px;
    }

    h2 {
        font-family: @titleFontFamily2;
        font-size: 18px;
    }

    h3 {
        font-family: @titleFontFamily3;
        font-size: 20px;
        color: @navDefaultColor;
        margin-bottom: 5px;
        margin-top: 5px;
    }

    .genea-logo {
        background: url('images/genea-logo-mobile.jpg') center center no-repeat;
        background-size: 101px 32px;
    }

    .account {
        width: 34px;
        height: 34px;
        background: url('images/user.png') center center no-repeat;
        background-size: 34px 34px;
        margin-top: 4px;
    }

    .account-active {
        background: url('images/user_active.png') center center no-repeat;
        background-size: 34px 34px;
    }

    .footer {
        font-size: 10px;
        font-family: @primaryFontLight;
    }

    .day-index-title {
        display: inline-block;
    }

    .day-image-container {
        margin-top: @baseRowHeight;
        margin-left: auto;
        margin-right: auto;
    }

    .dashboard-info {
        top: 0;
    }

    .day-details-container {
        background-color: #e5f5fa;
        padding: 24px @baseRowHeight 16px @baseRowHeight;
        font-size: 18px;
        font-family: @secondaryFontLight;
        position: relative;
        line-height: @baseRowHeight;
    }

    .day-buttons-container {
        /*height:@baseRowHeight;*/
        background: linear-gradient(0deg, #ffffff 50%, #e5f5fa 50%);
        display: inline-block;
        width: 100%;
        text-align: center;
    }

    .btn-dashboard {
        margin: @basePadding @basePadding 0 @basePadding;
    }

    .day-pointer {
        width: 25px;
        height: 12px;
        background: url('images/arrow_mobile.png') center center no-repeat;
        background-size: 25px 12px;
        position: absolute;
        left: 70px;
        top: -12px;
    }

    .day-pointer-1 {
        left: 75px;
    }

    .day-pointer-3 {
        left: 150px;
    }

    .day-pointer-5 {
        left: 220px;
    }

    .day-pointer-6 {
        left: 250px;
    }

    .nav-active {
        display: block;
        content: '';
        border-left: 9px solid @navSelectedColor;
        border-bottom: none !important;
        border-top: none !important;
        background-color: #d1d1d1;
    }

    .site-nav {
        padding: 0;
        margin: 0;
        list-style-type: none;
    }

    .site-nav li {
        height: @baseRowHeight*2;
        display: table;
        width: 100%;
    }

    .site-nav li a {
        text-decoration: none;
        padding-left: @baseRowHeight;
        font-family: @secondaryFontLight;
        color: #666666;
        font-size: 16px;
        height: 100%;
        vertical-align: middle;
        display: table-cell;
        border-top: 1px solid #d1d1d1;
        border-bottom: 1px solid #d1d1d1;
    }

    .site-nav li:first-child a {
        border-top: none !important;
    }

    .site-nav li:last-child a {
        border-bottom: 2px solid #d1d1d1;
    }

    .btn-primary, .btn-secondary {
        font-size: 18px;
        width: 203px;
    }

    .paging-container {
        text-align: center;
        clear: both;
    }

    .pagination-shortcut {
        background: url('images/day_arrow.png') center center no-repeat;
        height: 44px;
        width: 44px;
        border: 1px solid #666666;
        background-size: 9px 6px;
    }

    .pagination-shortcut-active {
        background: url('images/day_arrow_active.png') center center no-repeat;
        background-size: 9px 6px;
        background-color: #d1d1d1;
        border: none;
    }

    .pagination-wrapper {
        text-align: center;
    }

    .swiper-pagination {
        margin: 0;
        padding: 0;
    }

    .swiper-pagination > span {
        padding: 6px 8px !important;
        margin: 6px !important;
        font-family: @secondaryFontLight !important;
        border-radius: 50% !important;
        display: inline-block;
    }

    .swiper-pagination-bullet {
        border-radius: 50% !important;
        width: 32px !important;
        height: 32px !important;
        background-color: #d1d1d1 !important;
        color: #ffffff !important;
        font-size: 14px;
        padding: 6px 8px !important;
        margin: 6px !important;
    }

    .swiper-pagination-bullet-active {
        width: 44px !important;
        height: 44px !important;
        background-color: @buttonPrimaryBackgroundColor !important;
        margin: 0 !important;
        padding-right: 10px !important;
        line-height: 30px !important;
        font-size: 20px !important;
        padding: 6px 8px !important;
        margin: 6px !important;
    }

    .swiper-pagination-bullet-disabled {
        color: #bcdff0 !important;
        background-color: #ffffff !important;
        font-size: 14px;
        width: 32px !important;
        height: 32px !important;
        padding: 6px 8px !important;
        margin: 6px !important;
    }

    .HidePaging {
        display: none !important;
    }

    .thumbnail-container {
        width: 24vw;
        height: 24vw;
        display: inline-block;
        margin: 0 3px 3px 3px;
        padding: 0;
        position: relative;
    }

    .detail-container {
        width: 80vw;
        height: 80vw;
        display: inline-block !important;
    }

    .media-player > video {
        width: 100%;
        height: 100%;
        display: block !important;
    }

    .thumbnail, .detail-view {
        padding: 0;
        border-radius: 0;
        color: #666666;
        background-color: #be9e88;
    }

    .embryo-status {
        height: 23px;
        width: 23px;
        position: absolute;
        top: 0;
        left: 0;
    }

    .status-available-thumb {
        display: none !important;
    }

    .status-transffered-thumb {
        background-image: url('images/transferred_thumb.png');
        background-size: 100%;
        opacity: 0.90;
        filter: alpha(opacity=90); /* For IE8 and earlier */
        background-repeat: no-repeat;
        background-position: center;
        background-color: #fff;
    }

    .status-transffered-detail {
        background-image: url('images/transferred_thumb.png');
        opacity: 0.90;
        filter: alpha(opacity=90); /* For IE8 and earlier */
        background-repeat: no-repeat;
        background-position: center;
    }

    .status-frozen-thumb {
        background-image: url('images/frozen_thumb.png');
        background-size: 100%;
        opacity: 0.90;
        filter: alpha(opacity=90); /* For IE8 and earlier */
        background-repeat: no-repeat;
        background-position: center;
        background-color: #fff;
    }

    .status-frozen-detail {
        background-image: url('images/frozen_thumb.png');
        opacity: 0.90;
        filter: alpha(opacity=90); /* For IE8 and earlier */
        background-repeat: no-repeat;
        background-position: center;
    }

    .status-available {
        display: none;
    }

    .status-transffered {
        background-image: url('images/transferred_detail.png');
        background-repeat: no-repeat;
        background-color: @fateIconBackgroundColor !important;
        background-size: 70%;
        background-position: center;
    }

    .status-frozen {
        background-image: url('images/frozen_detail.png');
        background-repeat: no-repeat;
        background-color: @fateIconBackgroundColor !important;
        background-size: 70%;
        background-position: center;
    }

    div.caption {
        position: absolute;
        top: 0;
        right: 0;
        background-color: #fff;
        font-family: @secondaryFont;
        font-size: 12px;
        height: 23px;
        width: 23px;
        text-align: center;
        line-height: 22px;
        opacity: 0.90;
        filter: alpha(opacity=90); /* For IE8 and earlier */
    }

    .caption-title {
        font-size: 5px;
        font-family: @secondaryFont;
        position: absolute;
        top: -8px;
        padding-left: 3px;
    }

    .caption-body {
        font-size: 20px;
        font-family: @secondaryFont;
        position: relative;
        bottom: -3px;
        padding-left: 2px;
    }

    .caption-detail-title {
        font-size: 10px;
        //font-size: 2vw;
        font-family: @secondaryFont;
        position: absolute;
        top: -16px;
        left: 18px;
    }

    .caption-detail-body {
        font-size: 37px;
        //font-size: 4vw;
        font-family: $secondaryFont;
        //bottom: 7vw;
    }

    div.thumbnail-container > .caption-header {
        position: absolute;
        top: 0;
        background-color: #fff;
        right: 0px;
        font-size: 37px;
        font-family: @secondaryFont;
        width: 75px;
        height: 75px;
        line-height: 73px;
        opacity: 0.90;
        filter: alpha(opacity=90); /* For IE8 and earlier */
        //color:#fff;
        text-align: center;
        transition: visibility 0s, opacity 0.5s linear;
        padding: 5px;
    }

    .thumbnail-container > div.thumbnail:hover ~ div.caption-header,
    .thumbnail-container > div.thumbnail:hover ~ div.caption-header-video {
        visibility: hidden;
        opacity: 0;
    }

    div.caption-footer {
        background-color: #fff;
        width: 100%;
        height: @baseRowHeight*2;
        right: 0;
        position: absolute;
        bottom: 0;
        ///visibility: hidden;
        opacity: .90;
    }

    .thumbnail-container > div.thumbnail:hover ~ div.caption-footer,
    .caption-footer:hover {
        transition: visibility 0s, opacity 0.5s linear;
        visibility: visible;
        opacity: 0.75;
    }

    .media-player {
        width: 100%;
        height: 100%;
    }

    .media-player > .embryo-video {
        position: absolute;
    }

    .media-player button {
        background-color: transparent;
        border: none;
    }

    .play {
        background-image: url('images/play_desktop.png');
        background-repeat: no-repeat;
        height: 84px;
        width: 84px;
    }

    .pause {
        background-image: url('images/pause_desktop.png');
        background-repeat: no-repeat;
        height: 84px;
        width: 84px;
    }

    a.play-icon {
        background-image: url('images/play_icon.png');
        background-repeat: no-repeat;
        background-position: center center;
        width: 26px;
        height: 34px;
        display: block;
        left: 12px;
        top: 6px;
        position: relative;
        background-size: contain;
        z-index: 9;
    }

    a.pause-icon {
        background-image: url('images/pause_icon.png');
        background-repeat: no-repeat;
        background-position: center center;
        width: 26px;
        height: 34px;
        display: block;
        left: 12px;
        top: 6px;
        position: relative;
        background-size: contain;
        z-index: 9;
    }

    video.loading {
        background: #fff url(images/loader.gif) center center no-repeat;
        z-index: 999;
    }

    .embryos-container {
        display: table;
        padding: 0;
        margin-left: -10px;
        width: 105%;
        margin-right: -10px;
        margin-top: 2px;
    }

    .swiper-wrapper {
    }

    .swiper-container {
    }

    .swiper-slide {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    .btn-tab {
        width: 100%;
        height: @baseRowHeight*2;
        outline: none;
        background-repeat: no-repeat;
        background-position: center center;
        background-color: #fff;
    }

    .btn-image {
        background-image: url('images/photo_not_active_mobile.png');
        background-size: 29px 22px;
        border: 2px solid @primaryColor;
    }

    .btn-image-active {
        background-image: url('images/photo_active_mobile.png');
        background-size: 29px 22px;
        background-color: @secondaryColor;
        border: 2px solid @secondaryColor;
    }

    .btn-video {
        background-image: url('images/video_not_active_mobile.png');
        background-size: 29px 22px;
        border: 2px solid @primaryColor;
    }

    .btn-video-active {
        background-image: url('images/video_active_mobile.png');
        background-size: 29px 22px;
        background-color: @secondaryColor;
        border: 2px solid @secondaryColor;
    }

    #embryoPageIno {
        text-align: center;
        font-family: @secondaryFontLight;
        font-size: 32px;
        color: #666666;
        background-color: #e5f5fa;
        top: -22px;
        padding-top: 9px;
        width: 80%;
        margin: 0 auto;
        position: relative;
    }

    .embryo-info-container {
        position: relative;
        width: 98%;
        margin-top: -25px;
    }

    .embryo-pointer {
        margin: 0 auto;
        width: 25px;
        height: 12px;
        background: url('images/arrow_mobile.png') center center no-repeat;
        background-size: 25px 12px;
        position: relative;
        top: -22px;
    }

    a.download-embryos {
        background-image: url('images/download_desktop.png');
        width: 26px;
        height: 34px;
        display: block;
        left: 12px;
        top: 4px;
        position: relative;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .share-embryos {
        width: 44px;
        height: 44px;
        position: absolute;
        right: 0px;
        top: 0;
        background-image: url('images/share_desktop.png');
        background-repeat: no-repeat;
        background-position: center center;
    }

    .share-embryos:hover {
        background-color: #f6f5f5;
        background-image: url('images/share_active_desktop.png');
        cursor: pointer;
    }

    #menu * {
        padding: 0;
        margin: 0;
        font: 12px georgia;
        list-style-type: none;
    }

    #menu {
        width: 44px;
        height: 44px;
        position: absolute;
        right: 0px;
        top: 0;
    }

    #menu a {
        display: block;
        text-decoration: none;
    }

    #menu ul:hover {
        background: #e0dfdf;
    }

    a.share-icon {
        background-image: url('images/share_desktop.png');
        background-repeat: no-repeat;
        background-position: center center
    }

    a.share-icon:hover, .active-share {
        background-image: url('images/share_active_desktop.png');
        background-color: #f6f5f5;
    }

    a.twitter-icon {
        background-image: url('images/twitter_desktop.png');
        background-repeat: no-repeat;
        background-position: center center;
        width: 26px;
        height: 34px;
        display: block;
        left: 12px;
        top: 6px;
        position: relative;
        background-size: contain;
        z-index: 9;
    }

    a.facebook-icon {
        background-image: url('images/facebook_desktop.png');
        background-repeat: no-repeat;
        background-position: center center;
        width: 26px;
        height: 34px;
        display: block;
        left: 12px;
        top: 6px;
        position: relative;
        background-size: contain;
        z-index: 9;
    }

    a.instagram-icon {
        background-image: url('images/instagram_active_desktop.png');
        background-repeat: no-repeat;
        background-position: center center
    }

    /*a.twitter-icon:hover,
    a.facebook-icon:hover,
    a.instagram-icon:hover
    {
        background-color:#e0dfdf;
    }*/

    #menu ul li {
        float: left;
        width: 44px;
    }

    #menu ul li a {
        width: 44px;
        height: 44px;
    }

    #menu li {
        position: relative;
        float: left;
    }

    #menu ul li ul li {
        width: 44px;
        border: none;
        background: #F6f5f5;
        z-index: 1;
    }

    #menu ul li ul li:before {
        content: "";
        position: absolute;
        left: 5px;
        bottom: 0;
        height: 1px;
        width: 34px; /* or 100px */
        border-bottom: 1px solid #e0dfdf;
    }

    #menu ul li ul,
    #menu:hover ul li ul,
    #menu:hover ul li:hover ul li ul {
        display: none;
        list-style-type: none;
        width: 44px;
    }

    #menu:hover ul,
    #menu:hover ul li:hover ul,
    #menu:hover ul li:hover ul li:hover ul {
        display: block;
    }

    #menu:hover ul li:hover ul {
        position: absolute;
        margin-top: 0px;
    }

    #menu > ul > li:hover > ul {
        bottom: 100%;
        border-bottom: 0px solid #e0dfdf;
    }

    .welcome-image {
        background-image: url("images/welcome_mobile_bgrnd.png");
        width: 100%;
        height: 800px;
        background-position: center top;
        background-size: contain;
        background-repeat: no-repeat;
        background-color: #fff;
    }

    .welcome-title {
        position: absolute;
        top: 20px;
        text-align: center;
        width: 100%;
        font-size: 30px;
        color: #666;
        font-family: @secondaryFontLight;
    }

    .welcome-body {
        position: absolute;
        top: 400px;
        width: 90%;
        padding: 30px;
        font-family: @secondaryFontLight;
        color: #666;
        font-size: 16px;
    }

    .btn-welcome {
        position: absolute;
        bottom: 280px;
        right: 200px;
        width: 256px;
        background-color: #4DB5D8;
        color: #fff;
        font-family: @secondaryFontLight;
        font-size: 20px;
        height: 44px;
    }

    .welcome-button-container {
        padding: 10px;
        background: linear-gradient(0deg, #ffffff 50%, #ffffff 50%);
        display: inline-block;
        width: 100%;
        text-align: center;
        position: absolute;
        bottom: 70px;
    }

    .button.button-welcome {
        border-color: transparent;
        background-color: #0199CC;
        color: #fff;
    }
}

@media (min-width: 992px) {
    .body-background {
        margin: 0 -20px 0 -20px;
        padding: 0px;
        border-top: 3px solid #0099cc;
        background-color: #fff;
        width: auto;
        min-height: 500px;
    }

    .back-icon {
        background-image: url('images/back_icon.png');
        background-repeat: no-repeat;
        background-position: center center;
        width: 26px;
        height: 34px;
        display: block;
        background-size: contain;
        z-index: 9;
    }

    .back-text {
        font-family: @secondaryFontLight;
        color: #0099cc;
        font-size: 15px;
        top: 10px;
    }

    body {
        min-width: 970px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    h1 {
        font-family: @titleFontFamily1;
        font-size: 46px;
        color: #0099cc;
    }

    h2 {
        font-family: @titleFontFamily2;
        font-size: @title2FontSize;
    }

    h3 {
        font-family: @titleFontFamily3;
        font-size: 20px;
        color: @navDefaultColor;
        margin-bottom: 5px;
    }

    .genea-logo {
        background: url('images/genea-logo.jpg') left top no-repeat;
        height: 64px;
    }

    .footer {
        font-size: 13px;
        font-family: @primaryFontLight;
    }

    .day-index-title {
        display: inline-block;
        margin-bottom: @basePadding;
    }

    .day-image-container {
        margin-top: @baseRowHeight*2;
        margin-left: auto;
        margin-right: auto;
    }

    .dashboard-info {
        top: -3px;
        margin-bottom: 44px;
    }

    .day-details-container {
        background-color: #e5f5fa;
        padding: 26px @baseRowHeight 26px @baseRowHeight;
        font-size: @bodyFontSize;
        font-family: @secondaryFontLight;
        position: relative;
        line-height: @baseRowHeight;
    }

    .day-buttons-container {
        background: linear-gradient(0deg, #ffffff 50%, #e5f5fa 50%);
        display: inline-block;
        width: 100%;
        text-align: center;
    }

    .day-buttons-container > button {
        /*margin-top:@baseRowHeight;*/
    }

    .btn-dashboard {
        margin: 0 11px;
    }

    .day-pointer {
        width: 44px;
        height: 22px;
        background: url('images/arrow_desktop.png') center center no-repeat;
        position: absolute;
        top: -22px;
    }

    .day-pointer-1 {
        left: 135px;
    }

    .day-pointer-3 {
        left: 395px;
    }

    .day-pointer-5 {
        left: 650px;
    }

    .day-pointer-6 {
        left: 795px;
    }

    .nav-active {
        display: block;
        content: '';
        border-bottom: 3px solid @navSelectedColor;
        color: @navSelectedColor !important;
    }

    .site-nav {
        margin: 0;
        padding: 0;
        list-style-type: none;
        text-align: right;
        margin-top: 22px;
    }

    .site-nav li {
        display: inline;
    }

    .site-nav li a {
        text-decoration: none;
        margin-left: 40px;
        padding-bottom: 3px;
        display: inline-block;
        font-size: 18px;
        font-family: @secondaryFontLight;
        color: #666666;
    }

    .site-nav li a:hover {
        color: @navHoverColor
    }

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

    .thumbnail-container {
        width: 12vw;
        height: 12vw;
        display: inline-block;
        margin: 0 5px 5px 1px;
        padding: 0;
        position: relative;
    }

    .detail-container {
        width: 440px;
        height: 440px;
        display: inline-block !important;
        margin: 0 11px 11px 11px !important;
        padding: 0;
        position: relative;
    }

    .embryo-video {
        width: 100%;
        height: 100%;
        display: block !important;
    }

    .thumbnail, .detail-view {
        padding: 0;
        border-radius: 0;
        color: #666666;
        background-color: #be9e88;
    }

    .embryo-status {
        height: 44px;
        width: 44px;
        position: absolute;
        top: 0;
        left: 0;
    }

    .status-available-thumb {
        display: none;
    }

    .status-transffered-thumb {
        background-image: url('images/transferred_thumb.png');
        opacity: 0.90;
        filter: alpha(opacity=90); /* For IE8 and earlier */
        background-repeat: no-repeat;
        background-position: center;
        background-color: #fff;
    }

    .status-transffered-detail {
        background-image: url('images/transferred_thumb.png');
        opacity: 0.90;
        filter: alpha(opacity=90); /* For IE8 and earlier */
        background-repeat: no-repeat;
        background-position: center;
    }

    .status-frozen-thumb {
        background-image: url('images/frozen_thumb.png');
        opacity: 0.90;
        filter: alpha(opacity=90); /* For IE8 and earlier */
        background-repeat: no-repeat;
        background-position: center;
        background-color: #fff;
    }

    .status-frozen-detail {
        background-image: url('images/frozen_thumb.png');
        opacity: 0.85;
        filter: alpha(opacity=85); /* For IE8 and earlier */
        background-repeat: no-repeat;
        background-position: center;
    }

    .status-available {
        display: none;
    }

    .status-transffered {
        background-image: url('images/transferred_detail.png');
        background-repeat: no-repeat;
        background-color: @fateIconBackgroundColor !important;
        background-size: 70%;
        background-position: center;
    }

    .status-frozen {
        background-image: url('images/frozen_detail.png');
        background-repeat: no-repeat;
        background-color: @fateIconBackgroundColor !important;
        background-size: 70%;
        background-position: center;
    }

    div.caption {
        position: absolute;
        top: 0;
        background-color: #fff;
        right: 0;
        font-family: @secondaryFont;
        font-size: 22px;
        height: 44px;
        width: 44px;
        text-align: center;
        line-height: 44px;
        opacity: 0.90;
        filter: alpha(opacity=90); /* For IE8 and earlier */
    }

    div.caption-header {
        position: absolute;
        top: 0;
        width: 100%;
        height: @baseRowHeight*3;
        background-image: url('images/photo_tab_desktop.png');
        background-position: center center;
        background-repeat: no-repeat;
        right: 0;
        visibility: visible;
        background-color: #fff;
        transition: visibility 0s, opacity 0.5s linear;
        opacity: 0.90;
        filter: alpha(opacity=90);
    }

    div.caption-header-video {
        position: absolute;
        top: 0;
        width: 100%;
        height: @baseRowHeight*3;
        background-image: url('images/video_tab_desktop.png');
        background-position: center center;
        background-repeat: no-repeat;
        right: 0;
        visibility: visible;
        background-color: #fff;
        transition: visibility 0s, opacity 0.5s linear;
        opacity: 0.90;
        filter: alpha(opacity=90);
    }

    .caption-title {
        //font-size: 4px;
        font-size: 8px;
        font-family: @secondaryFont;
        position: absolute;
        top: -10px;
        padding-left: 5px;
    }

    .caption-body {
        font-size: 30px;
        font-family: @secondaryFont;
        position: relative;
        bottom: -7px;
    }

    .caption-detail-title {
        font-size: 10px;
        //font-size: 2vw;
        font-family: @secondaryFont;
        position: absolute;
        top: -4px;
    }

    .caption-detail-body {
        font-size: 37px;
        //font-size: 4vw;
        font-family: $secondaryFont;
        //bottom: 7vw;
    }

    div.caption-header:hover,
    .thumbnail-container > div.thumbnail:hover ~ div.caption-header,
    .thumbnail-container > div.thumbnail:focus ~ div.caption-header,
    .thumbnail-container > div.thumbnail:hover ~ div.caption-header-video,
    .thumbnail-container > div.thumbnail:focus ~ div.caption-header-video {
        visibility: hidden;
        opacity: 0;
    }

    div.caption-header > .embryo-no,
    div.caption-header-video > .embryo-no {
        right: 30px;
        position: absolute;
        font-family: @secondaryFontLight;
        font-size: 32px;
        color: #0099cc;
        top: 15px;
    }

    div.caption-footer {
        width: 100%;
        height: @baseRowHeight*2;
        right: 0;
        position: absolute;
        bottom: 0;
        transition: all 0.5s;
        background-color: #fff;
        //visibility: hidden;
        opacity: 0.90;
    }

    .select-day-title {
    }

    div.caption-footer:hover,
    .thumbnail-container > div.thumbnail:hover ~ .caption-footer,
    .thumbnail-container > div.thumbnail:focus ~ .caption-footer,
    .caption-footer:hover {
        visibility: visible;
        background-color: #fff;
        opacity: 0.90;
    }

    .thumbnail-container > a.thumbnail:hover ~ .caption {
        background-color: #ffffff;
        //color:@primaryColor;
    }

    .thumbnail-container > div.caption:hover {
        cursor: default;
    }

    .media-player {
        position: relative;
    }

    .media-player button {
        background-color: transparent;
        border: none;
    }

    .play {
        background-image: url('images/play_desktop.png');
        background-repeat: no-repeat;
        height: 84px;
        width: 84px;
    }

    .pause {
        background-image: url('images/pause_desktop.png');
        background-repeat: no-repeat;
        height: 84px;
        width: 84px;
    }

    a.play-icon {
        background-image: url('images/play_icon.png');
        background-repeat: no-repeat;
        background-position: center center;
        width: 26px;
        height: 34px;
        display: block;
        left: 12px;
        top: 6px;
        position: relative;
        background-size: contain;
    }

    a.pause-icon {
        background-image: url('images/pause_icon.png');
        background-repeat: no-repeat;
        background-position: center center;
        width: 26px;
        height: 34px;
        display: block;
        left: 12px;
        top: 6px;
        position: relative;
        background-size: contain;
    }


    .swiper-wrapper {
        max-width: 1000px;
        min-width: 768px;
    }

    .swiper-slide {
        text-align: left;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    .pagination-wrapper {
        text-align: right;
        display: table;
    }

    .swiper-pagination {
        margin: 0;
        padding: 0;
    }

    .swiper-pagination > span {
        padding: 7px 9px;
        margin: 6px;
        font-family: @secondaryFontLight !important;
        border-radius: 50% !important;
        display: inline-block;
    }

    .swiper-pagination-bullet {
        border-radius: 50% !important;
        width: 32px !important;
        height: 32px !important;
        background-color: #d1d1d1 !important;
        color: #ffffff !important;
        font-size: 14px;
    }

    .swiper-pagination-bullet-active {
        width: 44px !important;
        height: 44px !important;
        background-color: @buttonPrimaryBackgroundColor !important;
        margin: 0 !important;
        padding-right: 10px !important;
        line-height: 30px !important;
        font-size: 20px !important;
        padding: 9px 11px !important;
    }

    .swiper-pagination-bullet-disabled {
        color: #bcdff0 !important;
        background-color: #ffffff !important;
        font-size: 14px;
        width: 32px !important;
        height: 32px !important;
    }

    .swiper-container {
        max-width: 1000px;
        //min-width:992px;
        //padding-left: -100px;
    }

    .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
        background-image: url("images/arrow_left.png");
        left: -1px;
        right: auto
    }

    .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
        background-image: url("images/arrow_right.png");
        right: 25px;
        left: auto
    }

    .embryos-container {
        display: table;
        width: 100%;
        margin-right: 10px;
        margin-left: -10px;
    }

    #embryoPageIno {
        text-align: center;
        font-family: @secondaryFontLight;
        font-size: 32px;
        color: #666666;
        background-color: #e5f5fa;
        top: -22px;
        padding-top: 9px;
        width: 25%;
        position: relative;
        margin: 0 auto;
    }

    .embryo-info-container {
        position: relative;
        margin-top: -25px;
    }

    .embryo-pointer {
        margin: 0 auto;
        width: 44px;
        height: 22px;
        background: url('images/arrow_desktop.png') center center no-repeat;
        background-size: 44px 22px;
        position: relative;
        top: -22px;
    }

    a.download-embryos {
        /*left:12px;
        top:4px;
        position:relative;
        background-image:url('images/download_desktop.png');
        background-size:contain;
        background-repeat:no-repeat;
        background-position:center;*/
        background-image: url('images/download_desktop.png');
        width: 26px;
        height: 34px;
        display: block;
        left: 12px;
        top: 6px;
        position: relative;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
    }

    .share-embryos {
        width: 44px;
        height: 44px;
        position: absolute;
        right: 0px;
        top: 0;
        background-image: url('images/share_desktop.png');
        background-repeat: no-repeat;
        background-position: center center;
    }

    .share-embryos:hover {
        background-color: #f6f5f5;
        background-image: url('images/share_active_desktop.png');
        cursor: pointer;
    }

    #menu * {
        padding: 0;
        margin: 0;
        font: 12px georgia;
        list-style-type: none;
    }

    #menu {
        width: 44px;
        height: 44px;
        position: absolute;
        right: 0px;
        top: 0;
    }

    #menu a {
        display: block;
        text-decoration: none;
    }

    #menu ul:hover {
        background: #e0dfdf;
    }

    a.share-icon {
        background-image: url('images/share_desktop.png');
        background-repeat: no-repeat;
        background-position: center center
    }

    a.share-icon:hover,
    .active-share,
    #menu > ul ul:hover + a {
        background-image: url('images/share_active_desktop.png');
        background-color: #f6f5f5;
    }

    a.twitter-icon {
        background-image: url('images/twitter_desktop.png');
        background-repeat: no-repeat;
        background-position: center center;
        width: 26px;
        height: 34px;
        display: block;
        left: 12px;
        top: 6px;
        position: relative;
        background-size: contain;
    }

    a.facebook-icon {
        background-image: url('images/facebook_desktop.png');
        background-repeat: no-repeat;
        background-position: center center;
        width: 26px;
        height: 34px;
        display: block;
        left: 12px;
        top: 6px;
        position: relative;
        background-size: contain;
    }

    a.instagram-icon {
        background-image: url('images/instagram_active_desktop.png');
        background-repeat: no-repeat;
        background-position: center center
    }

    /*a.twitter-icon:hover,
    a.facebook-icon:hover,
    a.instagram-icon:hover
    {
        background-color:#e0dfdf;
    }*/

    #menu ul li {
        float: left;
        width: 44px;
    }

    #menu ul li a {
        width: 44px;
        height: 44px;
    }

    #menu li {
        position: relative;
        float: left;
    }

    #menu ul li ul li {
        width: 44px;
        border: none;
        background: #F6f5f5;
        z-index: 1;
    }

    #menu ul li ul li:before {
        content: "";
        position: absolute;
        left: 5px;
        bottom: 0;
        height: 1px;
        width: 34px; /* or 100px */
        border-bottom: 1px solid #e0dfdf;
    }

    #menu ul li ul,
    #menu:hover ul li ul,
    #menu:hover ul li:hover ul li ul {
        display: none;
        list-style-type: none;
        width: 44px;
    }

    #menu:hover ul,
    #menu:hover ul li:hover ul,
    #menu:hover ul li:hover ul li:hover ul {
        display: block;
    }

    #menu:hover ul li:hover ul {
        position: absolute;
        margin-top: 0px;
    }

    #menu > ul > li:hover > ul {
        bottom: 100%;
        border-bottom: 0px solid #e0dfdf;
        background-color: red;
    }

    .login-form {
        border: 1px solid #858585;
        border-top: 4px solid #0099cc;
    }

    .welcome-image {
        background: url("images/welcome_desktop_bgrnd.png");
        width: 100%;
        height: 687px;
    }

    .welcome-title {
        position: absolute;
        top: 40px;
        text-align: center;
        width: 100%;
        font-size: 60px;
        color: #666;
        font-family: @secondaryFontLight;
    }

    .welcome-body {
        position: absolute;
        top: 170px;
        width: 30%;
        right: 160px;
        font-family: @secondaryFontLight;
        color: #666;
        font-size: 22px;
    }

    .btn-welcome {
        position: absolute;
        bottom: 280px;
        right: 100px;
        width: 256px;
        background-color: #4DB5D8;
        color: #fff;
        font-family: @secondaryFontLight;
        font-size: 20px;
        height: 44px;
    }
}

@media (min-width:1199px) {
    .body-background {
        margin: 0 -100px 0 -100px;
        padding: 0 100px;
        width: auto;
        max-width: 1350px;
        min-width: 1200px;
    }

    h1 {
        font-family: @titleFontFamily1;
        font-size: @title1FontSize;
    }

    h2 {
        font-family: @titleFontFamily2;
        font-size: @title2FontSize;
    }

    h3 {
        font-family: @titleFontFamily3;
        font-size: 20px;
        color: @navDefaultColor;
    }

    .swiper-container {
        //padding-left: 60px;
    }

    .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
        background-image: url("images/arrow_left.png");
        left: -1px;
        right: auto
    }

    .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
        background-image: url("images/arrow_right.png");
        right: 25px;
        left: auto
    }

    .thumbnail-container {
        width: 175px;
        height: 175px;
        display: inline-block;
        margin: 0 5px 5px 1px;
        padding: 0;
        position: relative;
    }

    .detail-container {
        width: 440px;
        height: 440px;
        display: inline-block !important;
        margin: 0 11px 11px 11px !important;
        padding: 0;
        position: relative;
    }

    .form-container {
        border: 1px solid #858585;
        max-width: 500px;
    }

    .welcome-container {
        position: relative;
        width: 100%;
    }

    .welcome-image {
        background: url("images/welcome_desktop_bgrnd.png");
        width: 100%;
        height: 687px;
    }


    .welcome-title {
        position: absolute;
        top: 40px;
        text-align: center;
        width: 100%;
        font-size: 60px;
        color: #666;
        font-family: @secondaryFontLight;
    }

    .welcome-body {
        position: absolute;
        top: 170px;
        width: 30%;
        right: 160px;
        font-family: @secondaryFontLight;
        color: #666;
        font-size: 22px;
    }

    .btn-welcome {
        position: absolute;
        bottom: 280px;
        right: 180px;
        width: 256px;
        background-color: #4DB5D8;
        color: #fff;
        font-family: @secondaryFontLight;
        font-size: 20px;
        height: 44px;
    }
}