/* This code is the property of Alpilogic.
   All rights reserved (c) Alpilogic 2020. 
// v5.1.1   - 2012.05.13
// v5.2     - 2012.06.30
// v5.2.1   - 2012.07.07
// v5.5     - 2012.08.07
// v5.6     - 2012.09.20
// v5.6.1   - 2012.09.30
// v5.8     - 2013.01.27
// v7.0     - 2013.11.22
// v7.2     - 2014.02.10
// v8.0     - 2014.11.03
// v8.2     - 2015.05.27
// v9.2     - 2018.08.17
// v10.0    - 2018.11.20
// v14.0    - 2020.06.01
*/

/* Indicator */

.ios .indicator {
    font-size: .8em;
    text-shadow: none !important;
    color: #fff;
    padding: 2px 4px;
    border-radius: 2px;
    text-align: center;
    background-color: #3b4858;
    text-overflow: ellipsis;
    white-space: pre-line;
    overflow: hidden;
    width: auto;
    display: inline-block;
}


/* Date formatter */

.ios .dateformatter input {
    text-align: center;
    width: 30px;
    max-width: 30px;
}

.ios .dateformatter input.year {
    width: 50px;
    max-width: 50px;
}

/* .documentheader */

.ios .documentheader {
    position: relative;
    padding: 5px 10px;
    box-shadow: 0px 2px 2px rgba(0,0,0,0.3);
    background-image: -webkit-linear-gradient(top, #ffffff, #EEE 60%, #DADADC);
    background-image: -moz-linear-gradient(top, #ffffff, #EEE 60%, #DADADC);
    background-image: -ms-linear-gradient(top, #ffffff, #EEE 60%, #DADADC);
    background-image: linear-gradient(to bottom, #ffffff, #EEE 60%, #DADADC);
    min-height: 40px;
}

    .ios .documentheader .icon {
        margin-left: 15px;
        margin-right: 15px;
    }

    .ios .documentheader .title {
        /*font-weight: bold;*/
        font-size: 1em;
    }

        .ios .documentheader .title.large {
            font-size: 1.3em;
        }

@media all and (max-device-width:480px), all and (min-device-width:720px) and (max-device-width:720px) {

    .ios .documentheader .title.large {
        font-size: 1.1em;
    }
}


/* .richdocument */

.ios .richdocument {
    display: inline-block;
    width: 100%;
    /*min-height: 100%;*/
    white-space: pre-wrap;
    word-wrap: break-word;
    padding: 10px 10px 50px 10px;
    outline: none;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    outline: none;
    background: #ffffff;
}

.ios .richdocument * {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    outline: none;
}


.ios .richdocument table td {
    border-width: 0 !important;
}

        .ios .richdocument > div {
    /*pointer-events: none;*/
}

.ios .richdocument ul {
    display: block !important;
    margin: 0 !important;
    min-height: 0 !important;
    -webkit-margin-before: 0 !important;
    padding-top: 0 !important;
    margin-left: 10px !important;
}

.ios .richdocument li {
    list-style-type: disc;
    border: 0 !important;
    border-top: none !important;
    padding: 0 !important;
    background-color: inherit !important;
    -webkit-transform: none !important;
    transform: none !important;
    min-height: 0 !important;
}

.ios .richdocument li:first-of-type {
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.ios .richdocument li:last-of-type {
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

    .ios .richdocument p {
        display: block;
        margin-block-start: 5px;
        margin-block-end: 5px;
    }

.ios .richdocument p:empty {

    min-height: 20px;
}

    .ios .richdocument p span:empty {
        min-height: 20px;
    }
    

/* .richdocumenttoolbar */

.ios .richdocumenttoolbar {
    max-height: 35px;
    height: 35px;
    max-width: 100%;
    overflow: hidden;   
    border-bottom: 1px solid #808080;
}

.ios .richdocumenttoolbarcontainer {
    display: block;
    min-width: 100%;
    background-image: -webkit-linear-gradient(top, #F6F6F6, #CCCCD1 50%);
    background-image: -moz-linear-gradient(top, #F6F6F6, #CCCCD1 50%);
    background-image: -ms-linear-gradient(top, #F6F6F6, #CCCCD1 50%);
    background-image: linear-gradient(to bottom, #F6F6F6, #CCCCD1 50%);
}

.ios .richdocumenttoolbarcontainer .panel {
    display: block;
    padding: 5px;
    height: 35px;
    max-height: 35px;
    width: 100%;
    -webkit-transition: -webkit-transform .2s linear;
    transition: transform .2s linear;
}

.ios .richdocumenttoolbarcontainer .panel.tocolors {
    -webkit-transform: translate3d(0, -35px, 0);
    transform: translate(0, -40px);
}

.ios .richdocumenttoolbarcontainer div select {
    margin-top: 2px;
    border: 1px solid #aaaaaa;
    padding: 1px 5px;
    /*background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc5NzYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNCM0I3QkQiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiM2QTcyN0QiIG9mZnNldD0iMC44NSIvPjxzdG9wIHN0b3AtY29sb3I9IiM2QTcyN0QiIG9mZnNldD0iMSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c5NzYpIiAvPgo8L3N2Zz4=);*/
    background-image: -webkit-linear-gradient(top, #b3b7bd, #6a727D 85%, #6a727D);
    background-image: -moz-linear-gradient(top, #b3b7bd, #6a727D 85%, #6a727D);
    background-image: -ms-linear-gradient(top, #b3b7bd, #6a727D 85%, #6a727D);
    background-image: linear-gradient(to bottom, #b3b7bd, #6a727D 85%, #6a727D);
    border-radius: 3px;
    vertical-align: top;
}

@media all and (max-device-width:480px),
       all and (min-device-width:720px) and (max-device-width:720px),
       all and (min-device-width:768px) and (max-device-width:768px) {
           
    .ios .richdocumenttoolbarcontainer div select {           
        display: none;
    }
}

.ios .richdocumenttoolbarcontainer button {
    display: inline-block;
	background-color: transparent;
    padding: 1px;  
    vertical-align: middle;
}

.ios .richdocumenttoolbarcontainer button.selected,
.ios .richdocumenttoolbarcontainer button.pressed {
    /*border: 1px solid #808080;   
    border-radius: 4px;*/
}

.ios .richdocumenttoolbarcontainer div.fakebutton {
    display: inline-block;
    vertical-align: top;
    margin-right: 10px;
    height: 60px;   
}

.ios .richdocumenttoolbarcontainer button.colorbox {
    padding: 0;
    margin-top: 5px;
	border: 1px solid #ccc;
    border-radius: 4px;
    background-image: none;
    width: 25px;
    height: 25px;
}

/* .monthcalendarcontrol */

.ios .monthcalendarcontrol {
    text-align: center;
    max-width: 100%;    
    font-size: .8em;    
}

@media all and (max-device-width:480px),
       all and (min-device-width:720px) and (max-device-width:720px) {
           
    .ios .monthcalendarcontrol {
        margin-bottom: 5px;
        font-size: 1em;    
    }           
}
/*
.ios .monthcalendarcontrol div.monthcalendarcontrol__header {
    height: auto;
}

.ios .monthcalendarcontrol div.monthcalendarcontrol__header {
    background: none !important;
}
    */

.ios .monthcalendarcontrol div.monthcalendarcontrol__header button.icon.previous,
.ios .monthcalendarcontrol div.monthcalendarcontrol__header button.icon.next {
    margin-top: 0 !important;
}

.ios .monthcalendarcontrol div.monthcalendarcontrol__header button.clearbutton {
    margin-top: 0 !important;
    width: auto;
    height: auto;
    line-height: 25px;
    border: solid 1px #54617d;
    background: #333333;
    border-color: #404040 #262626 #404040 #262626;
    background-image: -webkit-linear-gradient(top, #838383, #444444 50%, #303030 51%, #333333);
    background-image: -moz-linear-gradient(top, #838383, #444444 50%, #303030 51%, #333333) !important;
    background-image: -ms-linear-gradient(top, #838383, #444444 50%, #303030 51%, #333333) !important;
    background-image: linear-gradient(to bottom, #838383, #444444 50%, #303030 51%, #333333) !important;
    color: #fff;
    text-shadow: none;
}

.ios .monthcalendarcontrol div.monthcalendarcontrol__header__title {
    color: #fff;
    font-weight: bold;
    font-size: 1.4em;
}
/*
.ios .monthcalendarcontrol .content {
    width: 230px;
}

@media all and (max-device-width:480px), all and (min-device-width:720px) and (max-device-width:720px) {

    .ios .monthcalendarcontrol .content {
        max-width: 100%;
        width: 100%;
    }
}
    */
.ios .monthcalendarcontrol div.monthcalendarcontrol__tablewrapper {
    margin-right: 5px;
}

.ios .monthcalendarcontrol div.monthcalendarcontrol__tablewrapper table {
    width: 100%;
}

.ios .monthcalendarcontrol div.monthcalendarcontrol__tablewrapper table th {
    font-weight: normal;
    font-size: .7em;
    vertical-align: middle;
    color: #a0a7ff;
}

.ios .monthcalendarcontrol div.monthcalendarcontrol__tablewrapper table td {
    overflow: hidden;
    padding: 4px 3px;
    cursor: pointer;
    border: 1px solid #808080;
    border-radius: 4px;
    font-size: 1.1em;
}

@media all and (max-device-width:480px),
       all and (min-device-width:720px) and (max-device-width:720px) {

    .ios .monthcalendarcontrol div.monthcalendarcontrol__tablewrapper table td {
        min-width: 0;
        width: auto;
        min-height: 28px;
        height: 28px !important;
    }
}

.ios .monthcalendarcontrol div.monthcalendarcontrol__tablewrapper table td.hovered {
    background: #fdf5e5 !important;
    color: #3b4858 !important;
}

.ios .monthcalendarcontrol div.monthcalendarcontrol__tablewrapper table td.week {
    border: 0;
    width: auto;
    font-size: .9em;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    cursor: default;
    color: #a0a7ff;
}

.ios .monthcalendarcontrol div.monthcalendarcontrol__tablewrapper table td.today {
    background-color: #fff;
    color: #058bf5 !important;
    font-weight: bold;
}

.ios .monthcalendarcontrol div.monthcalendarcontrol__tablewrapper table td.currentmonth {
    color: #fff;
}

@media all and (max-device-width:480px),
       all and (min-device-width:720px) and (max-device-width:720px) {

    .ios .monthcalendarcontrol div.monthcalendarcontrol__tablewrapper td.currentmonth {
        font-size: 1.4em;
    }
}

.ios .monthcalendarcontrol div.monthcalendarcontrol__tablewrapper td.currentmonth.highlighted {
    background-image: -webkit-linear-gradient(top, #AAF7B7, #C3FCCC 90%);
    background-image: -moz-linear-gradient(top, #AAF7B7, #C3FCCC 90%);
    background-image: -ms-linear-gradient(top, #AAF7B7, #C3FCCC 90%);
    background-image: linear-gradient(to bottom, #AAF7B7, #C3FCCC 90%);
    color: #3b4858;
}

.ios .monthcalendarcontrol div.monthcalendarcontrol__tablewrapper table td.othermonth {
    color: #808080 !important;
}

.ios .monthcalendarcontrol div.monthcalendarcontrol__tablewrapper table td.currentday {
    background-image: -webkit-linear-gradient(top, #058bf5, #015de6) !important;
    background-image: -moz-linear-gradient(top, #058bf5, #015de6) !important;
    background-image: -ms-linear-gradient(top, #058bf5, #015de6) !important;
    background-image: linear-gradient(to bottom, #058bf5, #015de6) !important;
    color: #fff !important;
    font-weight: bold;
    border-color: transparent;
}

.ios .monthcalendarcontrol div.monthcalendarcontrol__tablewrapper table td.highlighted {
    border: 1px solid #AAF7B7;
}

/* Time formatter */

.ios .timeformatter input {
    text-align: right;
    width: 30px;
}

.ios .timeformatter input.error {
    color: Red;
}

.ios .timeformatter span {
    margin: 0 5px;
}

/* Popover */

.ios .popover {
	position: absolute;
    left: 0;
    top: 0;
    right:0;
    bottom: 0;
    margin: 0;
    padding: 0;
    display: none;
    overflow: hidden;
    background: rgba(0, 0, 0, .3);
    width: 100%;
    z-index: 999;
}

.ios .popover > div.popover__content {
    width: 100%;
    position: relative;
    text-align:center; 
    padding: 5px 0;
    /*background: rgba(255, 255, 255, .6); /* rgba(8,19,40, .6); */
    /*background-image: -webkit-linear-gradient(top, rgba(220, 220, 220, .8), rgba(220, 220, 220, 0) 10%);
	background-image: -moz-linear-gradient(top, rgba(220, 220, 220, .8), rgba(220, 220, 220, 0) 10%);
	background-image: -ms-linear-gradient(top, rgba(220, 220, 220, .8), rgba(220, 220, 220, 0) 10%);
	border: solid 1px #54617d;
	border-color: #484e59 #54617d #4c5c7a #54617d; */
	background: rgba(255, 255, 255, .8);
	border-radius: 6px;
    box-shadow: 1px 1px 12px rgba(255,255,255,.6);
    max-width: 300px;    
    color: #3b4858;
}

    .ios .popover > div.popover__content p.cap {
        font-size: .8em;
    }

@media all and (max-device-width:480px), all and (min-device-width:720px) and (max-device-width:720px) {

    .ios .popover > div.popover__content p.cap {
        font-size: 1.2em;
    }
}
.ios .popover > div.popover__content p.separator {
    height: 10px;
}

.ios .popover.notransparency > div.popover__content {
    /*background: rgba(8,19,40, 1);*/
    /*background: rgba(58, 69, 100, .9);
	background-image: -webkit-linear-gradient(top, rgba(220, 220, 220, .8), rgba(220, 220, 220, 0) 10%);
	background-image: -moz-linear-gradient(top, rgba(220, 220, 220, .8), rgba(220, 220, 220, 0) 10%);
	background-image: -ms-linear-gradient(top, rgba(220, 220, 220, .8), rgba(220, 220, 220, 0) 10%);*/
    background: #3b4858;
}

    .ios .popover button:not(.icon) {
        width: 95%;
        max-width: 95%;
        font-size: 1em;
        font-weight: normal;
        text-align: center;
        -webkit-background-origin: padding-box;
        -webkit-background-clip: border-box;
        background: #dddddd;
        /*background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc5OTYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGQkZCRkIiIG9mZnNldD0iMC41Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0VFRUVFRSIgb2Zmc2V0PSIwLjUxIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0UxRTFFMSIgb2Zmc2V0PSIwLjEiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnOTk2KSIgLz4KPC9zdmc+);*/
        background-image: -webkit-linear-gradient(top, #ffffff, #fbfbfb 50%, #eeeeee 51%, #e1e1e1);
        background-image: -moz-linear-gradient(top, #ffffff, #fbfbfb 50%, #eeeeee 51%, #e1e1e1);
        background-image: -ms-linear-gradient(top, #ffffff, #fbfbfb 50%, #eeeeee 51%, #e1e1e1);
        background-image: linear-gradient(to bottom, #ffffff, #fbfbfb 50%, #eeeeee 51%, #e1e1e1);
        color: #3b4858;
        text-shadow: #fff 0 1px 0;
        margin: 2px auto;
        height: 35px;
        border-radius: 4px;
    }

        .ios .popover button:not(.icon).delete {
            background-color: #d83b38;
            /*background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc5ODciIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNFNTdBNzgiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNEQzUwNEQiIG9mZnNldD0iMC41Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0Q4M0IzOCIgb2Zmc2V0PSIwLjUxIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0NFMkMyOCIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzk4NykiIC8+Cjwvc3ZnPg==);*/
            background-image: -webkit-linear-gradient(top, #e57a78, #dc504d 50%, #d83b38 51%, #ce2c28);
            background-image: -moz-linear-gradient(top, #e57a78, #dc504d 50%, #d83b38 51%, #ce2c28);
            background-image: -ms-linear-gradient(top, #e57a78, #dc504d 50%, #d83b38 51%, #ce2c28);
            background-image: linear-gradient(to bottom, #e57a78, #dc504d 50%, #d83b38 51%, #ce2c28);
            color: #ffffff;
            text-shadow: #b92724 0 -1px 0;
        }

    @media all and (max-device-width:480px), all and (min-device-width:720px) and (max-device-width:720px) {

        .ios .popover.notransparency > div.content {
            background: #3b4858;
        }

        .ios .popover > div.popover__content {
            -webkit-transition: -webkit-transform .2s ease-out;
            transition: transform .2s ease-out;
            border-left: 0;
            border-right: 0;
            border-radius: 6px 6px 0 0;
            min-width: 100%;
            max-width: 100%;
        }

            .ios .popover > div.popover__content p.caption {
                font-size: 1em;
                display: block;
            }

        .ios .popover button:not(.icon) {
            height: 40px;
            border-radius: 8px;
            font-size: 1.2em;
        }
    }

    .ios .popover button.cancel {
        /*
    background-color: #444444;
    background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9ImcxNzYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiM2QTZBNkEiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiM1MTUxNTEiIG9mZnNldD0iMC41Ii8+PHN0b3Agc3RvcC1jb2xvcj0iIzQ0NDQ0NCIgb2Zmc2V0PSIwLjUxIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzM3MzczNyIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzE3NikiIC8+Cjwvc3ZnPg==);
    background-image: -webkit-linear-gradient(top, #6a6a6a, #515151 50%, #444444 51%, #373737);
    background-image: -moz-linear-gradient(top, #6a6a6a, #515151 50%, #444444 51%, #373737);
    background-image: -ms-linear-gradient(top, #e57a78, #dc504d 50%, #d83b38 51%, #ce2c28);
    background-image: linear-gradient(to bottom, #e57a78, #dc504d 50%, #d83b38 51%, #ce2c28);
    color: #fff;
    text-shadow: #2b2b2b 0 -1px 0;*/

        border: solid 1px #54617d;
        background: #333333;
        border-color: #404040 #262626 #404040 #262626;
        /*background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2NTciIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiM4MzgzODMiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiM0NDQ0NDQiIG9mZnNldD0iMC41Ii8+PHN0b3Agc3RvcC1jb2xvcj0iIzMwMzAzMCIgb2Zmc2V0PSIwLjUxIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzMzMzMzMyIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzY1NykiIC8+Cjwvc3ZnPg==);*/
        background-image: -webkit-linear-gradient(top, #838383, #444444 50%, #303030 51%, #333333);
        background-image: -moz-linear-gradient(top, #838383, #444444 50%, #303030 51%, #333333) !important;
        background-image: -ms-linear-gradient(top, #838383, #444444 50%, #303030 51%, #333333) !important;
        background-image: linear-gradient(to bottom, #838383, #444444 50%, #303030 51%, #333333) !important;
        color: #fff;
        text-shadow: none;
        display: none;
    }

    @media all and (max-device-width:480px), all and (min-device-width:720px) and (max-device-width:720px) {

        .ios .popover button.cancel {
            display: block;
        }
    }

    /* Refresh pulldown for iScroll */

    .ios .refreshpulldown {
        display: block;
        min-height: 36px;
        max-height: 36px;
        height: 36px;
        /*line-height: 30px;*/
        padding: 4px 10px;
        color: #808080;
        /*background-color: blue;  #3b4858;*/
    }

        .ios .refreshpulldown .pullicon {
            -webkit-transform: rotate(0deg) translateZ(0);
            -ms-transform: rotate(0deg) translateZ(0);
            transform: rotate(0deg) translateZ(0);
            display: inline-block;
            /*float: left;*/

            width: 30px;
            height: 30px;
            background: url('images/icons.png') no-repeat;
            -webkit-transition: -webkit-transform 250ms ease;
            transition: transform 250ms ease;
            background-size: 1080px 90px;
            background-position: -510px 0px;
        }

        .ios .refreshpulldown.flip .pullicon {
            -webkit-transform: rotate(-180deg) translateZ(0);
            -ms-transform: rotate(-180deg) translateZ(0);
            transform: rotate(-180deg) translateZ(0);
        }

        .ios .refreshpulldown.loading .pullicon {
            -webkit-transform: rotate(0deg) translateZ(0);
            -ms-transform: rotate(0deg) translateZ(0);
            transform: rotate(0deg) translateZ(0);
            -webkit-transition-duration: 0ms;
            -webkit-animation-name: refreshpulldown-loading;
            -webkit-animation-duration: 2s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
        }

    @-webkit-keyframes refreshpulldown-loading {
        from {
            -webkit-transform: rotate(0deg) translateZ(0);
        }

        to {
            -webkit-transform: rotate(360deg) translateZ(0);
        }
    }

    .ios .refreshpulldown .text {
        font-size: 1em;
        margin-left: 10px;
        font-weight: bold;
        color: #ffffff;
        vertical-align: top;
    }

    /* Search box */

    .ios .searchbox {
        position: relative;
    }

        .ios .searchbox > .searchboxmagnifier {
            position: absolute;
            top: 9px;
            left: 2px;
            background: url('images/icons.png') no-repeat;
            background-position: -240px 0px;
            width: 20px;
            height: 20px;
            background-size: 720px 60px;
            cursor: pointer;
        }

    /* Summary box */

    .ios .summarybox {
        outline: none;
        background: #3b4858;
        color: #ffffff;
        margin: 0;
        text-align: left;
        overflow: hidden;
        white-space: nowrap;
        padding: 2px 5px;
        text-overflow: ellipsis;
        font-size: .8em;
        border-bottom: 1px solid #ffffff;
        width: 100%;
    }

    /* Tabs bar */

    .ios .tabsbar {
        background: #000;
        width: 100%;
        height: 60px;
        white-space: nowrap;
        border-color: #404040 #262626 #404040 #262626;
        border-bottom: solid 1px #54617d;
        /*background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4MSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0ZGRkZGRiIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0VFRUVFRSIgb2Zmc2V0PSIwLjYiLz48c3RvcCBzdG9wLWNvbG9yPSIjREFEQURDIiBvZmZzZXQ9IjEiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnODEpIiAvPgo8L3N2Zz4=);*/
        background-image: -webkit-linear-gradient(top, white, #EEE 60%, #DADADC);
        background-image: -moz-linear-gradient(top, white, #EEE 60%, #DADADC);
        background-image: -ms-linear-gradient(top, white, #EEE 60%, #DADADC);
        background-image: linear-gradient(to bottom, white, #EEE 60%, #DADADC);
        -webkit-transform: translate3d(0,0,0);
        -ms-transform: translate(0,0);
        transform: translate(0,0);
    }

    @media all and (max-device-width:480px), all and (min-device-width:720px) and (max-device-width:720px) {

        /*.ios .tabsbar {
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 10;
        border-top: solid 1px #54617d;
        border-bottom: 0;
    }
        */

        .ios .tabsbar {
            position: absolute;
            left: 0;
            bottom: 0px;
            z-index: 1;
            border-top: solid 1px #54617d;
            border-bottom: 0;
        }
    }

    .ios .tabsbar.minimized {
        height: 0;
        padding: 0;
        border-width: 0;
    }

        .ios .tabsbar.minimized * {
            height: 0;
        }

    .ios .tabsbar > div {
        color: #606060;
        font-weight: bold;
        text-align: center;
        display: inline-block;
        cursor: pointer;
        font-size: .7em;
        width: 100px;
        padding: 2px 0 6px 0;
        vertical-align: bottom;
    }

    @media all and (max-device-width:480px), all and (min-device-width:720px) and (max-device-width:720px) {

        .ios .tabsbar > div {
            font-size: .6em;
            width: 79px;
            padding: 3px 0 5px 0;
        }
    }

    .ios .tabsbar > div > div:first-of-type {
        margin: auto;
    }

    .ios .tabsbar > div.selected {
        box-shadow: inset -2px 1px 5px gray, inset 0px 1px 0px gray;
    }

    /* Toggle */

    /*
input.apple-switch {
    position: relative;
    -webkit-appearance: none;
    outline: none;
    width: 50px;
    height: 30px;
    background-color: #fff;
    border: 1px solid #D9DADC;
    border-radius: 50px;
    box-shadow: inset -20px 0 0 0 #fff;
}

    input.apple-switch:after {
        content: "";
        position: absolute;
        top: 1px;
        left: 1px;
        background: transparent;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        box-shadow: 2px 4px 6px rgba(0,0,0,0.2);
    }

    input.apple-switch:checked {
        box-shadow: inset 20px 0 0 0 #4ed164;
        border-color: #4ed164;
    }

        input.apple-switch:checked:after {
            left: 20px;
            box-shadow: -2px 4px 3px rgba(0,0,0,0.05);
        }


    */




    .ios .toggle {
        cursor: pointer;
        height: 28px;
        width: 47px;
        max-width: 47px;
        max-height: 28px;
        border: 1px solid #979797;
        overflow: hidden;
        border-radius: 20px;
        box-shadow: inset 0 1px 3px #BABABA, inset 0 12px 3px 2px rgba(232, 232, 232, 0.5);
    }

        .ios .toggle input[type=checkbox] {
            display: none;
        }

        .ios .toggle:not(.gender)::before {
            content: "";
            display: block;
            height: 28px;
            width: 0;
            position: absolute;
            border-radius: 20px;
        }

        .ios .toggle::before {
            /*background-color: #53D769;
    background-image: -webkit-linear-gradient(top, #53D769, #c4efcb);
    background-image: -moz-linear-gradient(top, #53D769, #c4efcb);
    background-image: -ms-linear-gradient(top, #53D769, #c4efcb);
    background-image: linear-gradient(to bottom, #53D769, #c4efcb);*/
            background-color: #058bf5;
            background-image: -webkit-linear-gradient(top, #058bf5, #015de6);
            background-image: -moz-linear-gradient(top, #058bf5, #015de6);
            background-image: -ms-linear-gradient(top, #058bf5, #015de6);
            background-image: linear-gradient(to bottom, #058bf5, #015de6);
        }


        .ios .toggle.on::before {
            width: 47px;
        }

        .ios .toggle > .thumb {
            display: block;
            width: 26px;
            height: 26px;
            position: relative;
            top: 0;
            z-index: 13;
            border: solid 1px #919191;
            background-color: #CECECE;
            /*background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4MTUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNDRUNFQ0UiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGQkZCRkIiIG9mZnNldD0iMSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c4MTUpIiAvPgo8L3N2Zz4=);*/
            background-image: -webkit-linear-gradient(top, #CECECE, #FBFBFB);
            background-image: -moz-linear-gradient(top, #CECECE, #FBFBFB);
            background-image: -ms-linear-gradient(top, #CECECE, #FBFBFB);
            background-image: linear-gradient(to bottom, #CECECE, #FBFBFB);
            -webkit-transition: all 0.125s ease-in-out;
            transition: all 0.125s ease-in-out;
            -webkit-transform: translate3d(0,0,0);
            transform: translate(0,0);
            border-radius: 28px;
            box-shadow: inset 0 2px 1px white, inset 0 -2px 1px white;
        }

        .ios .toggle:not(.gender) > .thumb {
        }

        .ios .toggle.on > .thumb {
            -webkit-transform: translate3d(20px,0,0);
            -ms-transform: translate(20px,0);
            transform: translate(20px,0);
        }

        .ios .toggle.pressed > .thumb {
            background-image: none;
            box-shadow: inset 0 2px 1px #fff, inset 0 -2px 1px #fff;
        }

        .ios .toggle > .thumb::before {
            /*content: "";*/
            display: block;
            height: 14px;
            width: 2px;
            background-color: white;
            border: none;
            position: absolute;
            top: 6px;
            left: -54px;
        }

        .ios .toggle:not(.gender) > .thumb::before {
            box-shadow: 0px -1px 1px #666;
        }

        .ios .toggle > .thumb::after {
            /*content: "";*/
            display: block;
            height: 10px;
            width: 10px;
            position: absolute;
            right: -62px;
            top: 6px;
            border-radius: 10px;
        }

        .ios .toggle:not(.gender) > .thumb::after {
            border: solid 2px #777;
        }

        .ios .toggle.gender {
            width: 77px;
            max-width: 77px;
            max-height: 28px;
        }

            .ios .toggle.gender.important::before {
                background-color: #FFA366;
                box-shadow: inset 0 1px 2px #FF6600, inset 0 12px 3px 2px rgba(255, 102, 0, 0.5);
            }

            .ios .toggle.gender.on::before {
                width: 77px;
            }

            .ios .toggle.gender.on > .thumb {
                -webkit-transform: translate3d(49px,0,0);
                -ms-transform: translate(49px,0);
                transform: translate(49px,0);
            }

            .ios .toggle.gender > .thumb::before {
                content: "";
                left: -24px;
                background: url('images/icons.png') no-repeat;
                width: 20px;
                height: 20px;
                background-size: 720px 60px;
                /*background-position: -120px -40px; */
                background-position: -140px -40px;
                margin-top: -3px;
                margin-left: -5px;
            }

            .ios .toggle.gender > .thumb::after {
                content: "";
                right: -32px;
                background: url('images/icons.png') no-repeat;
                width: 20px;
                height: 20px;
                background-size: 720px 60px;
                background-position: -120px -40px;
                margin-top: -3px;
                margin-left: -5px;
            }

        .ios .toggle.important::before {
            background-color: #FFA366 !important;
            background-image: -webkit-linear-gradient(top, #FFA366, #fad7bf);
            background-image: -moz-linear-gradient(top, #FFA366, #fad7bf);
            background-image: -ms-linear-gradient(top, #FFA366, #fad7bf);
            background-image: linear-gradient(to bottom, #FFA366, #fad7bf);
        }


    /* File reader */

    .ios .iosview .filereader {
        cursor: pointer;
        height: 32px;
    }

        .ios .iosview .filereader input {
            position: relative;
            left: 0px;
            top: 0px;
            height: 30px;
            width: 140px;
            opacity: 0;
            z-index: 2;
            -webkit-appearance: none;
            cursor: pointer;
        }

    .ios .backpanel {
        background: #3b4858;
        color: #fff;
        padding: 6px;
        height: 100%;
        overflow-y: scroll;
    }

    @media all and (max-device-width:480px) {
        .ios .backpanel {
            width: 100%;
        }
    }

    .ios .backpanel .title {
        font-weight: bold;
        font-size: .9em;
        margin-bottom: 7px;
    }

    .ios .backpanel button.action {
        margin: -5px 0 0 0;
        display: inline-block;
    }

    /* Keywords panel */

    .ios .keywordspanel {
    }

        .ios .keywordspanel button.keyword {
            background: none;
            background-image: none !important;
            width: 100%;
            border-radius: 3px;
            padding: 2px 4px;
            margin: 3px auto;
            cursor: pointer;
            font-weight: normal;
            height: 23px;
            color: #fff;
        }

    @media all and (max-device-width:480px) {

        .ios .keywordspanel {
            width: 100%;
        }
    }


    .ios .keywordspanel button.keyword:hover {
        font-weight: bold;
    }

    .ios .keywordspanel button.keyword .text {
        display: inline-block;
    }

    .ios .keywordspanel button.action {
        margin: -5px 0 0 5px;
    }



    /* Accumulation panel */

    .ios .accumulationpanel * {
        color: #ffffff !important;
        margin-top: 10px;
    }

    .ios .accumulationpanel hr {
        margin: 2px 0;
    }

    /* Documents list */

    .ios .itemsbar {
        height: 100%;
        width: 180px;
        border: 1px solid #808080;
        border-width: 0 1px;
        background: #3B4858;
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }

        .ios .itemsbar .tabviewcontent {
            padding: 6px;
        }

    @media all and (max-device-width:480px) {
        .ios .itemsbar .tabviewcontent {
            padding: 0px;
        }
    }


    .ios .itemsbar .dateitem {
        height: 16px;
        font-size: .8em;
        font-weight: bold;
        color: #fff;
        background-color: #3b4858;
        padding: 2px 8px;
        margin-bottom: 6px;
    }

    .ios .itemsbar .item {
        clear: both;
        font-size: .7em;
        color: #505050;
        overflow: hidden;
        padding: 5px;
        /*background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2NyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0ZGRkZGRiIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0VFRUVFRSIgb2Zmc2V0PSIwLjYiLz48c3RvcCBzdG9wLWNvbG9yPSIjREFEQURDIiBvZmZzZXQ9IjEiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNjcpIiAvPgo8L3N2Zz4=);*/
        background-image: -webkit-linear-gradient(left, #ffffff, #eeeeee 60%, #dadadc);
        background-image: -moz-linear-gradient(left, #ffffff, #eeeeee 60%, #dadadc);
        background-image: -ms-linear-gradient(left, #ffffff, #eeeeee 60%, #dadadc);
        background-image: linear-gradient(to right, #ffffff, #eeeeee 60%, #dadadc);
        text-overflow: ellipsis;
        cursor: pointer;
        border: 1px solid white;
        border-radius: 4px;
        margin-bottom: 10px;
    }

    .ios .itemsbar .subitem {
        font-size: .9em;
        color: #505050;
        overflow: hidden;
        padding: 4px;
        /*background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2NyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0ZGRkZGRiIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0VFRUVFRSIgb2Zmc2V0PSIwLjYiLz48c3RvcCBzdG9wLWNvbG9yPSIjREFEQURDIiBvZmZzZXQ9IjEiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNjcpIiAvPgo8L3N2Zz4=);*/
        background-image: -webkit-linear-gradient(left, #ffffff, #eeeeee 60%, #dadadc);
        background-image: -moz-linear-gradient(left, #ffffff, #eeeeee 60%, #dadadc);
        background-image: -ms-linear-gradient(left, #ffffff, #eeeeee 60%, #dadadc);
        background-image: linear-gradient(to right, #ffffff, #eeeeee 60%, #dadadc);
        text-overflow: ellipsis;
        cursor: pointer;
        border: 1px solid white;
        border-radius: 4px;
        margin: 5px 0px;
    }

        .ios .itemsbar .item.pressed,
        .ios .itemsbar .item.selected,
        .ios .itemsbar .subitem.pressed,
        .ios .itemsbar .subitem.selected {
            color: #fff;
            /*background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc5MDAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiMwNThCRjUiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMwMTVERTYiIG9mZnNldD0iMSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c5MDApIiAvPgo8L3N2Zz4=);*/
            background-image: -webkit-linear-gradient(top, #058bf5, #015de6) !important;
            background-image: -moz-linear-gradient(top, #058bf5, #015de6) !important;
            background-image: -ms-linear-gradient(top, #058bf5, #015de6) !important;
            background-image: linear-gradient(to bottom, #058bf5, #015de6) !important;
        }

    .ios .itemsbar .item .title {
        color: inherit;
        width: auto;
        overflow: hidden;
        margin-top: 3px;
        max-width: 100%;
        white-space: pre-line;
        font-weight: bold;
        font-size: 1.1em;
        text-overflow: ellipsis;
    }

    .ios .itemsbar .item .activity {
        margin: 2px 0;
    }

        .ios .itemsbar .item .activity > span {
            margin-right: 3px;
        }

    .ios .itemsbar .item .indicator.toread {
        font-size: .9em;
    }

    .ios .itemsbar .subitem .indicator.toread {
        font-size: 1em;
    }

    .ios .itemsbar .item .indicator.red {
        background-color: #d4164c;
    }

    .ios .itemsbar .item .prices {
        text-align: right;
    }

    .ios .itemsbar .item *:not(.subitem) {
        pointer-events: none;
    }

    .ios .itemsbar .subitem * {
        pointer-events: none;
    }

    .ios .itemsbar .item .indicator {
        font-size: 1em;
        text-align: left;
        /*white-space: nowrap;*/
        display: inline-block;
        margin-right: 2px;
    }

    @media all and (max-device-width:480px) {
        .ios .itemsbar .item .indicator {
            font-size: 0.8em;
        }
    }

    .ios .itemsbar .item .prices > .indicator {
        font-size: 0.9em;
    }

    .ios .itemsbar .subitem .title {
        margin-bottom: 3px;
        font-size: 1.1em;
        text-align: left;
    }

    .ios .itemsbar .subitem .indicator {
        margin-right: 3px;
    }

    @media all and (max-device-width:480px), all and (min-device-width:720px) and (max-device-width:720px) {

        .ios .itemsbar {
            width: 100%;
            max-height: 100px;
            height: 100px;
            vertical-align: top;
            overflow-x: scroll;
            overflow-y: hidden;
            border-bottom: 1px solid #3b4858;
        }

            .ios .itemsbar .tabviewcontent {
                max-height: 100px;
                width: 15000px;
                height: auto;
            }

            .ios .itemsbar .item {
                clear: none !important;
                font-size: 1em;
                padding: 2px 6px;
                display: inline-block;
                vertical-align: top;
                height: 100px;
                max-height: 100px;
                border-right: 1px solid #3b4858;
                border-radius: 0;
            }

            .ios .itemsbar .subitem {
                height: 100px;
                max-height: 100px;
                font-size: .8em;
                padding: 8px;
                float: right;
                border-right: 1px solid #3b4858;
                border-radius: 0;
            }

            .ios .itemsbar .dateitem {
                height: 100px;
                max-height: 100px;
                font-size: 1em;
                font-weight: bold;
                color: #fff;
                display: inline-block;
                background-color: #3b4858;
                padding: 2px 8px;
                padding-top: 25px;
                margin-bottom: 0;
            }

                .ios .itemsbar .dateitem > span {
                    text-align: center;
                    display: block;
                    width: auto;
                }

            .ios .itemsbar .item .title {
                margin-top: 2px;
                font-size: 1em;
                white-space: nowrap;
            }

            .ios .itemsbar .item .indicator {
                padding: 1px 4px;
                width: auto;
                border-radius: 2px;
                margin: 0 5px 2px 0;
                display: inline-block;
            }

            .ios .itemsbar .item .sender {
                overflow: hidden;
                white-space: nowrap;
                font-size: .8em;
                /*font-weight: bold;*/
                text-overflow: ellipsis;
            }

            .ios .itemsbar .item .prices {
                text-align: left;
            }
    }

    /* Sidepanel */

    .sidepanel {
        width: 220px;
        max-width: 220px;
        padding: 0;
        height: 100%;
        color: #fff;
        border: 1px solid Gray;
        border-width: 0 1px;
        font-size: .8em;
        background-color: #3b4858;
    }

        .sidepanel .sep {
            color: #fff;
            text-align: center;
            padding: 4px 0;
            border-bottom: 1px solid Gray;
            border-top: 1px solid Gray;
            margin-bottom: 5px;
            background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.0), rgba(255,255,255,0.1));
            background-image: -moz-linear-gradient(top, rgba(255,255,255,0.0), rgba(255,255,255,0.1));
            background-image: -ms-linear-gradient(top, rgba(255,255,255,0.0), rgba(255,255,255,0.1));
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00000000', endColorstr='#25FFFFFF')";
            font-size: 1.1em;
        }

        .sidepanel span.paneltext {
            margin: 3px 10px;
            display: inline-block;
        }

    /* Calendar  */

.ios .calendarcontrol {
    display: inline-block;
    vertical-align: top;
    -webkit-transform: translate3d(0,0,0);
    transform: translate(0,0);
    overflow-x: scroll;
    position: relative;
    background: #3b4858;
    min-height: 100%;
}

@media all and (max-device-width:480px), all and (min-device-width:720px) and (max-device-width:720px), all and (min-device-width:768px) and (max-device-width:768px) {

    .ios .calendarcontrol {
        overflow-x: hidden;
    }
}

.ios .calendarcontrol .calendarcontrol__spacer {
    height: 50px;
    min-height: 50px;
}

.ios .calendarcontrol .calendarcontrol__content {
    height: 100%;
    background: inherit;
}

.ios .calendarcontrol .calendarcontrol__header {
    width: 100%;
    position: absolute;
    /*height: 36px;*/
    z-index: 1;
    top: 0;
    /*-webkit-transition: top 100ms ease-out;
    transition: top 100ms ease-out;*/
    border-bottom: 1px solid #fff;
    background: inherit;
    will-change: top;
}

.ios .calendarcontrol .calendarcontrol__headerpart {
    color: #ffffff;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    padding: 2px 5px;
    text-overflow: ellipsis;
}

.ios .calendarcontrol .calendarcontrol__headerpart.calendarcontrol__headerpart--title {
    font-weight: bold;
}

@media all and (max-device-width:480px), all and (min-device-width:720px) and (max-device-width:720px) {

    .ios .calendarcontrol .calendarcontrol__headerpart.calendarcontrol__headerpart--title {
        font-size: 1em;
    }
}

.ios .calendarcontrol .calendarcontrol__headerpart.calendarcontrol__headerpart--appointmentscount {
    text-align: left;
    font-size: .9em;
}

.ios .calendarcontrol .calendarcontrol__regulation {
    color: #fff;
    overflow: hidden;
    padding: 2px 5px;
    text-overflow: ellipsis;
    border-top: 1px white solid;
    border-bottom: 0 !important;
    background-image: -webkit-linear-gradient(top, #ff76b6, #d20b21);
    background-image: -moz-linear-gradient(top, #ff76b6, #d20b21);
    background-image: -ms-linear-gradient(top, #ff76b6, #d20b21);
    background-image: linear-gradient(to bottom, #ff76b6, #d20b21);
}

.ios .calendarcontrol table {
    padding: 0;
    margin: 0;
    table-layout: fixed;
    border-width: 0;
    text-align: left;
    /*width: 100%;*/
    min-width: 100%;
    border-top: 1px solid transparent;
    border-left: 1px solid #3b4858;
    border-bottom: 1px solid #3b4858;
    background: inherit;
}
/*
    .ios .calendarcontrol table thead tr {
        border-left: 0;
        background-image: -webkit-linear-gradient(top, #3b4858, #455568);
        background-image: -moz-linear-gradient(top, #3b4858, #455568);
        background-image: -ms-linear-gradient(top, #3b4858, #455568);
        background-image: linear-gradient(to bottom, #3b4858, #455568);
    }*/

.ios .calendarcontrol table tbody tr.tr--oddcolor {
    background-color: #E5EEFF;
}

.ios .calendarcontrol table tbody tr.tr--evencolor {
    background-color: #ffffff;
}

.ios .calendarcontrol table tbody tr.tr--selected {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc1MTEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzA1OEJGNSIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzAxNURFNiIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzUxMSkiIC8+Cjwvc3ZnPg==);
    background-image: -webkit-linear-gradient(top, #058bf5, #015de6) !important;
    background-image: -moz-linear-gradient(top, #058bf5, #015de6) !important;
    background-image: -ms-linear-gradient(top, #058bf5, #015de6) !important;
    background-image: linear-gradient(to bottom, #058bf5, #015de6) !important;
    color: #fff !important;
}

.ios .calendarcontrol table tbody tr.tr--selected > td:not(.td--activitycolumn):not(.td--temporarystatecolumn) {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc1MTEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzA1OEJGNSIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzAxNURFNiIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzUxMSkiIC8+Cjwvc3ZnPg==) !important;
    background-image: -webkit-linear-gradient(top, #058bf5, #015de6) !important;
    background-image: -moz-linear-gradient(top, #058bf5, #015de6) !important;
    background-image: -ms-linear-gradient(top, #058bf5, #015de6) !important;
    background-image: linear-gradient(to bottom, #058bf5, #015de6) !important;
    color: #fff !important;
}

.ios .calendarcontrol table tbody tr:not(.tr--selected).tr--unavailable td:not(.td--activitycolumn):not(.td--temporarystatecolumn) {
    background: transparent url(images/calendar-gradient.png) 50% 50% repeat;
    color: #3b4858;
}
    
.ios .calendarcontrol table thead tr th {
    font-weight: normal;
    overflow: hidden;
    padding: 1px 5px;
    font-size: .9em;
    vertical-align: middle;
    color: #fff;
}

.ios .calendarcontrol table tbody tr td {
    color: #3b4858;
    border-bottom: solid 1px #dddddd;
    border-left: solid 1px #dddddd;
    white-space: nowrap;
    cursor: pointer;
    overflow: hidden;
    padding: 3px;
    vertical-align: middle;
    font-size: .9em;
    text-overflow: ellipsis;
}

.ios .calendarcontrol table tbody tr:last-of-type td {
    border-bottom: none;
}

@media all and (max-device-width:480px), all and (min-device-width:720px) and (max-device-width:720px) {

    .ios .calendarcontrol table tbody tr td {
        padding: 4px;
    }
}

.ios .calendarcontrol table tbody tr.tr--hovered td:not(.td--activitycolumn):not(.td--temporarystatecolumn) {
    background: #fdf5e5 !important;
    color: #3b4858 !important;
}

.ios .calendarcontrol table tbody tr:first-of-type td {
    border-top: 1px solid #dddddd;
}

.ios .calendarcontrol table tbody tr td:last-of-type {
    border-right: 1px solid #dddddd;
}

.ios .calendarcontrol table tbody tr.cutrow {
    background: transparent url(images/calendar-gradient.png) 50% 50% repeat;
    color: #3b4858;
}

.ios .calendarcontrol table tbody tr.cutrow > td {
    color: #bbb;
}

.ios .calendarcontrol table td,
.ios .calendarcontrol table th {
    -webkit-transform: none !important;
    -ms-transform: none !important;
    transform: none !important;
    text-overflow: ellipsis;
    overflow: hidden;
}

        /*
.ios .calendarcontrol td.unconfirmed {
    
    background: transparent url(images/calendar-gradient.png) 50% 50% repeat;
    color: #3b4858;
}
    */
.ios .calendarcontrol table tbody tr td.td--strikethrough {
    text-decoration: line-through;
}

.ios .calendarcontrol table tbody tr td.td--timeslotcolumn {
    text-align: center;
    width: 40px;
}

@media all and (max-device-width:480px), all and (min-device-width:768px) and (max-device-width:768px), all and (min-device-width:720px) and (max-device-width:720px) {

    .ios .calendarcontrol table tbody tr td.td--timeslotcolumn {
        width: 50px !important;
    }
}

.ios .calendarcontrol table tbody tr td.td--timeslotcolumn.td--timeslotcolumn--round {
    font-weight: bold;
}

.ios .calendarcontrol table tbody tr td.td--timeslotcolumn.td--timeslotcolumn--surbook {
    color: #ffffff;
    background-image: -webkit-linear-gradient(top, #ff76b6, #d20b21);
    background-image: -moz-linear-gradient(top, #ff76b6, #d20b21);
    background-image: -ms-linear-gradient(top, #ff76b6, #d20b21);
    background-image: linear-gradient(to bottom, #ff76b6, #d20b21);
}

.ios .calendarcontrol table tbody tr td.td--activitycolumn {
    width: 65px;
}

.ios .calendarcontrol table tbody tr td.td--activitycolumn.minimized {
    width: 45px !important;
}

@media all and (max-device-width:480px), all and (min-device-width:768px) and (max-device-width:768px), all and (min-device-width:720px) and (max-device-width:720px) {

    .ios .calendarcontrol table tbody tr td.td--timeslotcolumn {
        width: 30px;
    }

    .ios .calendarcontrol table tbody tr td.td--activitycolumn.minimized {
        width: 30px !important;
    }
}

.ios .calendarcontrol table tbody tr td.td--gendercolumn {
    width: 22px;
    max-width: 22px;
    text-align: center;
}

.ios .calendarcontrol table tbody tr td.td--presencecolumn {
    width: 55px;
    max-width: 55px;
    text-align: center;
}

.ios .calendarcontrol table tbody tr td.td--presencecolumn > div {
    font-size: .9em;
}

.ios .calendarcontrol table tbody tr td.td--temporarystatecolumn {
    width: 80px;
    max-width: 80px;
    font-size: .9em;
}

.ios .calendarcontrol table tbody tr td.td--temporarystatecolumn > div {
    font-size: .9em;
}

.ios .calendarcontrol table tbody tr td.td--patientcolumn {
    width: 160px;
    min-width: 100px;
}

.ios .calendarcontrol table tbody tr td.td--patientcolumn span.td--patientcolumn__lastname {
    margin-right: 5px;
    font-weight: bold;
}

.ios .calendarcontrol table tbody tr td.td--patientcolumn span.td--patientcolumn__title {
    margin-right: 5px;
}

.ios .calendarcontrol table tbody tr td.td--patientcolumn div.td--patientcolumn__new {
    background: #015de6;
    background-image: -webkit-linear-gradient(top, #058bf5, #015de6) !important;
    background-image: -moz-linear-gradient(top, #058bf5, #015de6) !important;
    background-image: -ms-linear-gradient(top, #058bf5, #015de6) !important;
    background-image: linear-gradient(to bottom, #058bf5, #015de6) !important;
    position: relative;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    box-shadow: 0 0 4px #000;
    float: right;
    right: -12px;
    top: -10px;
    width: 20px;
    height: 15px;
}

.ios .calendarcontrol table tbody tr td.td--reasoncolumn {
    width: 200px;
}

.ios .calendarcontrol table tbody tr td.td--detailscolumn {
    width: 200px;
}

.ios .calendarcontrol th.weekcolumn,
.ios .calendarcontrol td.weekcolumn {
    width: 25px;
    text-align: center;
}

.ios .calendarcontrol td.weekcolumn {
    font-weight: bold;
}

    .ios .calendarcontrol .daycolumn {
        width: 50px;
    }

    .ios .calendarcontrol td.daycolumn {
        font-size: .9em;
        text-align: right;
        /*font-weight: bold;*/
    }

    .ios .calendarcontrol .monthactivitycolumn {
        /* width: 500px;*/
    }

    .ios .calendarcontrol .monthactivity {
        display: inline-block;
        padding: 0 4px;
        white-space: nowrap;
        /*width: 100px;*/
        overflow: hidden;
        max-width: 100%;
        margin-right: 10px;
        height: 22px;
        position: relative;
        line-height: 22px;
        border-radius: 2px;
        text-overflow: ellipsis;
    }

        .ios .calendarcontrol .monthactivity > .full {
            background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ff76b6), to(#d20b21));
            background-image: -moz-linear-gradient(top, #ff76b6, #d20b21);
            background-image: -ms-linear-gradient(top, #ff76b6, #d20b21);
            background-image: linear-gradient(to bottom, #ff76b6, #d20b21);
            position: absolute;
            right: -18px;
            top: -18px;
            width: 30px;
            height: 30px;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            box-shadow: 0 0 4px #000;
        }

    /* Public calendar */

    .ios .calendarcontrol .publiccalendarbody {
        margin-top: 20px;
        width: 100%;
        min-width: 100%;
    }

    .ios .calendarcontrol .publictimeslot {
        margin: 10px;
        display: inline-block;
        background-color: #e5fff2;
        border-radius: 3px;
        color: #3b4858;
        font-size: 1.2em;
        font-weight: bold;
        text-align: center;
        padding: 20px 10px;
        cursor: pointer;
    }

        .ios .calendarcontrol .publictimeslot.hovered {
            background: #fdf5e5 !important;
        }

        .ios .calendarcontrol .publictimeslot.selected {
            /*background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc1MTEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzA1OEJGNSIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzAxNURFNiIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzUxMSkiIC8+Cjwvc3ZnPg==);*/
            background-image: -webkit-linear-gradient(top, #058bf5, #015de6) !important;
            background-image: -moz-linear-gradient(top, #058bf5, #015de6) !important;
            background-image: -ms-linear-gradient(top, #058bf5, #015de6) !important;
            background-image: linear-gradient(to bottom, #058bf5, #015de6) !important;
            color: #fff !important;
        }


    /* Color picker */

    .picker-wrapper,
    .slide-wrapper {
        position: relative;
        float: left;
    }

    .picker-indicator,
    .slide-indicator {
        position: absolute;
        left: 0;
        top: 0;
        pointer-events: none;
    }

    .picker,
    .slide {
        cursor: crosshair;
        float: left;
    }

    .cp-small {
        padding: 5px;
        background-color: white;
        float: left;
        border-radius: 5px;
    }

        .cp-small .picker {
            width: 100px;
            height: 100px;
        }

        .cp-small .slide {
            width: 15px;
            height: 100px;
        }

    @media all and (max-device-width:480px), all and (min-device-width:720px) and (max-device-width:720px) {

        .cp-small .picker {
            margin-left: 10px;
            width: 250px;
            height: 250px;
        }

        .cp-small .slide {
            width: 30px;
            height: 250px;
        }
    }


    .cp-small .slide-wrapper {
        margin-left: 5px;
    }

    .cp-small .picker-indicator {
        width: 1px;
        height: 1px;
        border: 1px solid black;
        background-color: white;
    }

    .cp-small .slide-indicator {
        width: 100%;
        height: 2px;
        left: 0px;
        background-color: black;
    }






    .upholstery {
        background: -webkit-radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0, -webkit-radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px, -webkit-radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0, -webkit-radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px, -webkit-radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0, -webkit-radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px, -webkit-radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0, -webkit-radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px, -webkit-linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0, -webkit-linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0;
        background-color: #300;
        background-size: 100px 100px;
    }