:root {

    --blue-color: #216a8d;
    --blue-light-color: #1cafec;
    --yellow-color: #f6a716; 
    --yellow-light-color: #fdd413;
    --workspacecolor: #eff3f9; 
    --dummyfieldcolor: #f8f9fb; 
    --firstlightcolor: #827b9f;
    
    --tabhovercolor: #BEB7A4;
    --tablightcolor: #BEB7A4;
    --rowhovercolor: #E0E2DB;

    --green-color: #91bf7e;


    --springdarkcolor: #068d09;
    --springmidcolor: #10c308;
    --springlightcolor: #69e127; 

    --summerdarkcolor: #00322d;
    --summermidcolor: rgb(0, 65, 57);
    --summerlightcolor: #0a6d5a; 

    --falldarkcolor: #571a19;
    --fallmidcolor: #961f1d;
    --falllightcolor: #f35d07;

    --winterdarkercolor: #a5a79f;
    --winterdarkcolor: #c3c5bb;
    --wintermidcolor: #eaece7;
    --winterlightcolor: #ffffff;
  }

  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {  
    margin: 0;  
    padding: 0;  
    border: 0;  
    font-size: 100%;  
    font: inherit;  
    vertical-align: baseline; 
 }
@font-face {
    font-family: 'Proxima-Regular';
    src: url('../fonts/proximanova/proximanova-regular-webfont.eot');
    src: url('../fonts/proximanova/proximanova-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/proximanova/proximanova-regular-webfont.woff2') format('woff2'),
         url('../fonts/proximanova/proximanova-regular-webfont.woff') format('woff'),
         url('../fonts/proximanova/proximanova-regular-webfont.ttf') format('truetype'),
         url('../fonts/proximanova/proximanova-regular-webfont.svg#proxima_novaregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Proxima-Light';
    src: url('../fonts/proximanova/proximanova-light-webfont.eot');
    src: url('../fonts/proximanova/proximanova-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/proximanova/proximanova-light-webfont.woff2') format('woff2'),
         url('../fonts/proximanova/proximanova-light-webfont.woff') format('woff'),
         url('../fonts/proximanova/proximanova-light-webfont.ttf') format('truetype'),
         url('../fonts/proximanova/proximanova-light-webfont.svg#proxima_light') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Proxima-Semibold';
    src: url('../fonts/proximanova/proximanova-semibold-webfont.eot');
    src: url('../fonts/proximanova/proximanova-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/proximanova/proximanova-semibold-webfont.woff2') format('woff2'),
         url('../fonts/proximanova/proximanova-semibold-webfont.woff') format('woff'),
         url('../fonts/proximanova/proximanova-semibold-webfont.ttf') format('truetype'),
         url('../fonts/proximanova/proximanova-semibold-webfont.svg#proxima_novabold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Proxima-Bold';
    src: url('../fonts/proximanova/proximanova-bold-webfont.eot');
    src: url('../fonts/proximanova/proximanova-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/proximanova/proximanova-bold-webfont.woff2') format('woff2'),
         url('../fonts/proximanova/proximanova-bold-webfont.woff') format('woff'),
         url('../fonts/proximanova/proximanova-bold-webfont.ttf') format('truetype'),
         url('../fonts/proximanova/proximanova-bold-webfont.svg#proxima_novabold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'cursedtimer';
    src: url('../fonts/CursedTimerUlil/CursedTimerUlil-Aznm.eot');
    src: url('../fonts/CursedTimerUlil/CursedTimerUlil-Aznm.eot?#iefix') format('embedded-opentype'),
         url('../fonts/CursedTimerUlil/CursedTimerUlil-Aznm.woff2') format('woff2'),
         url('../fonts/CursedTimerUlil/CursedTimerUlil-Aznm.woff') format('woff'),
         url('../fonts/CursedTimerUlil/CursedTimerUlil-Aznm.ttf') format('truetype'),
         url('../fonts/CursedTimerUlil/CursedTimerUlil-Aznm.svg#proxima_novaregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DM-Regular';
    src: url('../fonts/LSK-DM-Sans-Regular.woff2') format('woff2'),
         url('../fonts/LSK-DM-Sans-Regular.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Reglo';
    src: url('../onts/LSK-Reglo-Bold.woff2') format('woff2'),
         url('../fonts/LSK-Reglo-Bold.woff') format('woff');
}
@font-face {
    font-family: 'DM-Bold';
    src: url('../fonts/LSK-DM-Sans-Bold.woff2') format('woff2'),
         url('../fonts/LSK-DM-Sans-Bold.woff') format('woff');
}
html {
    overflow: hidden;
    height: 100%;
    -ms-overflow-style: -ms-autohiding-scrollbar; 
}
body {
    height: 100%;
    overflow:hidden;
    color: #292929;
    font-family: 'Proxima-Light';
    font-weight: 400;
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
    /*-webkit-user-select: none;                /* disable cut copy paste */
    -webkit-touch-callout: none;              /* disable callout, image save panel */
    -webkit-tap-highlight-color: transparent; /* "turn off" link highlight */
}
a {
    background: transparent;
    text-decoration: none;
}
a:focus {
    outline: none
}
a:active, a:hover {
    outline: 0
}
a:hover {
    cursor: pointer
}
li > a {
    color: #374050;
}

.ot-pointer {
    cursor: pointer;
}
.ot-float--left {
    float: left;
}
.ot-float--center {
    float: center;
}
.ot-float--right {
    float: right;
}
.ot-scale--02 {
    transform: scale(0.2);
}
.ot-scale--03 {
    transform: scale(0.3);
}
.ot-scale--04 {
    transform: scale(0.4);
}
.ot-scale--05 {
    transform: scale(0.5);
}
.ot-scale--06 {
    transform: scale(0.6);
}
.ot-scale--07 {
    transform: scale(0.7);
}
.ot-scale--08 {
    transform: scale(0.8);
}
.ot-scale--09 {
    transform: scale(0.9);
}
.ot-scale--10 {
    transform: scale(1.0);
}
.ot-scale--11 {
    transform: scale(1.1);
}
.ot-scale--12 {
    transform: scale(1.2);
}
.ot-scale--13 {
    transform: scale(1.3);
}
.ot-scale--14 {
    transform: scale(1.4);
}
.ot-scale--15 {
    transform: scale(1.5);
}
.ot-scale--16 {
    transform: scale(1.6);
}
.ot-scale--17 {
    transform: scale(1.7);
}
.ot-scale--18 {
    transform: scale(1.8);
}
.ot-float--show {
    display: block;
}
.ot-float--hide {
    display: none;
}
.ot-clear-both {
    clear: both;
}

.ot-font--light {
    font-family: 'Proxima-Light';
}
.ot-font--regular {
    font-family: 'Proxima-Regular';
}
.ot-font--semibold {
    font-family: 'Proxima-Semibold';
}
.ot-font--bold {
    font-family: 'Proxima-Bold';
}
.ot-font--italic {
    font-style: italic;
}
.ot-font--lowercase {
    text-transform: lowercase;
}
.ot-font--uppercase {
    text-transform: uppercase;
}
.ot-font--capitalize {
    text-transform: capitalize;
}
.ot-font--9 {
    font-size: 9px;
}
.ot-font--10 {
    font-size: 10px;
}
.ot-font--12 {
    font-size: 12px;
}
.ot-font--14 {
    font-size: 14px;
}
.ot-font--16 {
    font-size: 16px;
}
.ot-font--20 {
    font-size: 20px;
}
.ot-font--24 {
    font-size: 24px;
}
.ot-font--30 {
    font-size: 30px;
}
.lsk-font--quote {
    font-family: 'Reglo';
    text-transform: uppercase;
    font-stretch: ultra-expanded;
    font-style: italic;  
    font-weight: bold;  
} 
.ot-no-transition {
    -webkit-transition: none;
       -moz-transition: none;
        -ms-transition: none;
         -o-transition: none;
            transition: none;
}
.ot-color--white {
    color: #fff;
}
.ot-color--black {
    color: #000;
}
.ot-color--blue {
    color: var(--blue-color);
}
.ot-font--messagebox {
    font-size: 1.2em;
}
.ot-width--10 {
    width: 10px;
}
.ot-width--20 {
    width: 20px;
}
.ot-width--30 {
    width: 30px;
}
.ot-width--50 {
    width: 50px;
}
.ot-width--75 {
    width: 75px;
}
.ot-width--100 {
    width: 100px;
}
.ot-width--125 {
    width: 125px;
}
.ot-width--150 {
    width: 150px;
}
.ot-width--175 {
    width: 175px;
}
.ot-width--200 {
    width: 200px;
}
.ot-width--225 {
    width: 225px;
}
.ot-width--250 {
    width: 250px;
}
.ot-width--300 {
    width: 300px;
}
.ot-width--350 {
    width: 350px;
}
/* widths */
.ot-width--2p {
    width: 2%;
}
.ot-width--4p {
    width: 4%;
}
.ot-width--5p {
    width: 5%;
}
.ot-width--10p {
    width: 10%;
}
.ot-width--12p {
    width: 12%;
}
/* widths */
.ot-width--15p {
    width: 15%;
}
.ot-width--20p {
    width: 20%;
}
.ot-width--25p {
    width: calc(25% - 1px);
}
.ot-width--26p {
    width: 26%;
}
.ot-width--28p {
    width: 28%;
}
.ot-width--30p {
    width: 30%;
}
.ot-width--32p {
    width: 32%;
}
.ot-width--31p {
    width: 31.33%;
}
.ot-width--33p {
    width: 33.33%;
}
.ot-width--35p {
    width: 35%;
}
.ot-width--38p {
    width: 38%;
}
.ot-width--40p {
    width: 40%;
}
.ot-width--45p {
    width: 45%;
}
.ot-width--48p {
    width: 47.5%;
}
.ot-width--50p {
    width: 50%;
}
.ot-width--55p {
    width: 55%;
}
.ot-width--58p {
    width: 58%;
}
.ot-width--60p {
    width: 60%;
}
.ot-width--65p {
    width: 65%;
}
.ot-width--66p {
    width: 66.66%;
}
.ot-width--68p {
    width: 68%;
}
.ot-width--70p {
    width: 70%;
}
.ot-width--75p {
    width: 75%;
}
.ot-width--80p {
    width: 80%;
}
.ot-width--85p {
    width: 85%;
}
.ot-width--90p {
    width: 90%;
}
.ot-width--100p {
    width: 100%;
}
.ot-text--left {
    text-align: left;
}
.ot-text--center {
    text-align: center;
}
.ot-text--right {
    text-align: right;
}
.ot-white-space {
    white-space: nowrap;
    overflow: hidden;  
    -webkit-text-overflow: ellipsis;
            text-overflow: ellipsis;
}
.ot-box-sizing {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
.hideScrollbar::-webkit-scrollbar {
    display: none;
}
.autoShowScrollbar {    
    -ms-overflow-style: -ms-autohiding-scrollbar; 
}
/*---------------------------------------*/
/* BUTTON STYLES
/*---------------------------------------*/
.ot-button {
    width: auto;
    height: 34px;
    font-family: 'Proxima-Regular';
    font-size: 13px;
    padding: 10px 15px;
    margin: 4px 2px;
    text-align: center;
    line-height: 13px; 
    border: 0px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;    
    -webkit-transition: all 0.4s ease-in-out;
       -moz-transition: all 0.4s ease-in-out;
        -ms-transition: all 0.4s ease-in-out;
         -o-transition: all 0.4s ease-in-out;
            transition: all 0.4s ease-in-out;
    cursor: pointer;
}

.ot-button--small {  
    height: 30px;
    line-height: 9px; 
    margin: 0px 2px;
}
.ot-button--normal {    
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
}
.ot-button--semirounded {    
    -webkit-border-radius: 14px;
       -moz-border-radius: 14px;
            border-radius: 14px;
}
.ot-button--rounded {    
    -webkit-border-radius: 100px;
       -moz-border-radius: 100px;
            border-radius: 100px;
}
.ot-button--big {
    height: 44px;
    font-family: 'Proxima-Regular';
    font-size: 16px;
    line-height: 22px; 
}
.ot-button--blue-color,
.ot-button--blue-color-bold {
    color: #fff;
    background: var(--blue-color);
    
}
.ot-button--blue-color:hover,
.ot-button--blue-color-bold:hover {
    color: #fff;
    background: var(--blue-light-color); 
}
.ot-button--blue-color-bold:hover {
    color: #fff;
    font-family: 'Proxima-Bold';
}

.ot-button--grey,
.ot-button--grey-bold {
    color: #000;
    background: #dadfe8;
}
.ot-button--grey:hover,
.ot-button--grey-bold:hover {
    background: #c5cbd4;
}
.ot-button--default {   
    width: auto;
    height: 34px;
    padding: 10px 14px;
}
.ot-button--login {   
    width: auto;
    height: 44px;
    padding: 14px 14px;
}
.ot-button--square {  
    margin: 5px 10px;  
    width: 100px;
    height: 100px;
}

.ot-button--small-square-left,
.ot-button--small-square-right {  
    padding: 7px;
    margin: 5px 5px 5px 10px;  
    width: 45px;
    height: 45px;
}
.ot-button--small-square-right {  
    margin: 5px 10px 5px 5px;  
}


.btn-file {
    position: relative;
    display: inline-block;
    margin: 5px 0px 5px 0px;
    padding: 10px 15px;
    color: #000;
    min-width: 100px;
    font-size: 13px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    -webkit-border-radius: 15px;
       -moz-border-radius: 15px;
            border-radius: 15px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}
.btn-file {
    height: 36px;
    line-height: 20px;
    padding: 7px 15px 10px 15px;
    background: #dadfe8;
    border-top: 1px solid #dadfe8;
    border-left: 1px solid #dadfe8;
    border-right: 1px solid #dadfe8;
    border-bottom: 1px solid #dadfe8;
    
    position: relative;
    display: inline-block;
    visibility: visible;
}

.btn-file:hover {
    background: #c5cbd4;;
    border-top: 1px solid #c5cbd4;
    border-left: 1px solid #c5cbd4;
    border-right: 1px solid #c5cbd4;
    border-bottom: 1px solid #c5cbd4;

}
/*  ----------------------------------------------------------
    -
    - Declaration of the picto-menus 
    -
    ----------------------------------------------------------  */

    .ot-menu--button {
        display: inline-block;
        width: 30px;
        height: 30px;
        background-image: url('../images/ot-icon--sprites@1.png?version=0060');
        background-size: 600px 1200px;
        vertical-align: middle;
        -webkit-border-radius: 5px;
        -moz-border-radius: 50px;
          -o-border-radius: 50px;
             border-radius: 50px;
        z-index: 999999999;
        cursor: pointer
    }

    /* Eerste rij sprite */
    .ot-menu--edit {
        background-position: -15px -5px;
    }
    .ot-menu--edit-white {
        background-position: -75px -5px;
    }
    .ot-menu--delete {
        background-position: -135px -5px;
    }
    .ot-menu--delete-white {
        background-position: -195px -5px;
    }
    .ot-menu--delete-white-picture {
        background-color: #000;
        background-position: -195px -5px;
    }
    .ot-menu---more {
        background-position: -255px -5px;
    }
    .ot-menu--more-white {
        background-position: -315px -5px;
    }
    .ot-menu--print {
        background-position: -375px -5px;
    }
    .ot-menu--print-white {
        background-position: -435px -5px;
    }
    .ot-menu--add {
        background-position: -495px -5px;
    }
    .ot-menu--add-white {
        background-position: -555px -5px;
    }

    /* Tweede rij sprite */
    .ot-menu--live {
        background-position: -15px -65px;
    }
    .ot-menu--picture {
        background-position: -75px -65px;
    }
    .ot-menu--cards {
        background-position: -135px -65px;
    }
    .ot-menu--import {
        background-position: -195px -65px;
    }
    .ot-menu--export {
        background-position: -255px -65px;
    }
    .ot-menu--search {
        background-position: -315px -65px;
    }
    .ot-menu--arrowUp,
    .ot-menu--close {
        background-position: -375px -65px;
    }
    .ot-menu--arrowDown,
    .ot-menu--open {
        background-position: -435px -65px;
    }
    .ot-menu--arrowUpWhite {
        background-position: -495px -65px;
    }
    .ot-menu--arrowDownWhite {
        background-position: -555px -65px;
    }

    /* Derde rij sprite */
    .ot-menu--text {
        background-position: -15px -125px;
    }
    .ot-menu--quote {
        background-position: -75px -125px;
    }
    .ot-menu--subs-home {
        background-position: -135px -125px;
    }
    .ot-menu--subs-guests {
        background-position: -195px -125px;
    }
    .ot-menu--HAlignCenter {
        background-position: -255px -125px;
    }
    .ot-menu--HAlignRight {
        background-position: -315px -125px;
    }
    .ot-menu--VAlignBottom {
        background-position: -375px -125px;
    }
    .ot-menu--VAlignCenter {
        background-position: -435px -125px;
    }
    .ot-menu--VAlignTop {
        background-position: -495px -125px;
    }
    .ot-menu--Attachment {
        background-position: -555px -125px;
    }

    /* Vierde rij sprite */
    .ot-menu--Check {
        background-position: -15px -185px;
    }
    .ot-menu--FilterOn {
        background-position: -75px -185px;
    }
    .ot-menu--previous {
        background-position: -135px -185px;
    }
    .ot-menu--next {
        background-position: -195px -185px;
    }
    .ot-menu--Stats {
        background-position: -255px -185px;
    }
    .ot-menu--Undo {
        background-position: -315px -185px;
    }
    .ot-menu--Redo {
        background-position: -375px -185px;
    }
    .ot-menu--UndoAll {
        background-position: -435px -185px;
    }
    .ot-menu--Pinned {
        background-position: -495px -185px;
    }
    .ot-menu--UnPinned {
        background-position: -555px -185px;
    }

    /* Vijfde rij sprite */
    .ot-menu--AddPlus {
        background-position: -15px -245px;
    }
    .ot-menu--delete-red {
        background-position: -75px -245px;
    }
    .ot-menu--add-green {
        background-position: -135px -245px;
    }
    .ot-menu--NOKRed {
        background-position: -195px -245px;
    }
    .ot-menu--Social {
        background-position: -255px -245px;
    }
    .ot-menu--Picture {
        background-position: -315px -245px;
    }
    .ot-menu--Portrait {
        background-position: -375px -245px;
    }
    .ot-menu--Landscape {
        background-position: -435px -245px;
    }
    .ot-menu--Chat {
        background-position: -495px -245px;
    }
    .ot-menu--seperator {
        background-position: -555px -245px;
    }
    .ot-menu--seperator-small {
        width: 10px;
        height: 30px;
        background-position: -565px -245px;
    }


    /* Zesde rij sprite */
    .ot-menu--Info {
        background-position: -135px -305px;
    }
    .ot-menu--FullScreen {
        margin-top: 2px;
        border-radius: 5px;
        background-position: -195px -305px;
        background-color: #dadfe8;
        cursor: default;
    }
    .ot-menu--GridScreen {
        background-position: -255px -305px;
    }
    .ot-menu--KabanScreen {
        background-position: -315px -305px;
    }
    .ot-menu--actions {
        background-position: -195px -305px;
    }
    .ot-menu--FicheScreen {
        margin-top: 2px;
        border-radius: 5px;
        background-position: -435px -305px;
        background-color: #dadfe8;
        cursor: default;
    }
    .ot-menu--Category {
        margin-top: 2px;
        border-radius: 5px;
        background-position: -495px -305px;
        background-color: #dadfe8;
        cursor: default;
    }
    .ot-menu--Close {
        background-position: -555px -305px;
    }

    /* Zevende rij sprite */
    .ot-menu--Emoji {
        background-position: -15px -365px;
    }

    .ot-menu--seperator--vertical {
        width: 30px;
        height: 10px;
        background-position: -135px -375px;
    }
    .ot-menu--Page {
        background-position: -195px -365px;
    }
    .ot-menu--emergency {
        background-position: -255px -365px;
    }
    .ot-menu--location {
        background-position: -315px -365px;
    }
    .ot-menu--telephone {
        background-position: -375px -365px;
    }
    .ot-menu--email {
        background-position: -435px -365px;
    }

    .ot-menu--OK,
    .ot-menu--NOK
    {
        display: inline-block;
        width: 30px;
        height: 30px;
        background-image: url('../images/iconSprites.png?version=0041');
        background-size: 900px 1500px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
            -o-border-radius: 5px;
                border-radius: 5px;
        cursor: pointer
    }

    .ot-menu--OK {
        background-position: -20px -375px;
    }
    .ot-menu--NOK {
        background-position: -90px -375px;
    }

    .ot-menu--seperator {
        float: left;
        margin: 0px;
    }
    .ot-menu--seperator-vertical {
        float: left;
        margin: 0px;
    }

    .ot-menu--Phaselist {
        background-position: -270px -90px
    }
    .ot-menu--SendTo {
        background-position: -180px -240px;
    }
    .ot-menu--ZoomIn {
        background-position: -30px -240px;
    }
    .ot-menu--ZoomOut {
        background-position: -30px -270px;
    }
    .ot-menu--Transparent {
        background-position: -270px -270px;
    }

    /* Eerste rij sprite */
    .ot-menu--edit:hover,
    .ot-menu--edit-white:hover,
    .ot-menu--delete:hover,
    .ot-menu--delete-white:hover,
    .ot-menu--more:hover,
    .ot-menu--more-white:hover,
    .ot-menu--print:hover,
    .ot-menu--print-white:hover,
    .ot-menu--add:hover,
    .ot-menu--add-white:hover,

    /* Tweede rij sprite */
    .ot-menu--live:hover,
    .ot-menu--export-CSV:hover,
    .ot-menu--export-JSON:hover,
    .ot-menu--export:hover,
    .ot-menu--import:hover,
    .ot-menu--search:hover,
    .ot-menu--arrowUp:hover,
    .ot-menu--arrowDown:hover,
    .ot-menu--arrowUpWhite:hover,
    .ot-menu--arrowDownWhite:hover,

    /* Derde rij sprite */
    .ot-menu--Size:hover,
    .ot-menu--Rectangle:hover,
    .ot-menu--Move:hover,
    .ot-menu--HAlignLeft:hover,
    .ot-menu--HAlignCenter:hover,
    .ot-menu--HAlignRight:hover,
    .ot-menu--VAlignBottom:hover,
    .ot-menu--VAlignCenter:hover,
    .ot-menu--VAlignTop:hover,
    .ot-menu--Attachment:hover,

    /* Vierd rij sprite */
    .ot-menu--Check:hover,
    .ot-menu--FilterOn:hover,
    .ot-menu--previous:hover,
    .ot-menu--next:hover,
    .ot-menu--Stats:hover,
    .ot-menu--Undo:hover,
    .ot-menu--Redo:hover,
    .ot-menu--UndoAll:hover,
    .ot-menu--Pinned:hover,
    .ot-menu--UnPinned:hover,

    /* Vierde rij sprite */
    .ot-menu--AddPlus:hover,
    .ot-menu--CheckRed:hover,
    /*.ot-menu--OK:hover,
    .ot-menu--NOK:hover,*/
    .ot-menu--Social:hover,
    .ot-menu--Picture:hover,
    .ot-menu--Portrait:hover,
    .ot-menu--Landscape:hover,
    .ot-menu--Chat:hover,

    /* Zesde rij sprite */
    .ot-menu--Info:hover,
    .ot-menu--Checklist:hover,

    /* Zevende rij sprite */
    .ot-menu--Emoji:hover,
    .ot-menu--Page:hover,
    .ot-menu--emergency:hover,
    .ot-menu--location:hover,
    .ot-menu--telephone:hover
    {
        opacity: 1;
        background-color: #dadfe8;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
            -ms-transition: all 0.2s ease-in-out;
            -o-transition: all 0.2s ease-in-out;
                transition: all 0.2s ease-in-out;
    }
    .ot-menu--DeleteWhite:hover {    
        background-position: -135px -5px;
    }

    .ot-menu--close:hover,
    .ot-menu--open:hover {
        opacity: 1;
        background-color: #dadfe8;
    }

/*  ----------------------------------------------------------
    -
    - Declaration of the picto-icons 
    -
    ----------------------------------------------------------  */
    .ot-icon {
        display: inline-block;
        width: 19px;
        height: 19px;
        border: 1px solid transparent;
        border-radius: 3px;
        background-image: url('../images/ot-icon--sprites@1.png?version=0059');
        background-size: 400px 800px;
        cursor: pointer;
        margin: -3px 3px 0 -3px;
        vertical-align: middle;
    }
    /* Eerste rij sprite */
    .ot-icon--edit {
        background-position: -10px -4px;
    }
    .ot-icon--editWhite {
        background-position: -50px -3px;
    }
    .ot-icon--delete {
        background-position: -91px -4px;
    }
    .ot-icon--deleteWhite {
        background-position: -130px -3px;
    }
    .ot-icon--more {
        background-position: -170px -3px;
    }
    .ot-icon--moreWhite {
        background-position: -210px -3px;
    }
    .ot-icon--print {
        background-position: -250px -3px;
    }
    .ot-icon--printWhite {
        background-position: -290px -3px;
    }
    .ot-icon--add {
        background-position: -331px -4px;
    }
    .ot-icon--add-white {
        background-position: -370px -3px;
    }

    /* Tweede rij sprite */
    .ot-icon--ExportPDF {
        background-position: -10px -43px;
    }
    .ot-icon--ExportCSV {
        background-position: -50px -43px;
    }
    .ot-icon--ExportJSON {
        background-position: -90px -43px;
    }
    .ot-icon--Import {
        background-position: -130px -43px;
    }
    .ot-icon--Export {
        background-position: -170px -43px;
    }
    .ot-icon--Search {
        background-position: -210px -43px;
    }
    .ot-icon--ArrowUp {
        background-position: -250px -43px;
    }
    .ot-icon--ArrowDown {
        background-position: -290px -43px;
    }
    .ot-icon--ArrowUpWhite {
        background-position: -330px -43px;
    }
    .ot-icon--ArrowDownWhite {
        background-position: -370px -43px;
    }

    /* Derde rij sprite */
    .ot-icon--Size {
        background-position: -10px -83px;
    }
    .ot-icon--Rectangle {
        background-position: -50px -83px;
    }
    .ot-icon--Move {
        background-position: -90px -83px;
    }
    .ot-icon--HAlignLeft {
        background-position: -130px -83px;
    }
    .ot-icon--HAlignCenter {
        background-position: -170px -83px;
    }
    .ot-icon--HAlignRight {
        background-position: -210px -83px;
    }
    .ot-icon--VAlignBottom {
        background-position: -250px -83px;
    }
    .ot-icon--VAlignCenter {
        background-position: -290px -83px;
    }
    .ot-icon--VAlignTop {
        background-position: -330px -83px;
    }
    .ot-icon--Attachment {
        background-position: -371px -84px;
    }

    /* Vierde rij sprite */
    .ot-icon--Check {
        background-position: -11px -124px;
    }
    .ot-icon--FilterOn {
        background-position: -50px -124px;
    }
    .ot-icon--Previous {
        background-position: -90px -124px;
    }
    .ot-icon--Next {
        background-position: -130px -124px;
    }
    .ot-icon--Stats {
        background-position: -170px -124px;
    }
    .ot-icon--Undo {
        background-position: -210px -124px;
    }
    .ot-icon--Redo {
        background-position: -250px -124px;
    }
    .ot-icon--UndoAll {
        background-position: -290px -124px;
    }
    .ot-icon--Pinned {
        background-position: -331px -124px;
    }
    .ot-icon--UnPinned {
        background-position: -371px -124px;
    }

    /* Vijfde rij sprite */
    .ot-icon--add-plus {
        background-position: -11px -164px;
    }
    .ot-icon--delete-red {
        background-position: -50px -163px;
    }
    .ot-icon--add-green {
        background-position: -91px -163px;
    }
    .ot-icon--NOK {
        background-position: -130px -163px;
    }
    .ot-icon--Social {
        background-position: -170px -163px;
    }
    .ot-icon--Picture {
        background-position: -210px -163px;
    }
    .ot-icon--Portrait {
        background-position: -250px -163px;
    }
    .ot-icon--Landscape {
        background-position: -290px -163px;
    }
    .ot-icon--Chat {
        background-position: -331px -164px;
    }
    .ot-icon--Seperator {
        background-position: -370px -163px;
    }

    /* Zesde rij sprite */
    .ot-icon--Info {
        background-position: -91px -204px;
    }
    .ot-icon--FullScreen {
        background-position: -131px -204px;
    }
    .ot-icon--GridScreen {
        background-position: -171px -204px;
    }
    .ot-icon--KabanScreen {
        background-position: -211px -204px;
    }
    .ot-icon--Checklist{
        background-position: -251px -204px;
    }
    .ot-icon--Drag,
    .ot-icon--FicheScreen {
        background-position: -291px -204px;
    }
    .ot-icon--Drag {
        opacity: 0.2;
        margin: 7px 0;
    }
    .ot-icon--Category {
        background-position: -331px -204px;
    }

    /* Zevende rij sprite */
    .ot-icon--Emoji {
        background-position: -11px -244px;
    }
    .ot-icon--Unread {
        background-position: -51px -244px;
    }

    .ot-icon--emergency {
        background-position: -170px -244px;
    }
    .ot-icon--location {
        background-position: -210px -244px;
    }
    .ot-icon--telephone {
        background-position: -250px -244px;
    }
    .ot-icon--email {
        background-position: -290px -244px;
    }
    .ot-icon--identification {
        background-position: -330px -244px;
    }
    .ot-icon--gender {
        background-position: -370px -244px;
    }
    .ot-icon--Edit:hover {
        background-color: #dadfe8;    
        border: 1px solid #DDE0DF;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
            -ms-transition: all 0.2s ease-in-out;
            -o-transition: all 0.2s ease-in-out;
                transition: all 0.2s ease-in-out;
    }
    .ot-icon--Edit:hover,
    .ot-icon--Delete:hover {
        background-color: #fff;
    }

/*  ----------------------------------------------------------
    Declaration of all classes for the main-window
    ----------------------------------------------------------  */
    .ot-fixed {
        position: fixed; 
        left: 0px; 
        top: 0px; 
        right: 0px; 
        bottom: 0px
    }

/*  ----------------------------------------------------------
    Declaration of all classes for the main-windows
    ----------------------------------------------------------  */
    .ot-fixed--menu {
        position: absolute; 
        left: 0px; 
        top: 0px; 
        width: 230px; 
        bottom: 0px; 
        padding: 10px 10px; 
        background: var(--blue-color);
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box; 
        z-index: 8999;
    }
    .ot-fixed--header {
        position: absolute; 
        left: 230px; 
        top: 0px; 
        right: 0px; 
        height: 70px; 
        color: #000;
        background: #fff; 
        border-bottom: 1px solid #dfdfdf; 
        -webkit-box-sizing: border-box; 
           -moz-box-sizing: border-box; 
                box-sizing: border-box;    
        -webkit-box-shadow: -2px 5px 3px -2px rgba(150, 150, 150, 0.1);
        -moz-box-shadow: -2px 5px 3px -2px rgba(150, 150, 150, 0.1);
                box-shadow: -2px 5px 3px -2px rgba(150, 150, 150, 0.1);   
        overflow: visible;
        z-index: 8998;
    }
/*  ----------------------------------------------------------
    Declaration of all classes for the mainspace (working place)
    ----------------------------------------------------------  */
    .ot-fixed--workspace {
        position: absolute; 
        left: 230px; 
        top: 70px; 
        width: calc(100% - 230px); 
        bottom: 0px; 
        background: var(--workspacecolor); 
        padding: 50px 75px;  
        -webkit-box-sizing: border-box; 
        -moz-box-sizing: border-box; 
                box-sizing: border-box;
        overflow: visible
    }
/*  ----------------------------------------------------------
    Declaration of all classes for the mainspace (working place)
    ----------------------------------------------------------  */
    .ot-fixed-workspace--tabspace {
        position: absolute; 
        left: 75px; 
        top: 0px; 
        right: 75px; 
        height: 100px; 
        -webkit-box-sizing: border-box; 
           -moz-box-sizing: border-box; 
                box-sizing: border-box;
        overflow: visible
    }
    .ot-fixed--tabspace {
        position: absolute; 
        left: 50px; 
        top: 0px; 
        right: 50px; 
        height: 60px; 
        -webkit-box-sizing: border-box; 
           -moz-box-sizing: border-box; 
                box-sizing: border-box;
        overflow: visible
    }
    .ot-fixed--tabspace-window {
        display: none;
        position: absolute; 
        left: 0px; 
        top: 65px; 
        right: 0px; 
        bottom: 0px; 
        padding: 25px 50px;
        -webkit-box-sizing: border-box; 
           -moz-box-sizing: border-box; 
                box-sizing: border-box;
        overflow-y: scroll
    }
    .ot-fixed--container-window {
        display: none;
        position: absolute; 
        left: 0px; 
        top:75px; 
        right: 0px; 
        bottom: 0px; 
        padding: 25px 50px;
        -webkit-box-sizing: border-box; 
           -moz-box-sizing: border-box; 
                box-sizing: border-box;
        overflow-y: scroll
    }

    .ot-fixed--centerspace {
        position: absolute; 
        left: 50%; 
        width: 1280px; 
        top: 0px; 
        bottom: 0px; 
        margin-left: -640px; 
        padding: 25px; 
        -webkit-box-sizing: border-box; 
        -moz-box-sizing: border-box; 
                box-sizing: border-box;
    }
/*  ----------------------------------------------------------
    Declaration of all classes for the mainspace (working place)
    ----------------------------------------------------------  */
    .ot-fixed-workspace--overviewspace {
        position: absolute; 
        left: 75px; 
        top: 100px;
        right: 75px; 
        bottom: 50px; 
        -webkit-box-sizing: border-box; 
           -moz-box-sizing: border-box; 
                box-sizing: border-box;
        overflow: hidden;
    }
    .ot-fixed-workspace--overviewspace-hierarchy {
        position: absolute; 
        left: 0px; 
        top: 100px;
        right: 0px; 
        bottom: 0px; 
        padding: 0 50px 50px 50px;
        -webkit-box-sizing: border-box; 
           -moz-box-sizing: border-box; 
                box-sizing: border-box;
        overflow: hidden;
    }

    .ot-fixed-workspace--headerspace {
        position: absolute; 
        display: inline-block;
        left: 0px; 
        top: 0px;
        height: 40px; 
        -webkit-box-sizing: border-box; 
           -moz-box-sizing: border-box; 
                box-sizing: border-box;
        border-bottom: 1px solid #e9e7e3;
        overflow: hidden
    }
    .ot-fixed-workspace--listspace-container {
        position: absolute; 
        left: 0px; 
        top: 40px;
        right: 0px; 
        height: calc(100% - 40px); 
        background: #fff;
        -webkit-box-sizing: border-box; 
           -moz-box-sizing: border-box; 
                box-sizing: border-box;
        overflow-x: scroll;
        overflow-y: scroll;
    }
    .ot-fixed-workspace--listspace {
        position: absolute; 
        display: inline-block;
        left: 0px; 
        top: 0px;
        -webkit-box-sizing: border-box; 
           -moz-box-sizing: border-box; 
                box-sizing: border-box;
        overflow: hidden
        
    }
    /*---------------------------------------------
      --------------------------------------------*/

    .ot-login--window {
        position: absolute; 
        left: 0px; 
        top: 300px; 
        width: 400px; 
        height: 300px; 
        background: #FFF; 
        text-align: left; 
        vertical-align: top; 
        opacity: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
    .ot-login--screen {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 50%;
        bottom: 0px;
        font-size: 13px;
        background: #FFF;
    }
    .ot-noscript {
        position: absolute;
        left: 0px;
        top: 0px;
        right: 0px;
        bottom: 0px;
        background: #f7f7f7;
    }

    .ot-register--screen {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        bottom: 0px;
        font-size: 13px;
        background: #FFF;
    }
    .ot-logo-otentive-login {
        position: absolute;
        left: 50%;
        margin-left: -38px;
        width: 75px;
        height: 75px;
        background-image: url('../images/ot-logo-login--second-color.png?version=4');
        background-size: 75px 75px;
    }
    .logo-bar {
        float: left;
        width: 200px; 
        height: 200px; 
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
    .app-account,
    .registerAccount,
    .app-forgotten {
        font-family: 'Proxima-Semibold', "Helvetica", Helvetica, Arial, sans-serif;
        font-size: 13px;
        color: var(--blue-color);
    }
    .registerAccount {
        color: var(--blue-color);
    }
    .registerAccount:hover,
    .app-forgotten:hover {
        color: var(--blue-light-color);
    }

    .labelNoScript {
        font-family: 'Proxima-Light';
        font-size: 30px;
    }
    .ot-label--subtitle {
        font-family: 'Proxima-Light';
        font-size: 16px;
    }
    .notActive {
        opacity: 0.6;
        pointer-events: none;
        cursor: default;
    }

    
    .ot-window--add-dialog,
    .ot-window--photo-dialog  {
        position: absolute;
        left: 50%;
        top: -100%;
        width: 600px;
        height: -webkit-calc(100% - 120px);
        height:    -moz-calc(100% - 120px);
        height:         calc(100% - 120px);
        margin-left: -300px;
        background: var(--workspacecolor); 
        border-top: 10px solid var(--yellow-color); 
        padding: 15px 25px 25px 25px; 
        border-radius: 10px; 
        -webkit-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.4);
           -moz-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.4);
                box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.4);     
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box; 
        opacity: 0;
        z-index: 9999998;
        overflow: hidden
    }

    .ot-window--preview-dialog {
        position: absolute;
        left: 50%;
        top: -100%;
        width: 600px;
        height: -webkit-calc(100% - 120px);
        height:    -moz-calc(100% - 120px);
        height:         calc(100% - 120px);
        margin-left: -300px;
        background: var(--workspacecolor); 
        border-top: 10px solid var(--workspacecolor); 
        padding: 15px 25px 25px 25px; 
        border-radius: 10px; 
        -webkit-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.4);
           -moz-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.4);
                box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.4);     
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box; 
        opacity: 0;
        z-index: 999998;
        overflow: hidden
    }


    .ot-bar--header,
    .ot-bar--footer,
    .ot-bar--window,
    .ot-bar--window-confirmation {
        position: absolute; 
        left: 0px; 
        right: 0px;
        padding: 12px 15px;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }

    .ot-bar--window {
        top: 0px;
        bottom: 67px;
        background: #fff; 
        padding: 25px 50px;
        overflow-y: scroll;
    }
    .ot-bar--window-confirmation {
        background: var(--workspacecolor); 
    }
    .ot-bar--header { 
        height: 66px;  
        color: #000;
        background: var(--workspacecolor); 
        border-bottom: 1px solid #000; /*#dadfe8; */
    }

    .ot-bar--footer {    
        height: 67px;  
        bottom: 0px;
        background: var(--workspacecolor); 
        border-top: 1px solid #dadfe8; 
    }

    .ot-message-box {   
        position: absolute;
        left: 50%;
        top: -100%;
        width: 600px;
        height: -webkit-calc(100% - 120px);
        height:    -moz-calc(100% - 120px);
        height:         calc(100% - 120px);
        margin-left: -300px;
        border-top: 10px solid var(--workspacecolor); 
        background: #f0f0f0;
        padding: 15px 25px 25px 25px; 
       /* border: 1px solid #dadfe8; */
        border-radius: 10px; 
        -webkit-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.4);
           -moz-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.4);
                box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.4);     
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box; 
        opacity: 0;
        z-index: 999999;
        overflow: hidden
    }
    .ot-message-box {
        height: 275px;
        z-index: 999999;
    }
    /*  ----------------------------------------------------------
        Declaration of all classes for the disabled-window
        ----------------------------------------------------------  */
    .ot-preference--menu-space {
        position: absolute; 
        left: 0px; 
        top: 0px; 
        width: 275px; 
        bottom: 0px; 
        background: #FFF; 
        border-right: 1px solid #dadfe8;
    }
    .ot-preference--workspace {
        position: absolute; 
        left: 276px; 
        top: 0px; 
        right: 0px; 
        bottom: 0px; 
        padding: 50px;
        background: var(--workspacecolor); 
        -webkit-box-sizing: border-box; 
        -moz-box-sizing: border-box; 
                box-sizing: border-box;
    }
    .ot-preference-workspace--overviewspace {
        position: absolute; 
        left: 75px; 
        top: 100px;
        right: 75px; 
        bottom: 50px; 
        -webkit-box-sizing: border-box; 
           -moz-box-sizing: border-box; 
                box-sizing: border-box;
        overflow: hidden;
    }
    /*  ----------------------------------------------------------
        Declaration of all classes for the disabled-window
        ----------------------------------------------------------  */
    .ot-disabled-window,
    .popupBoxWindow {
        display: block;
        position: absolute; 
        left: -2px; 
        top: -2px; 
        bottom: -2px; 
        right: -2px;
        background: #000;
        opacity: 0.7;
        z-index: 9000;
    }
    .popupBoxWindow {
        background: #000;
        opacity: 0.7;
        z-index: 999992;
    }
    
    .popupBox {   
        display: block;
        position: relative; 
        top: 100px;
        left: 200px;
        width: 0px;
        height: auto;
        max-height: 350px;
        font-size: 14px;
        background: #FFF;
        border: 1px solid #dadfe8;
        -webkit-border-radius: 5px;
           -moz-border-radius: 5px;
             -o-border-radius: 5px;
                border-radius: 5px;  
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box; 
        -webkit-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.3);
           -moz-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.3);
                box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.3);        
        z-index: 9999999999;
        opacity: 0;
        overflow: hidden;
    }

    .popupBox ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    .popupBox li {
        color: #3e3e3e;
        cursor: pointer
    }
    .popupBox li.popupItem {
        font-size: 12px;
        padding: 14px 25px 14px 27px;
        cursor: pointer;
    }
    .popupBox li.popupItemIcon {
        font-size: 12px;
        padding: 14px 25px 14px 14px;
    }
    .popupBox li.popupItemMixed {
        padding: 25px 25px 25px 27px;
    }
    .popupBox li:hover {
        background: var(--workspacecolor);
    }
    .popupBox li.popupSeparator {
        height: 1px;
        background: #dadfe8;
        padding: 0 0;
    }
/*  ----------------------------------------------------------
    Declaration of all classes for the mainspace (working place)
    ----------------------------------------------------------  */
    .ot-logo--header {    
        float: left;
        display: block;
        position: absolute;
        left: 16px;
        top: 16px;
        width: 40px;
    }
    .ot-logo--header-wide {    
        float: left;
        display: none;
        position: absolute;
        left: 44px;
        top: 20px;
        width: 148px;
    }
/*  ----------------------------------------------------------
    Declaration of all classes for the mainspace (working place)
    ----------------------------------------------------------  */
    .ot-main-menu--bottom {
        position: absolute; 
        left: 0px; 
        right: 0px; 
        bottom: -50px; 
        height: 200px; 
        background: var(--yellow-color);
        border-top: 10px solid #fff; 
        -ms-transform: skewY(15deg); 
        transform: skewY(15deg);
    }
    ol.ot-main-menu {
        display: block;
        position: absolute;
        left: 10px;
        top: 76px;
        margin: 0;  
        padding: 0;
        list-style: none;
        width: 100%;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;  
    }
    
    ol.ot-main-menu > li {
        float: left;
        position: relative;
        display: block;
        width: 50px;
        height: 50px;
        font-size: 0.8em;
        font-family: 'Proxima-Light';
        margin: 0px 0px;
        color: #fff;
        text-align: center;
        background: var(--blue-color);
        cursor: pointer;
        -webkit-border-radius: 7px;
           -moz-border-radius: 7px;
             -o-border-radius: 7px;
                border-radius: 7px;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
    
    ol.ot-main-menu > li:hover {
        color: #fff;
        background: var(--blue-light-color);
        transition: all 0.2s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
           -moz-transition: all 0.3s ease-in-out;
            -ms-transition: all 0.3s ease-in-out;
             -o-transition: all 0.3s ease-in-out;
                transition: all 0.3s ease-in-out;
    }
    ol.ot-main-menu > li > span.ot-main-menu--dashboard,
    ol.ot-main-menu > li > span.ot-main-menu--news,
    ol.ot-main-menu > li > span.ot-main-menu--players,
    ol.ot-main-menu > li > span.ot-main-menu--clubs,
    ol.ot-main-menu > li > span.ot-main-menu--games,
    ol.ot-main-menu > li > span.ot-main-menu--games-women,
    ol.ot-main-menu > li > span.ot-main-menu--games-u23,
    ol.ot-main-menu > li > span.ot-main-menu--prematch,
    ol.ot-main-menu > li > span.ot-main-menu--pictures,
    ol.ot-main-menu > li > span.ot-main-menu--our-preferences
    {
        display: block;
        position: absolute;
        left: 5px;
        top: 5px;
        width: 40px;
        height: 40px;
        background-image: url('../images/ot-main-menu--sprites.png?version=00004');
        background-size: 120px 120px;
        background-repeat: no-repeat;
        cursor: pointer
    }
    ol.ot-main-menu > li > span.ot-main-menu--news {
        background-position: -80px -80px;
    }
    ol.ot-main-menu > li > span.ot-main-menu--players {
        background-position: -40px -40px;
    }
    ol.ot-main-menu > li > span.ot-main-menu--our-preferences {
        background-position: -80px 0px;
    }
    ol.ot-main-menu > li > span.ot-main-menu--dashboard {
        background-position: 0px -40px;
    }
    ol.ot-main-menu > li > span.ot-main-menu--clubs {
        background-position: 0px 0px;
    }
    ol.ot-main-menu > li > span.ot-main-menu--pictures {
        background-position: -40px -40px;
    }
    ol.ot-main-menu > li > span.ot-main-menu--games {
        background-position: -80px -40px;
    }
    ol.ot-main-menu > li > span.ot-main-menu--games-women {
        background-position: -0px -80px;
    }
    ol.ot-main-menu > li > span.ot-main-menu--games-u23 {
        background-position: -40px -0px;
    }
    ol.ot-main-menu > li > span.ot-main-menu--prematch {
        background-position: -40px -80px;
    }
    
    ol.ot-main-menu > li > label {
        display: none;
        position: absolute;
        left: 55px;
        line-height: 23px;
        font-size: 1.2em;
        font-family: 'Proxima-Regular';
        padding: 15px 0 0 0;
        cursor: pointer;
    }
    ol.ot-main-menu > li:hover > label {
        font-family: 'Proxima-Bold';
    }
    ol.ot-main-menu > li.header {
        float: left;
        width: calc(100% - 14px);
        font-size: 11px;
        font-family: 'Proxima-Bold';
        text-transform: uppercase;
        margin-top: 14px;
        padding: 7px 7px 7px 7px;
        color: #313239;
        background: #dadfe8; /*11668f; /*11668f;; /*#ff9c71;*/
        transition: all 0.2s ease-in-out;
        cursor: default;
    }

    ol.ot-tab-menu {
        display: block;
        position: absolute;
        left: 0px;
        top: 0px;
        right: 0px;
        height: 45px;
        margin: 14px 0 0 0;  
        padding: 0 14px;
        list-style: none;
        border-bottom: 0px;
        width: 100%;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;  
    }
    
    ol.ot-tab-menu > li.ot-tab-menu--title {
        float: left;
        position: relative;
        display: block;
        height: 45px;
        font-size: 20px;
        font-family: 'Proxima-Bold';
        margin: 0px 0px;
        padding: 7px 56px 7px 14px;
        line-height: 28px;
        color: var(--yellow-color);
        text-align: center;
        cursor: pointer;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
    
    ol.ot-tab-menu > li.ot-tab-menu--left {
        float: left;
        position: relative;
        display: block;
        height: 45px;
        font-size: 13px;
        font-family: 'Proxima-Regular';
        text-transform: uppercase;
        margin: 0px 0px;
        padding: 7px 14px;
        line-height: 28px;
        color: var(--tablightcolor);
        text-align: center;
        cursor: pointer;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
    
    ol.ot-tab-menu > li.ot-tab-menu--left:hover {
        color: var(--tabhovercolor);
        border-bottom: 4px solid var(--tabhovercolor);
        -webkit-transition: all 0.2s ease-in-out;
           -moz-transition: all 0.2s ease-in-out;
            -ms-transition: all 0.2s ease-in-out;
             -o-transition: all 0.2s ease-in-out;
                transition: all 0.2s ease-in-out;
    }
    ol.ot-tab-menu > li.selected {
        font-family: 'Proxima-Bold';
        color: var(--secondcolor);
        border-bottom: 4px solid var(--secondcolor);
        cursor: default;
    }
    ol.ot-tab-menu > li.ot-tab-menu--right,
    ol.ot-tab-menu > li.ot-tab-menu--right {
        float: right;
        position: relative;
        display: block;
        width: auto;
        padding: 0px;
        overflow: visible
    }


    ol.ot-tab-preference {
        display: block;
        position: absolute;
        left: 0px;
        top: 0px;
        right: 0px;
        height: 45px;
        margin: 21px 0 0 0;  
        padding: 0;
        list-style: none;
        width: 100%;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;  
    }
    
    ol.ot-tab-preference > li.ot-tab-preference--left {
        float: left;
        position: relative;
        display: block;
        height: 45px;
        font-size: 16px;
        font-family: 'Proxima-Bold';
        margin: 0px 0px;
        padding: 7px 14px;
        line-height: 28px;
        color: var(--blue-color);
        text-align: center;
        cursor: pointer;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
    ol.ot-tab-preference > li.ot-tab-preference--right {
        float: right;
        position: relative;
        display: block;
        width: auto;
        padding: 0px;
    }
    ol.ot-tab-preference > li.ot-tab-preference--title,
    .ot-preference--title ,
    .ot-preference--header {
        font-size: 24px;
        font-family: 'Proxima-Regular';
        padding: 14px 14px;
        line-height: 28px;
        color: var(--blue-color);
    }
    .ot-preference--title {
        float: left;
        padding: 14px 0;
    }
    .ot-preference--header {
        float: left;
        padding: 0 0 14px 0;
    }

    
/*  ----------------------------------------------------------
    Declaration of all classes for the mainspace (working place)
    ----------------------------------------------------------  */
    .ot-table--row {
        float: left;
        width: 100%;
        height: 66px;
        background: #fff;
        border-bottom: 1px solid #e9e7e3;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box; 
        cursor: pointer;
        overflow: hidden;
    }
    .ot-table--row:hover {
        
        background: var(--workspacecolor);
    }

    .ot-cell--header {
        padding: 0;
        height: 50px;
        font-family: 'Proxima-Bold';
        vertical-align: middle;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
        background: var(--workspacecolor);
        cursor: pointer;
    }

    .ot-table--cell,
    .ot-table--cell-header,
    .ot-table--cell-header-none {
        float: left;
        display: table;
        position: relative;
        height: 100%; 
        padding: 0;
        vertical-align: middle;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
        cursor: pointer;
    }

    .ot-table--cell-header {
        color: #374050;
        border-right: 1px solid #e9e7e3;
    }
    .ot-table--cell-header:hover {
        background: #cbc7bf;
    }

    .ot-table--cell-header-none {
        color: #374050;
        border-right: 1px solid transparent;
    }
    .ot-table--cell-header-none:hover {
        background: transparent;
    }
    .ot-table--cell-centered {
        position: absolute;
        display: table-cell;
        margin: 0;
        padding: 7px;
        float: left;
        top: 50%;
        width: 100%;
        transform: translateY(-50%);
        white-space: nowrap;
        -webkit-text-overflow: ellipsis;
                text-overflow: ellipsis;
        overflow: hidden;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
    .ot-table--header {
        font-size: 12px;
        font-family: 'Proxima-Light';
        text-transform: uppercase;
    }
    .ot-table--header-checkbar {
        position: absolute; 
        left: 101%; 
        top: 0px; 
        width: calc(100% - 42px); 
        height: 40px; 
        text-align: right; 
        background: var(--workspacecolor);
        padding: 12px 0px;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
    .ot-table-cell--edit-header {
        position: absolute; 
        background: transparent; 
        right: 0px; 
        top: 0px; 
        width: 300px;
    }

    .ot-table--toolbar,
    .ot-table--toolbar-header {
        background: #FFF;
        padding: 4px 4px;
        -webkit-border-radius: 50px;
           -moz-border-radius: 50px;
             -o-border-radius: 50px;
                border-radius: 50px;
        -webkit-box-shadow: 0px 3px 3px 0px rgba(150, 150, 150, 0.2);
           -moz-box-shadow: 0px 3px 3px 0px rgba(150, 150, 150, 0.2);
                box-shadow: 0px 3px 3px 0px rgba(150, 150, 150, 0.2);   
    }
    .ot-table--toolbar {
        height: 30px;
    }
    .ot-table--toolbar-header {
        position: absolute; 
        right: 0px; 
        top: 2px; 
        width: auto; 
        display: block
    }

    .ot-list--container {
        float: left;
        position: relative;
        width: 230px;
        height: 90px;   
        cursor: pointer;     
    }
    .ot-list--photo-small {
        height: 54px;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
    .ot-profile--photo-small {
        height: 54px;
        border-radius: 100px;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }

    .ot-live-item {
        background: transparent;
        cursor: pointer;
    }
    .ot-live-item:hover {
        background: #eaece7
    }
    .ot-profile--normal {
        float: left;
        width: 150px;
        height: 150px;
        -webkit-border-radius: 14px;
           -moz-border-radius: 14px;
             -o-border-radius: 14px;
                border-radius: 14px;   
    }
    .ot-profile--normal-outer {
        display: inline-block;
        width: 152x;
        height: 152px;
        cursor: pointer
    }

    .ot-list--description {
        position: absolute;
        left: 30px;
        top: 0px;
        width: 175px;
        height: 80px;
        padding: 7px 7px 7px 32px;
        text-align: center;
        color: #fff;
        background: var(--blue-color);
        -webkit-border-radius: 14px;
           -moz-border-radius: 14px;
             -o-border-radius: 14px;
                border-radius: 14px;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
        -webkit-box-shadow: -2px 5px 3px -2px rgba(150, 150, 150, 0.5);
           -moz-box-shadow: -2px 5px 3px -2px rgba(150, 150, 150, 0.5);
                box-shadow: -2px 5px 3px -2px rgba(150, 150, 150, 0.5);  
    }
    .ot-list--description-name {
        font-size: 14px;
        font-family: 'Proxima-Bold';
    }
    .ot-list--description-position  {
        font-size: 11px;
        font-family: 'Proxima-Regular';
    }
    .ot-list--description-default,
    .ot-position--description-default {
        font-size: 14px;
        font-family: 'Proxima-Light';
    }
    .ot-list--description-small-default,
    .ot-position--description-small-default {
        font-size: 12px;
        font-family: 'Proxima-Light';
    }
    .ot-list--hierarchy-seperator {
        float: left;
        width: 100%;
        height: 15px;
    }
    .ot-list--edit-photo {
        float: left; 
        width: 150px; 
        border-radius: 150px; 
        border: 5px solid #fff;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
        -webkit-box-shadow: 0px 3px 10px 0px rgba(150, 150, 150, 0.5);
           -moz-box-shadow: 0px 3px 10px 0px rgba(150, 150, 150, 0.5);
                box-shadow: 0px 3px 10px 0px rgba(150, 150, 150, 0.5);   
        -webkit-transition: all 0.2s ease-in-out;
           -moz-transition: all 0.2s ease-in-out;
            -ms-transition: all 0.2s ease-in-out;
             -o-transition: all 0.2s ease-in-out;
                transition: all 0.2s ease-in-out;
        cursor: pointer;
    }

    .ot-list--edit-photo:hover {
        border: 5px solid var(--workspacecolor);
        -webkit-transition: all 0.2s ease-in-out;
           -moz-transition: all 0.2s ease-in-out;
            -ms-transition: all 0.2s ease-in-out;
             -o-transition: all 0.2s ease-in-out;
                transition: all 0.2s ease-in-out;
    }


    .ot-club--badge  {
        position: absolute;
        cursor: pointer;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
        -webkit-transition: all 0.4s ease-in-out;
           -moz-transition: all 0.4s ease-in-out;
            -ms-transition: all 0.4s ease-in-out;
             -o-transition: all 0.4s ease-in-out;
                transition: all 0.4s ease-in-out;
    }

    .ot-club--badge-overlay {
        position: absolute;
        width: 300px;
        height: 300px;
        cursor: pointer;
        -webkit-border-radius: 3px;
           -moz-border-radius: 3px;
             -o-border-radius: 3px;
                border-radius: 3px;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
        -webkit-transition: all 0.4s ease-in-out;
           -moz-transition: all 0.4s ease-in-out;
            -ms-transition: all 0.4s ease-in-out;
             -o-transition: all 0.4s ease-in-out;
                transition: all 0.4s ease-in-out;
    }
    .ot-club--badge-overlay:hover {
        color: #fff;
        border: 1px solid var(--workspacecolor);
        background: var(--workspacecolor);
        -webkit-opacity: 0.5;
           -moz-opacity: 0.5;
                opacity: 0.5;
    }

    .ot-player--photo  {
        position: absolute;
        width: 200px;
        height: 244px;
        cursor: pointer;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
        -webkit-transition: all 0.4s ease-in-out;
           -moz-transition: all 0.4s ease-in-out;
            -ms-transition: all 0.4s ease-in-out;
             -o-transition: all 0.4s ease-in-out;
                transition: all 0.4s ease-in-out;
    }

    .ot-player--photo-overlay {
        position: absolute;
        width: 200px;
        height: 244px;
        cursor: pointer;
        -webkit-border-radius: 3px;
           -moz-border-radius: 3px;
             -o-border-radius: 3px;
                border-radius: 3px;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
        -webkit-transition: all 0.4s ease-in-out;
           -moz-transition: all 0.4s ease-in-out;
            -ms-transition: all 0.4s ease-in-out;
             -o-transition: all 0.4s ease-in-out;
                transition: all 0.4s ease-in-out;
    }
    .ot-player--photo-overlay:hover {
        color: #fff;
        border: 1px solid var(--workspacecolor);
        background: var(--workspacecolor);
        -webkit-opacity: 0.5;
           -moz-opacity: 0.5;
                opacity: 0.5;
    }

    .ot-news--picture  {
        position: absolute;
        cursor: pointer;
        width: 600px;
        height: 400px;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
        -webkit-transition: all 0.4s ease-in-out;
           -moz-transition: all 0.4s ease-in-out;
            -ms-transition: all 0.4s ease-in-out;
             -o-transition: all 0.4s ease-in-out;
                transition: all 0.4s ease-in-out;
    }

    .ot-news--picture-overlay {
        position: absolute;
        width: 600px;
        height: 400px;
        cursor: pointer;
        -webkit-border-radius: 3px;
           -moz-border-radius: 3px;
             -o-border-radius: 3px;
                border-radius: 3px;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
        -webkit-transition: all 0.4s ease-in-out;
           -moz-transition: all 0.4s ease-in-out;
            -ms-transition: all 0.4s ease-in-out;
             -o-transition: all 0.4s ease-in-out;
                transition: all 0.4s ease-in-out;
    }
    .ot-news--picture-overlay:hover {
        color: #fff;
        border: 1px solid var(--workspacecolor);
        background: var(--workspacecolor);
        -webkit-opacity: 0.5;
           -moz-opacity: 0.5;
                opacity: 0.5;
    }

    .listPageBar {
        position: absolute; 
        bottom: 0px; 
        left: 0px;
        width: 100%; 
        height: 50px; 
        padding: 7px 7px; 
        background: #f7f7f7;
        text-align: center;
        border-top: 1px dashed #e3e2df; 
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
             -o-box-sizing: border-box;
                box-sizing: border-box;   
    }
    .listPage,
    .listPageSelect {
        float: right; 
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        color: #444;
        -webkit-border-radius: 100px;
           -moz-border-radius: 100px;
             -o-border-radius: 100px;
                border-radius: 100px; 
        -webkit-transition: all 0.2s ease-in-out;
           -moz-transition: all 0.2s ease-in-out;
            -ms-transition: all 0.2s ease-in-out;
             -o-transition: all 0.2s ease-in-out;
                transition: all 0.2s ease-in-out;
        cursor: pointer;
        margin: 2px 2px;
    }
    .listPage:hover {
        background: #e3e2df;
    }
    .listPageSelect {
        color: #fff;
        background: var(--fallmidcolor);
    }
    

.photoBox {
    height: 265px;
    width: 265px;
    border: 1px solid #999;
    border-radius: 3px;
    margin: 20px 30px;
    padding: 0 0;
    overflow: hidden;
    -webkit-transform: translateZ(0);
    float: left;
    position: relative;
    display: block;
    left: 20px;
    top: 0px;
}

.photoMainBox {
    height: 265px;
    width: 217px;
    border: 1px solid #999;
    border-radius: 3px;
    margin: 20px 30px;
    padding: 0 0;
    overflow: hidden;
    float: left;
    position: relative;
    display: block;
    left: 20px;
    top: 0px;
    -webkit-transform: translateZ(0);
}
.photoCenterer {
    position: absolute;
    cursor: crosshair;
}
.photoCenterer img {
    position: absolute;
    display: block;
}

.photoBtn,
.photoMainBtn {
    float: left;
    position: relative;
    left: 0px;
    top: 0px;
    height: 50px;
    line-height: 40px;
    width: 265px;
    margin: 0px 30px;
    overflow: hidden;
    text-align: center;
}
.photoMainBtn {
    width: 217px;
}
/*  ----------------------------------------------------------
    Declaration of all classes for the preference menu
    ----------------------------------------------------------  */
    ol.ot-preferences {
        font-family: 'Proxima-Regular';
        font-size: 1em;
        padding: 0;  
        list-style: none;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
                box-sizing: border-box;  
    }
    ol.ot-preferences > li {
        padding: 5px 0;
    }
    ol.ot-preferences > li.header {
        font-family: 'Proxima-Bold';
        font-size: 0.9em;
        color: var(--blue-color);
        text-transform: uppercase;
        padding: 7px 15px;
        margin-top: 15px;
    }
    ol.ot-preferences > li.menu {
        padding: 7px 35px;  
        color: #374050;
        cursor: pointer;
    }
    ol.ot-preferences > li.menu:hover {
        color: #374050;
        background: var(--workspacecolor);
    }

    .ot-row--competency {
        float: left;
        width: 100%;
        padding: 14px;
        border-bottom: 1px solid #dfdfdf; 
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box; 
        -webkit-transition: all 0.2s ease-in-out;
           -moz-transition: all 0.2s ease-in-out;
            -ms-transition: all 0.2s ease-in-out;
             -o-transition: all 0.2s ease-in-out;
                transition: all 0.2s ease-in-out;
        cursor: pointer;
        overflow: hidden;
    }
    .ot-row--competency:hover {
        color: #fff;
        background: var(--workspacecolor);
    }

    .ot-position--background-header {
        float: left;
        width: 50%;
        padding: 7px 15px;
        background: var(--workspacecolor); 
        -webkit-border-radius: 14px;
           -moz-border-radius: 14px;
                border-radius: 14px;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box; 
    }
/*  ----------------------------------------------------------
    Declaration of all classes for the mainspace (working place)
    ----------------------------------------------------------  */
    .ot-page--loading,
    .pageLoadingWhite,
    .pageNoFieldsAvailable {
        position: absolute;
        left: 0px;
        top: 0px;
        right: 0px;
        bottom: 0px;
        background: var(--workspacecolor); 
        padding: 25px 25px;
    }

    @keyframes progressAni {
        0% {  
            width: 60px;
            height: 60px;
            margin: -30px -30px;  
            opacity: 1;  
        }
        48% {
            width: 110px;
            height: 110px;
            margin: -55px -55px;        
        }
        
        50% {
            opacity: 0.5;     
        }
        52% {
            width: 110px;
            height: 110px;
            margin: -55px -55px;        
        }
        100% {  
            width: 60px;
            height: 60px;
            margin: -30px -30px;   
            opacity: 1;   
        }
    }

    @keyframes progressAni2 {
        0% {         
            width: 50px;
            height: 50px;
            margin: -25px -25px; 
            opacity: 1;  
        }
        48% {    
            width: 20px;
            height: 20px;
            margin: -10px -10px;
        }
        
        50% {
            opacity: 0.5;     
        }
        52% {  
            width: 20px;
            height: 20px;
            margin: -10px -10px;
        }
        100% {      
            width: 50px;
            height: 50px;
            margin: -25px -25px; 
            opacity: 1;  
        }
    }

    @keyframes progressAni3 {
        0% {         
            width: 50px;
            height: 50px;
            margin: -25px -25px; 
            opacity: 1;  
        }
        50% {    
            width: 80px;
            height: 80px;
            margin: -40px -40px;
            opacity: 0.5;     
        }
        100% {      
            width: 50px;
            height: 50px;
            margin: -25px -25px; 
            opacity: 1;  
        }
    }

    .ot-progress--animation {
        position: relative;
        width: 110px;
        height: 110px;
        left: 50%;
        top: 30%;
        margin-left: -65px;
        margin-top: -55px;
    }

    .ot-progress--image,
    .ot-progress--center,
    .ot-progress--middle {
        position: absolute;
        left: 75px;
        top: 75px;   
        width: 50px;
        height: 50px;
        margin: -25px -25px;
        border-radius: 300px; 
        background-color: var(--blue-color);
        animation-name: progressAni;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out
    }

    .ot-progress--center,
    .ot-progress--middle {
        width: 30px;
        height: 30px;
        margin: -15px -15px;
        border-radius: 300px; 
        background-color: #FFF;
        animation-name: progressAni3;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out
    }
    .ot-progress--middle {
        background-color: var(--blue-light-color);
        animation-name: progressAni2;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out
    }


    .ot-switch {
        position: relative;
        display: inline-block;
        left: 2px;
        top: 5px;
        width: 45px;
        height: 24px;
        line-height: 24px;
        -webkit-border-radius: 50px;
           -moz-border-radius: 50px;
                border-radius: 50px;
        border: 1px solid #dadfe8;
        overflow: hidden;
    }
    
    .ot-switch input {display:none;}
    
    .ot-slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #e3e2df;
        -webkit-transition: .4s;
                transition: .4s;
        overflow: hidden;
        -webkit-border-radius: 50px;
           -moz-border-radius: 50px;
                border-radius: 50px;
    }
    
    .ot-slider:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 2px;
        bottom: 2px;
        background-color: #FFF;
        -webkit-transition: .4s;
                transition: .4s;
        -webkit-border-radius: 50px;
           -moz-border-radius: 50px;
                border-radius: 50px;
        overflow: hidden;
    }
    .ot-switch:hover {    
        border: 1px solid var(--blue-light-color);
        -webkit-transition: .4s;
                transition: .4s;
        overflow: visible;
    }
    input:checked + .ot-slider {
        background-color: var(--blue-light-color);
    }
    
    input:focus + .ot-slider {
        box-shadow: 0 0 1px var(--blue-light-color);
    }
    
    input:checked + .slider:before {
        -webkit-transform: translateX(21px);
            -ms-transform: translateX(21px);
                transform: translateX(21px);
    }
    
    
    
    
    
    
    .ot-switchSmall {
        position: relative;
        display: inline-block;
        left: 2px;
        top: 5px;
        width: 36px;
        height: 19px;
        line-height: 20px;
        -webkit-border-radius: 50px;
           -moz-border-radius: 50px;
                border-radius: 50px;
        border: 1px solid var(--blue-color);
        overflow: hidden;
    }
    
    .ot-switchSmall input {display:none;}
    
    .ot-sliderSmall {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--blue-light-color);
        -webkit-transition: .4s;
                transition: .4s;
        overflow: hidden;
        -webkit-border-radius: 50px;
           -moz-border-radius: 50px;
                border-radius: 50px;
    }
    
    .ot-sliderSmall:before {
        position: absolute;
        content: "";
        height: 15px;
        width: 15px;
        left: 2px;
        bottom: 2px;
        background-color: var(--blue-color);
        -webkit-transition: .4s;
                transition: .4s;
        -webkit-border-radius: 50px;
           -moz-border-radius: 50px;
                border-radius: 50px;
        overflow: hidden;
    }
    .ot-switchSmall:hover {    
        border: 1px solid #374050;
        -webkit-transition: .4s;
                transition: .4s;
        overflow: visible;
    }
    input:checked + .ot-sliderSmall {
        background-color: var(--blue-color);
    }
    
    input:focus + .ot-sliderSmall {
        box-shadow: 0 0 1px var(--blue-color);
    }
    
    input:checked + .ot-sliderSmall:before {
        background-color: var(--blue-light-color);
        -webkit-transform: translateX(16px);
            -ms-transform: translateX(16px);
                transform: translateX(16px);
    }
    

    input[type='checkbox'] { 
        height: 0; width: 0; 
        display: none;
    }
    input[type='checkbox'] + label {
        position: relative;
        display: flex;
        margin: 5px 0;
        align-items: flex-start;
        font-size: 1em;
        color: #4F4F4F;
        transition: color 250ms cubic-bezier(.4,.0,.23,1);
    }
    input[type='checkbox'] + label > span {
        display: block;
        justify-content: baseline;
        align-items: baseline;
        margin-top: -2px;
        margin-right: 7px;
        min-width: 18px;
        height: 18px;
        background:  #dFdFdF;
        border: 1px solid #dFdFdF;
        border-radius: 50px;
        cursor: pointer;  
        transition: all 250ms cubic-bezier(.4,.0,.23,1);
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
    input[type='checkbox'] + label > caption {
        display: block;
        justify-content: baseline;
        align-items: baseline;
        width: 100%;
        height: 18px;
        background: #fff;
        cursor: pointer;  
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }

    input[type='checkbox'] + label:hover, input[type='checkbox']:focus + label {
        color: var(--blue-color);
        cursor: pointer;  
    }
    input[type='checkbox'] + label:hover > span, input[type='checkbox']:focus + label > span {
        background: rgba(255,255,255,.5);
        border: 1px solid var(--blue-color);/* #dFdFdF;*/
    }
    input[type='checkbox']:checked + label > ins { 
        width: 100%;
        height: 100%; 
        background: #f00
    }

    input[type='checkbox']:checked + label > span {
        background: var(--blue-color);
        border: 1px solid var(--blue-color);
        transition: all 250ms cubic-bezier(.4,.0,.23,1);
    }
    input[type='checkbox']:checked + label > span:before {
        content: "";
        position: absolute;
        top: 6px;
        left: 3px;
        border-right: 2px solid transparent;
        border-bottom: 2px solid transparent;
        transform: rotate(45deg);
        transform-origin: 0% 100%;
        animation: checkbox-check 125ms 250ms cubic-bezier(.4,.0,.23,1) forwards;
    }
    input::-webkit-contacts-auto-fill-button {
        visibility: hidden;
        display: none !important;
        pointer-events: none;
        position: absolute;
        right: 0;
      }
    inputlabel {
        float: left;
        width: 100%;
        font-size: 13px;
        font-family: 'Proxima-Bold';
        color: var(--blue-color);
        padding: 21px 12px 3px 0px;

    }
    titlelabel {
        float: left;
        width: 100%;
        font-size: 14px;
        font-family: 'Proxima-Bold';
        text-transform: uppercase;
        padding: 12px 14px;
        margin: 7px 0;
        color: var(--blue-color);
        background: var(--workspacecolor);
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;  
        -webkit-border-radius: 14px;
           -moz-border-radius: 14px;
                border-radius: 14px;

    }
    
    .ql-toolbar.ql-snow {
        border: none !important;
        margin: 14px 0 0 0;
    }
    #news_text {
        font-family: 'Proxima-Light';
        font-size: 14px;
        height: 400px;
        border-radius: 14px 14px;
        margin-bottom: 48px;
        border: 1px solid var(--tablightcolor);
    }
    #news_text:hover {
        border: 1px solid var(--workspacecolor);
    }
    .ot-input--competency-family {
        float: left;
        width: 100%;
        margin: 0 0 21px 0;
        font-size: 14px;
        font-family: 'Proxima-Bold';
        color: #000;
    }
    .ot-input--competency {
        float: left;
        width: 100%;
        margin: 0 0 21px 0;
    }
    .ot-input--label {
        float: left;
        width: 30%;
        height: auto;
        font-size: 14px;
        color: #000;
        padding: 2px 0;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;  
        white-space: nowrap;
        overflow: hidden;  
        -webkit-text-overflow: ellipsis;
                text-overflow: ellipsis;
        clear: both;
    }
    .ot-input--bullet {
        float: left;
        width: 20px;
        height: auto;
        font-size: 14px;
        font-family: 'Proxima-Bold';
        color: #000;
        padding: 2px 0;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;  
        white-space: nowrap;
        overflow: hidden;  
        -webkit-text-overflow: ellipsis;
                text-overflow: ellipsis;
                clear: both;
    }
    .ot-input--field {
        float: left;
        width: calc(70% - 40px);
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;  
    }

    .ot-position--description,
    .ot-competency--description  {
        float: left;
        font-size: 14px;
        padding: 2px 0;
        width: calc(100% - 80px);
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;  
    }
    .ot-input--delete {
        float: left;
        width: 40px;
        padding: 4px 0;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;   
        cursor: pointer;
    }
    .ot-input--delete:hover {
        color: var(--workspacecolor);
    }
    .ot-input--add {
        float: left;
        width: 100%;
        font-size: 14px;
        color: #292929;
        border-bottom: 1px solid var(--tablightcolor);
        padding: 0px 0 10px 0;
        margin-bottom: 10px;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;  
        cursor: pointer;
    }
    .ot-input--add:hover {
        color: var(--workspacecolor);
    }
    .ot-input--seperator {
        float: left;
        width: 100%;
        margin: 21px 0 10px 0;
        border-bottom: 1px solid var(--tablightcolor);
    }
    .ot-input--dummy-label {
        float: left;
        width: 20%;
        height: auto;
        padding: 14px 0;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;  
                clear: both;
    }
    input[type="file"] {
        z-index: 999;
        position: absolute;
        -webkit-opacity: 0;
           -moz-opacity: 0;
                opacity: 0;
        left: -5000px;
    }
    input.ot-inputfield,
    input.ot-transparent,
    input[type=password],
    textarea.ot-inputfield,
    input.ot-inputfield--big {
  
        float: left;
        height: 36px;
        padding: 0 10px;
        outline: none;
        color: #353535;
        margin-top: 2px;
        background: var(--workspacecolor);  
        resize: none;
        border: 1px solid transparent;
        -webkit-appearance: none;
           -moz-appearance: none;
             -o-appearance: none;
                appearance: none;
        -webkit-border-radius: 14px;
           -moz-border-radius: 14px;
             -o-border-radius: 14px;
                border-radius: 14px;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;    
        -webkit-transition: all 0.2s ease-in-out;
           -moz-transition: all 0.2s ease-in-out;
            -ms-transition: all 0.2s ease-in-out;
             -o-transition: all 0.2s ease-in-out;
                transition: all 0.2s ease-in-out;
    }
    .ot-inputfield-placeholder {
        height: auto;
        padding: 3px 4px 2px 4px;
    }
    input.ot-inputfield,
    textarea.ot-inputfield,
    input[type=password] {
        font-size: 14px;
        font-family: 'Proxima-Light';
    }
    input.ot-transparent {
        width: 100%;
        font-size: 14px;
        font-family: 'Proxima-Light';
        color: #191716;
        padding: 0;
        margin-top: 0px;
        background: transparent;
    }
    input.ot-inputfield--big,
    input[type=password].ot-inputfield--big,
    textarea.ot-inputfield--big,
    .ot-inputfield-big-dummy {  
        height: 54px;
        background: var(--workspacecolor);
        padding: 6px 15px 6px 15px;
        outline: none;
        font-size: 16px;
        margin: 6px 0px 6px 0px;
    }
   
    .ot-inputfield-dummy,
    .ot-inputfield-big-dummy {
        font-family: 'Proxima-Bold';
        font-size: 16px;
        background: #fff;  
        padding: 0px 0px 0px 7px;
    }
    textarea.ot-inputfield,
    textarea.ot-comment--input {
        width: 100%;
        height: 120px;
        font-size: 14px;
        padding: 10px;
        resize: none;
    }
    
   
    textarea.ot-inputfield {
        width: 100%;
        height: 120px;
        font-size: 14px;
        line-height: 14px;
        padding: 10px;
        resize: none;
    }
    input.ot-transparent:hover,
    input.ot-transparent:focus {
        border: 1px solid transparent;
        background: transparent;
    }
    input:hover,
    textarea:hover,
    .ot-inputfield-placeholder:hover {
        color: #292828;
        border: 1px solid var(--yellow-color) !important;
        background: #FFF;
        -webkit-transition: all 0.3s ease-in-out;
           -moz-transition: all 0.3s ease-in-out;
            -ms-transition: all 0.3s ease-in-out;
             -o-transition: all 0.3s ease-in-out;
                transition: all 0.3s ease-in-out;
    }
    input:focus,
    textarea:focus {
        border: 1px solid var(--yellow-color);
        -webkit-transition: all 0.3s ease-in-out;
           -moz-transition: all 0.3s ease-in-out;
            -ms-transition: all 0.3s ease-in-out;
             -o-transition: all 0.3s ease-in-out;
                transition: all 0.3s ease-in-out;
    }
    input:-moz-placeholder,
    textarea:-moz-placeholder {
        color: #999;
    }
    input::-moz-placeholder,
    textarea::-moz-placeholder {
        color: #999;
    }
    input::-webkit-input-placeholder,
    textarea::-webkit-input-placeholder {
        color: #999;
    }
    input:-ms-input-placeholder,
    textarea:-ms-input-placeholder {
        color: #999;
    }
    
    textarea.ot-comment--input:-moz-placeholder {
        color: #999;
    }  
    textarea.ot-comment--input::-moz-placeholder {
        color: #999;
    }  
    textarea.ot-comment--input::-webkit-input-placeholder {
        color: #999;
    }  
    textarea.ot-comment--input:-ms-input-placeholder {
        color: #999;
    } 
    
    .inputDummy {
        display: block;
        width: 100%;
        line-height: 36px;
        margin: 0px 0px 7px 2px;
    
        float: left;
        height: 36px;
        padding: 0 10px;
        color: #353535;
        margin-top: 2px;
        background: #f2efea;  
        border: 1px solid transparent;
        -webkit-border-radius: 14px;
           -moz-border-radius: 14px;
             -o-border-radius: 14px;
                border-radius: 14px;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;    
    }
    

    
    @keyframes shrink-bounce{
    0%{
        transform: scale(1);
    }
    33%{    
        transform: scale(1);
    }
    100%{
        transform: scale(1);    
    }
    }
    @keyframes checkbox-check{
    0%{
        width: 0;
        height: 0;
        border-color: #FFF;
        transform: translate3d(0,0,0) rotate(45deg);
    }
    33%{
        width: 3px;
        height: 0;
        transform: translate3d(0,0,0) rotate(45deg);
    }
    100%{    
        width: 3px;
        height: 9px;    
        border-color: #FFF;
        transform: translate3d(0,-9px,0) rotate(45deg);
    }
    }

    span-field {
        float: left;
        display: block;
        width: 100%;
        border: 1px solid #e3e2df;
        padding: 10px 15px;
        margin-top: 7px;
        color: #374050;
        background: #FFF;
        -webkit-border-radius: 7px;
           -moz-border-radius: 7px;
             -o-border-radius: 7px;
                border-radius: 7px;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
        cursor: pointer;
        z-index : 9990;
    }

    span-field:hover {
        background: #dadfe8;    
    }

    .ot-list--map {
        float: left;
        width: 100%;
        height: 400px;
        border-radius: 14px;
        overflow: hidden;
    }
    .ot-props--family {
        float: left;
        width: 100%;
        padding: 14px 7px;
        font-size: 18px;
        font-family: 'Proxima-Light';
        color: var(--blue-color);
        background: var(--workspacecolor);
    }








    
    .ot-grid--item {
        display: block;
        position: relative;
        height: auto;
        text-align: center;
        margin-top: 45px;
        /*border: 1px solid #f0f;*/
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }   
     
    .ot-grid--item-hierarchy-employee--container {
        display: table;
        position: absolute;
        left: calc(50% - 75px);
        top: 80px;
        width: 180px;
        height: 100%;
        margin: 0px 0px 50px 0;
    }
    .ot-grid--item-hierarchy, 
    .ot-grid--item-hierarchy-employee {
        display: inline-block;
        position: relative;
        clear: both;
        left: 0px;
        top: 5px;
        width: 180px;
        height: 70px;
        padding: 15px 7px 7px 7px;
        margin: 7px;
        color: #fff;
        background: var(--blue-color);
        -webkit-border-radius: 7px;
           -moz-border-radius: 7px;
             -o-border-radius: 7px;
                border-radius: 7px;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
                -webkit-box-shadow: 0px 3px 5px 0px rgba(150, 150, 150, 0.5);
                   -moz-box-shadow: 0px 3px 5px 0px rgba(150, 150, 150, 0.5);
                        box-shadow: 0px 3px 5px 0px rgba(150, 150, 150, 0.5); 
        cursor: pointer;  
        -webkit-transition: all 0.3s ease-in-out;
           -moz-transition: all 0.3s ease-in-out;
            -ms-transition: all 0.3s ease-in-out;
             -o-transition: all 0.3s ease-in-out;
                transition: all 0.3s ease-in-out;
    }   

    .ot-grid--item-hierarchy-employee {
        position: absolute;
        left: 0px;
        width: 158px;
        height: 60px;
        background: #3e3661;
    }

    .ot-grid--item-hierarchy:hover, 
    .ot-grid--item-hierarchy-employee:hover {
        background: var(--workspacecolor);

    }

    .ot-grid--item-hierarchy-photo,
    .ot-grid--item-hierarchy-employee-photo {
        position: absolute;
        left: 67px;
        top: -35px;
        width: 44px;
        height: 44px;
        border: 3px solid #fff;
        -webkit-border-radius: 50px;
           -moz-border-radius: 50px;
             -o-border-radius: 50px;
                border-radius: 50px;   
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
        -webkit-box-shadow: 0px 3px 5px 0px rgba(150, 150, 150, 0.5);
           -moz-box-shadow: 0px 3px 5px 0px rgba(150, 150, 150, 0.5);
                box-shadow: 0px 3px 5px 0px rgba(150, 150, 150, 0.5);   
    }   
    .ot-grid--item-hierarchy-employee-photo {
        left: -25px;
        top: 7px;
    }
    .ot-career--now-before-1,
    .ot-career--now-before-2 {
        float: left; 
        width: 28px; 
    }

    .ot-career--now-after-1,
    .ot-career--now-after-2 {
        float: left; 
        width: calc(100% - 32px); 
    }
    .ot-career--now-before-1,
    .ot-career--now-after-1 {
        height: 6px; 
    }
    .ot-career--now-before-2,
    .ot-career--now-after-2 {
        height: 24px; 
    }
    .ot-career--now {
        float: left;
        display: block; 
        width: 4px; 
        height: 4px; 
        margin: 0 0 2px 0;
        background: #a91d33; 
        border-radius: 200px;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
    .ot-career--date {
        float: left;
        display: block; 
        width: 60px; 
        height: 60px; 
        color: #fff; 
        padding: 13px 0;
        background: #a91d33; 
        text-align: center; 
        border-radius: 200px;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
    .ot-career--date .day {
        font-size: 18px;
        font-family: 'Proxima-Bold';
    }
    .ot-career--date .monthyear {
        font-size: 12px;
        font-family: 'Proxima-Light';
    }
    .ot-career--title {
        float: left; 
        width: 250px; 
        height: 60px; 
        padding: 10px; 
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    } 
    .ot-career--title .title {
        font-size: 16px;
        font-family: 'Proxima-Bold';
    }
    .ot-career--title .abbreviation {
        font-size: 13px;
        font-family: 'Proxima-Light';
    }
    .ot-career--department {
        float: left; 
        width: calc(100% - 310px); 
        height: 60px; 
        font-size: 13px;
        font-family: 'Proxima-Light';
        padding: 10px; 
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    } 






    .ot-grid-container--3366,
    .ot-grid-container--6633,
    .ot-grid-container--50,
    .ot-grid-container--100,
    .ot-grid-container--400x {
        display: grid;    
        /* grid-auto-rows:minmax(200px, auto); */
        grid-auto-rows:minmax(auto, auto); 
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
        column-gap: 24px;
        row-gap: 24px;
        margin-bottom: 24px;
        overflow: visible
    }
    
    .ot-grid-container--3366 {
        grid-template-columns: minmax(300px, 33%) 66%; 
    }
    .ot-grid-container--6633 {
        grid-template-columns: 66% minmax(300px, 33%) ; 
    }
    .ot-grid-container--50 {
        grid-template-columns: 1fr 1fr; 
    }
    .ot-grid-container--100 {
        grid-template-columns: 1fr; 
    }
    .ot-grid-container--400x {
        grid-template-columns: 340px 1fr; 
    }
    .ot-grid-item {
        padding: 20px;

        -webkit-border-radius: 7px;
           -moz-border-radius: 7px;
             -o-border-radius: 7px;
                border-radius: 7px;
        overflow: visible
    }    
    .ot-grid-item--white {
        background: #fff;
    }
    .ot-grid-item--container {
        display:block;
        background: transparent;
        padding: 0px;
        margin-left: 12px;
    }    
    .ot-grid--center {
        display: table; 
        width: 100%; 
        text-align: center
    }


    .ot-frame {
        -ms-zoom: 0.75;
        -moz-transform: scale(0.75);
        -moz-transform-origin: 0 0;
        -o-transform: scale(0.75);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.75);
        -webkit-transform-origin: 0 0;
    }


  

@media screen and (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2) {
    
    .ot-menu--button,
    .ot-icon {
        background-image: url('../images/ot-icon--sprites@2.png?version=0058');
    }
}