/* The Main visuals are presented here in order, with focus on the main page*/
/* The cMain.css file should be interchangable in order to get  */

    .primaryFontColor { color: black }

.primaryBackgroundColor { color: white }

.topAnimate {
    transition: top 0.3s ease 0s;
    z-index: 9999;
}

.CapsuleItem {
    border: 1px solid rgb(237,235,233);
    margin-top: -1px;
    padding: 2px 10px 2px 5px;
    /*transition: background-color 1s ease;*/
}

.CapsuleDescription {
    font-style: italic;
    white-space: pre-wrap;
    color: #aaaaaa;
    font-size: 12px;
    width: 100%;
}

.menuFontColor { color: white }
.menuBackgroundColor { background-color : steelblue }
.menuBorderBottomColor { border-bottom-color : darkslategrey }

/**************************************************/
/* Initial settings at highest level - body + HTML*/
/**************************************************/
html, body {
    overflow: -moz-hidden-unscrollable;
    webkit-overflow-scrolling: auto;
}

/**************************************************/
/* Adjustable display settings                    */
/**************************************************/
:root {
    --show-icons: true;
    --preview-images: true;
}

/*********************************************/
html {
    webkit-overflow-scrolling: auto;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
/*********************************************/

th, td {
    border: 1px solid black;
}
td {
    text-align: center;
    vertical-align: middle;
}

/***********************************************************************************************/
/* Main Title Header - contains "Snuglist" title, and Home, Favo, Add Friend, and Account icons*/
/***********************************************************************************************/
.SnuglistHeaderProperties {
    color: blue;
    width: 100%;
    min-height: 10px;
    padding-right: -50px;
    /*    opacity: 0.95;*/
    font-size: 18px;
    font-family: Verdana;
    border-top: solid 1px white;
}
.SnuglistHeaderPropertiesMobile {
    color: white;
    width: 100%;
    min-height:10px;
    padding-right:-50px;
    font-family: Verdana;
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */


    /*min-height: 70px;*/
    /*border-bottom: solid;
    border-bottom-width: 2px;
    border-bottom-color: darkgray;*/
    /*background-color: darkgreen;*/
/*    opacity: 0.95;*/
    /*font-size: 48px;*/
}
/* a divider that can be used between items */
/*.Divider {
    width: 100%;
    height: 2px;
    background-color: rgb(91,170,239);
}
.DividerdarkMode {
    width: 100%;
    height: 2px;
    background-color: black;
}*/




/*****************************************/
/* main title row and capsule title rows */
/*****************************************/
.CapsuleTitleProperties {
    background-color: white;
    box-sizing: border-box;
    padding-left: 5px;
    color: black;
    border-bottom: solid;
    border-bottom-width: 1px;
    border-bottom-color: rgb(237,235,233);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    min-height: 40px;
    width: 100%;
    word-break: break-word;
    font-size: 18px;
    font-family: Arial;
}
/* Limit title to 1 row with "..." if concatenation is needed */
.CapsuleTitleAbbreviated {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* overrides for dark mode */
/*.CapsuleTitlePropertiesdarkMode {*/
    /*background-color: rgb(83, 83, 83);*/
    /*color: white;*/
    /*box-shadow: none !important;*/
/*}*/

/* overrides for Refill Mode */
.CapsuleTitlePropertiesRefillPaper {
    /*background-color: rgb(229,229,229);*/
    color: white;
    /*box-shadow: none !important;*/
}

.CapsuleTitleIconCont {
    background-color: white;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    vertical-align: middle;
}

.CapsuleTitleIconContMobile {
    /*background-color: white;*/
    align-items: center;
    justify-content: center;
    align-self: stretch;
    vertical-align: middle;
}



/*.CapsuleTitleIconContdarkMode {
    background-color: #9f9f9f !important;
}
*/

.CapsuleTitlePropertiesMobile {
    display: flex;
    padding-left: 120px;
    min-height: 100px;
    box-sizing: border-box;
    flex-direction: row;
    align-items: center;
    width: 100%;
    word-break: break-word;
    color: black;
    font-size: 60px;
    font-family: Arial;
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
    border-radius: 10px 10px 0px 0px;
}
/*****************************/
/* Counters in the title row */
/*****************************/
.RoundCounter {
    width: 25px;
    height: 25px;
    color: black;
    font-size: 18px;
    line-height: 25px;
    font-family: Verdana;
    /*font-weight: 600;*/
    margin-right: 10px;
    text-align: center;
    /*border-style: solid;*/
    border-width: 2px;
    /*border-color: seagreen;*/
    border-radius: 50%;
    background-color: rgba(255,255,255,0.5);
}
.RoundCounterMobile {
    width: 80px;
    height: 80px;
    font-size: 60px;
    margin-right: 5px;
    text-align: center;
    vertical-align: bottom;
    font-family: Verdana;
    background-color: rgba(255,255,255,0.5);
    /*border-style: solid;*/
    /*border-width: 2px;*/
    border-collapse: forestgreen;
    border-radius: 50%;
}

/********************************************************************/
/* The Icon and div it sits in in the title row and custom capsules */
/********************************************************************/
.MenuTitleIconDiv {
    vertical-align: middle;
    height: 20px;
}
.MenuTitleIconDivMobile {
    vertical-align: middle;
    height: 60px;
}
.MenuTitleIcon {
    width: 20px;
    height: 20px;
}
.MenuTitleIconMobile {
    width: 60px;
    height: 60px;
    line-height: 60px;
}

/* DIV BODY - good for setting borders below the main menu title */
.mainContent {
    /*border-top: solid;*/
    /*border-top-color: blue;*/
    /*flex: 1;*/
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: lightgrey transparent;
    /*height:100%;*/
    flex: 1;
}

.mainContentMobile {
    flex: 1;
    overflow-x: hidden;
    overflow-y: scroll;
    height:100%;
}



.rotate {
    animation: rotation 2s infinite linear;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

.darkModeBorder {
    border-bottom-color: rgb(72, 69, 69) !important;
}

/*.CapsuleItemTitledarkMode {
    border-bottom-color: rgb(72, 69, 69) !important;
}
*/

/*This needs stay. It is used by ChangeCSSTheme */
.CapsuleItemIconImage {

}

.DivPinsContainer {
    margin-bottom:5px;
    margin-top: 5px !important; /* needs to override capsule item class with -1px */
    border-radius: 5px;
}

/*.CapsuleItemdarkMode {*/
    /*color: white !important;*/
    /*background-color: #5e5e5e !important;*/
    /*border-bottom-color: rgb(72, 69, 69) !important;*/
/*}*/

.CapsuleItemPin{
    background-color: white;

}

.CapsuleItemPindarkMode {
    background-color: #535353;
}

.divbody {
    transition: background-color 1s ease;
}


.divbodydarkMode {
    background-color: #535353 !important;
}

.overrideMode {

}

.CapsuleItemTitle {
    border-radius: 5px 5px 0px 0px;
    margin-top: 4px !important;
}


/***************************************************/
/*Probably the area that will be most often updated*/
/***************************************************/
/***************************************************/
/* Capsule Item Background                         */
/***************************************************/
.CapsuleItem {
    touch-action: manipulation;
    box-sizing: border-box;
    align-items: center;
/*    padding-left: 10px;
    padding-right: 10px;
*/    width: 100%;
    height: 100%;
    font-family: Arial;
    background-color: white;
    color: black;
    letter-spacing: .1em;
    user-select: none;
    /*min-height: 10px;*/
    opacity: 1;
    position: relative;
    border-color: rgb(237,235,233);
}

.CapsuleItemMeta {
    touch-action: manipulation;
    box-sizing: border-box;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
    height: 100%;
    font-family: Arial;
    color: black;
    letter-spacing: .1em;
    user-select: none;
    min-height: 10px;
    opacity: 1;
    position: relative;
    padding-top: 2px;
    padding-bottom: 2px;
    /*border-color: rgb(237,235,233);*/
    border-top: 1px solid lightslategrey;
    margin-top: -1px;

}

.CapsuleItemMobile {
    touch-action: manipulation;
    box-sizing: border-box;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
    height: 100%;
    color: black;
    font-family: Arial;
    font-size: 50px;
    opacity: 0.9;
    position: relative;
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-usr-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    border-bottom: solid;
    border-width: 1px;
    border-bottom-color: grey;
}

.CapsuleItemMenu {
    color: black;
    border-bottom-color: slategray !important;
}

.CapsuleItemIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    align-self: stretch;
}

.CapsuleItemIconMobile {
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    align-self: stretch;
}


.CapsuleItemIconMeta {
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    align-self: stretch;
}


.CapsuleItemRightIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    /*border-radius: 0px 10px 10px 0px;*/
    /*background-color: lightblue;*/
}

/***************************************************/
/* Capsule Item Text                               */
/***************************************************/
/*.CapsuleItemText {
}*/

.CapsuleItemTextMobile {
    padding: 8px;
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}
/***********************************************************/
/* Main item highlight by mouse or keyboard                */
/***********************************************************/
.CapsuleItemHighlighted {
    background-color: rgb(173,216,230) !important;
    border-bottom-color: transparent !important;
    border-bottom-color: transparent;
    z-index: 1234;
}

.CapsuleItemHighlightedMobile {
    background-color: rgb(173,216,230) !important;
    border-bottom-color: transparent !important;
    border-bottom-color: transparent;
    z-index: 1234;
}


.CapsuleItemHighlightedMeta {
    background-color: midnightblue !important;
    border-bottom-color: transparent !important;
    border-bottom-color: transparent;
    z-index: 1234;
}

/* Menu at bottom of screen: Search, View, Add New , Back */
.bottomMenu {
    background-color: rgb(10, 52, 125);
    text-align: center;

}


.CapsuleItemHighlighteddarkMode {
    background-color: #3d3b3b !important;
    border-bottom-color: transparent !important;
    border-bottom-color: transparent;
    z-index: 1234;
}
/***********************************************************/
/* Used for when an item is highlighted by touch in mobile */
/***********************************************************/
.CapsuleItemHighlightedMobile {
    width: 100%;
    /* Jan 2022 - moved padding from container to item.
        this allows for highlighting padding also which looks better
    */
/*    padding-left: 10px;
    padding-right: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
*/    /*font-size: 40px;*/
    /*background-color: rgb(211 238 255);*/
    /*background-color: black;*/
    /*color: black;*/
    font-family: Arial;
    /*font-size: 40px;*/
    /*border-radius: 10px;*/
    /*min-height: 100px;*/
    /*margin-bottom: 5px;*/
    opacity: 0.9;
    position: relative;
    min-height: 10px;
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    /*border-bottom: solid;*/
    /*border-width: 1px;*/
    /*border-bottom-color: rgb(237,235,233);*/
}
/*********************************************/
/* Used when mouse is moved over an menuItem */
/*********************************************/
.CapsuleItemMouseHighlighted {
    /*font-family: Arial;*/
    background-color: aliceblue !important;
    /*opacity:0.8;*/
    /*color: black;*/
    /*letter-spacing: .1em;*/
    /*margin-bottom: 3px;*/
    /*border-radius: 10px;*/
    /*border-bottom: solid;
    border-width: 1px;
    border-color: grey;*/
    /*user-select: none;*/
    /*min-height: 10px;*/
    /*position: relative;*/
}
/*.CapsuleItemMouseHighlighteddarkMode {
    background-color:#6e6e6e !important;
}
*/
.CapsuleItemMouseHighlightedMeta {
    background-color: rgb(50,50,255,0.9) !important;
}


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

/*******************************************************************************/
/* OTHER - MISC */
/*******************************************************************************/

/***********************************/
/* Ensure text can not be selected */
/***********************************/
.noSelect {
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -o-user-select: none;
    -webkit-user-callout: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-modify: none;
    -webkit-highlight: none;
    touch-callout: none;
    -webkit-touch-callout: none;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.YTEMBED {
    width: 100%;
    height:100%;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:green;
}

/****************************************************************************/
/* Easy way to center items in a div. Should eventually be replace by flexbox
/****************************************************************************/
.centerDiv {
    margin: 0 auto;
}

/*******************************************/
/* Size of checkbox when doing multiselect */
/*******************************************/
.cbClass {
    /*transform: scale(1.5);*/
}
.cbClassMobile {
    -webkit-transform: scale(3,3);
}

/********************************/
/* Used in relation to slip     */
/********************************/
.slip-reordering {
    box-shadow: 0px 0px 5px rgba(0,0,0,0.9);
    z-index: 99999 !important;
/*    -moz-transform: scale(0.75);
    -moz-transform-origin: 0% 0%;
    -webkit-transform: scale(0.75);
    -webkit-transform-origin: 0% 0%;
    -ms-transform: scale(0.75);
    -ms-transform-origin: 0% 0%;
*/    pointer-events: none;
    touch-action: none;
}
.slip-reordering-drop-into {
/*    transition: all .2s step-end;*/
    box-shadow: 0px 0px 5px rgba(0,0,0,0.9);
    z-index: 99999 !important;
    -moz-transform: scale(0.75);
    -moz-transform-origin: 0% 0%;
    -webkit-transform: scale(0.75);
    -webkit-transform-origin: 0% 0%;
    -ms-transform: scale(0.75);
    -ms-transform-origin: 0% 0%;
    pointer-events: none;
    touch-action: none;
    opacity: 0.5;
}

.dropTarget {
    border: 1px ridge !important;
    z-index: 999 !important;
}



.mainBackground, .initialCapsuleBackground {
    -webkit-overflow-scrolling: auto;
}

/****************************************************************************************/
/* The little tab that appears behind each menuItem as you drag it to the left or right */
/****************************************************************************************/
/*.toolsCont {
}*/

#Search {
    border-radius: 15px;
    border: 3px solid lightblue;
    padding: 20px; 
    width: 200px;
    height: 10px;    
}

#iconDiv {
    border: none;
}

/*****************************/
/* A nice box shadow         */
/*****************************/
.bShadow {
    box-shadow: 2px 2px 2px #999999;

}
.bShadowMain {
    box-shadow: rgba(100, 100, 111, 0.4) 0px 0px 5px 2px;
}
.bShadowMaindarkMode {
    box-shadow: rgba(40, 40, 40, 0.6) 0px 0px 5px 2px;
}

.divMainPage {
    background-color: white;
    border-left: solid;
    border-left-width: 1px;
    border-right: solid;
    border-right-width: 1px;
    border-left-color: rgb(237, 235, 233);
    border-right-color: rgb(237, 235, 233);
    box-shadow: rgba(100, 100, 111, 0.4) 0px 0px 5px 2px;
    transition: background-color 1s ease;
    transition: width 1s;
}

/*.divMainPagedarkMode {
    background-color: rgb(83, 83, 83) !important;

    border-left-color: rgb(77, 75, 74) !important;
    border-right-color: rgb(77, 75, 74) !important;
    box-shadow: rgba(40, 40, 40, 0.4) 0px 0px 5px 2px !important;
}
*/
.divMainPageRefillPaper {
    background-color:rgb(229,229,229);
}



.WebkitOverflowScrolling  {
    -webkit-overflow-scrolling: touch;
}

/******************************/
/* SLIDERS                    -
/******************************/
/***************************************************/
/* Used for sliding down the menuItem menu options */
/***************************************************/
.exportSlider {
    height: 0px;
    box-sizing: border-box;
    /*border-bottom:solid;*/
    border-bottom-color: rgb(233,235,237);
    display: inline-flex;
    overflow:hidden;
    transition: height 0.3s ease;
    -moz-transition: height 0.3s ease;
    -ms-transition: height 0.3s ease;
    -o-transition: height 0.3s ease;
    -webkit-transition: height 0.3s ease;
    transition-timing-function: ease-out;
}

.exportSlided {
    height: 60px;
}

.exportSlidedMobile {
    height: 55px;
}

.displayMenuItem {
    display: inline-flex !important;
}

.displaySettingsButton {
    display: inline-flex !important;
}

.searchWidthInit {
    width:0%;
    transition: width 0.3s ease;
    -moz-transition: width 0.3s ease;
    -ms-transition: width 0.3s ease;
    -o-transition: width 0.3s ease;
    -webkit-transition: width 0.3s ease;
    transition-timing-function: ease-out;
}
.searchWidthTransition {
    width: 100%;
}


/*.searchResultsHide {
    display: none !important;
}
*/
/***************************************************/
/* Used for sliding up the "Add New" Item  options */
/***************************************************/
.slideInitAddNewPop {
    height: 0px;
    opacity: 1;
    overflow: hidden;
    transition: height 0.25s ease;
    -moz-transition: height 0.25s ease;
    -ms-transition: height 0.25s ease;
    -o-transition: height 0.25s ease;
    -webkit-transition: height 0.25s ease;
    transition-timing-function: ease-out;
}

.slideInitAddNewPopDiag {
    height: 0px;
    width: 0px;
    opacity: 1;
    overflow: hidden;
    transition: height 0.15s ease, width 0.15s ease;
    -moz-transition: height 0.15s ease, width 0.15s ease;
    -ms-transition: height 0.15s ease, width 0.15s ease;
    -o-transition: height 0.15s ease, width 0.15s ease;
    -webkit-transition: height 0.15s ease, width 0.15s ease;
    transition-timing-function: ease-out;
}

.slideInitAddNewFade {
    transition: opacity 0.5s ease;
    -moz-transition: opacity 0.5s ease;
    -ms-transition: opacity 0.5s ease;
    -o-transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
    transition-timing-function: ease-out;
    opacity: 0;
}



.slideOutFade {
    opacity: 1 !important;
}

.slideOutpopupErrorBox {
    height: 50px !important;
    opacity: 1 !important;
}

.slideOutpopupErrorBoxMobile {
    height: 50px !important;
    opacity: 1 !important;
}


.slideOutpopupMessageBox {
    height: 50px !important;
    opacity: 1 !important;
}
.slideOutpopupMessageBoxMobile {
    height: 50px !important;
    opacity: 1 !important;
}



.slideOutpopupSettings {
    height:170px !important;
    width: 100%;
    opacity: 1 !important;
}

.slideOutpopupSettingsMobile {
    height: 170px !important;
    width:100%;
    opacity: 1 !important;
}


.slideOutpopupSettingsOpacity {
    opacity: 1;
}


.slideOutpopupAddNew {
    height: 313px !important;
    display: inline-flex;
    box-shadow: rgba(100, 100, 111, 0.6) 0px -5px 5px 1px;
}
.slideOutpopupAddNewMobile {
    height: 320px !important;
    display: inline-flex;
    box-shadow: rgba(100, 100, 111, 0.6) 0px -5px 5px 1px;
}

.slideOutpopupViewMenu {
    opacity: 1 !important;
    /*height: 240px !important;*/
    /*display: inline-flex !important;*/
}

.slideOutpopupViewMenuMobile {
    opacity: 1 !important;
    /*height: 240px !important;*/
    /*display: inline-flex !important;*/
}



.slideOutpopupComments {
    height: 320px;
    display: inline-flex;
    box-shadow: rgba(100, 100, 111, 0.6) 0px -5px 5px 1px;
}

.slideOutpopupCommentsMobile {
    height: 320px;
    display: inline-flex;
}



.slideOutpopupChangeMenuType {
    height: 80px;
    display: inline-flex;
    box-shadow: rgba(100, 100, 111, 0.6) 0px -5px 5px 1px;
}

.slideOutpopupChangeMenuTypeMobile {
    height: 80px;
    display: inline-flex;
}

.sliderMenuButton {
    display: none;
    width: 50px;
    height: 50px;
    background-color: white;
    border-radius: 5px;
    margin: 5px;
}
.sliderMenuButtonMobile {
    display: none;
    width: 50px;
    height: 50px;
    background-color: white;
    border-radius: 5px;
    margin: 2px;
}


/***************************************************/
/* Used for sliding up the "Change View" Item  options */
/***************************************************/
/*.slideInitAddNew3 {
    height: 0px;
    overflow: hidden;
    display: none;
    transition: height 0.3s ease;
    -moz-transition: height 0.3s ease;
    -ms-transition: height 0.3s ease;
    -o-transition: height 0.3s ease;
    -webkit-transition: height 0.3s ease;
    transition-timing-function: ease-out;
}

.slideOutAddNew3 {
    height: 70px;
    display: inline-flex;
}

.slideOutAddNewMobile3 {
    height: 160px;
    display: inline-flex;
}
*/
.slideDownRefreshInit {
    max-height: 0px;
    overflow-y: hidden;
    -webkit-transition: max-height 0.5s ease-in-out;
    -moz-transition: max-height 0.5s ease-in-out;
    -o-transition: max-height 0.5s ease-in-out;
    transition: max-height 0.5s ease-in-out;
}

.slideDownRefreshGo {
    max-height: 150px;
    
} 

/*.menuEntCont {
    padding: 15px;
    margin-left: 15px;
    margin-right: 15px;
    background-color: rgb(152,102,197);
    width: 100%;
    margin-bottom: 20px;
    border-radius: 0px 0px 10px 10px;
}
.menuEntContMobile {
    padding: 15px;
    box-sizing: border-box;
    background-color: rgb(152,102,197);
    width: 95%;
    margin-bottom: 20px;
    border-radius: 0px 0px 10px 10px;
}*/
/************************************************************/
/* Custom Menu capsules including Done, Snooze, and Deleted */
/************************************************************/
.menuEnt {
    width: 100%;
    /*display: none;*/
    flex-direction: column;
    background-color: white;
    /*margin-top: 10px;*/
    /*margin-bottom: 20px;*/
    /*padding-bottom: 10px;*/
    /*background-color: rgb(85,150,107);*/
}

.menuEntMobile {
    width: 100%;
    display: none;
    flex-direction: column;
    background-color: white;
    /*margin-bottom: 20px;*/
    /*padding-bottom: 10px;*/
    /*background-color: rgb(85,150,107);*/
}
.menuDone {
    width: 100%;
    display: none;
    flex-direction: column;
    background-color: white;
    /*margin-bottom: 20px;*/
    /*padding-bottom: 10px;*/
    /*background-color: rgb(85,150,107);*/
    border-left: solid;
    border-width: 5px;
    border-color: green;
}

.menuDoneMobile {
    width: 100%;
    display: none;
    flex-direction: column;
    margin-bottom: 20px;
    background-color: white;
    border-left: solid;
    border-width: 15px;
    border-color: green;
}
.menuSnooze {
    display: none;
    width: 100%;
    background-color: white;
    flex-direction: column;
    border-left: solid;
    border-width: 5px;
    border-color: yellow;
}
.menuSnoozeMobile {
    display: none;
    width: 100%;
    background-color: white;
    flex-direction: column;
    margin-bottom: 20px;
    border-left: solid;
    border-width: 15px;
    border-color: yellow;
}
.menuDeleted {
    display: none;
    width: 100%;
    background-color: white;
    flex-direction: column;
    border-left: solid;
    border-width: 5px;
    border-color: red;
}

.menuDeletedMobile {
    display: none;
    width: 100%;
    background-color: white;
    flex-direction: column;
    /*margin-bottom: 20px;*/
    border-left: solid;
    border-width: 15px;
    border-color: red;
    /*padding-bottom: 20px;*/
}
.menuSearch {
    display: none;
    width: 100%;
    background-color: white;
    flex-direction: column;
    border-left: solid;
    border-width: 5px;
    border-color: darkblue;
}

.menuSearchMobile {
    display: none;
    width: 100%;
    background-color: white;
    flex-direction: column;
    margin-bottom: 20px;
    border-left: solid;
    border-width: 15px;
    border-color: darkblue;
    /*padding-bottom: 20px;*/
}
/***************************************************************/

/*******************************************/
/* Edit text boxes
/*******************************************/
.tbEdit {
    background-color: rgba(255,255,255,0.7);
    border-radius: 3px;
    border-style: none;
    padding: 6px;    /* Have to remove auto padding so tb resizer works */
    width: 100%;
    max-width: 2500px;
    min-height: 10px;
    overflow: hidden;
    resize:none;
    outline:none;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: Arial;
    font-size: 14px;
    margin-top:5px;
}



/***********************************************/
/* All menu containers (that contain menuItems */
/***********************************************/
.menuContainers {
    /* moved padding left and right to items. better for highlighting */
    /*margin-left: 10px;*/
    /*margin-right: 10px;*/
}

input[type='text'],
input[type='number'] {
    font-size: 16px;
}
input[type="date"] {
    font-size: 50px;
}
input[type="datetime"] {
    font-size: 50px;
}
input[type="datetime-local"] {
    font-size: 50px;
}

@media only screen and (min-width : 320px) and (max-width : 560px) {
    body {
        -webkit-text-size-adjust: none;
    }
}

a, a:active, a:focus {
    outline: none;
}
div {
    outline: none;
}

.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.grad {
    background-image: linear-gradient(to bottom, aliceblue, lightblue);
    border-left: 1px solid rgb(237, 235, 233);
    border-right: 1px solid rgb(237, 235, 233);
}

.graddarkMode {
    background-image: linear-gradient(to bottom, rgb(110,110,110), #4d4a4a);
}


/*.make-it-slow {
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    transition: box-shadow 0.3s ease-in-out;
    z-index:1;
}

.make-it-slow:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index:1000;
}*/


/*************************************************/
/* DARK MODE                                     */
/*************************************************/



/************************************/
/* TOOL TIP                         */
/************************************/

/* Tooltip container */
/*.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;*/ /* If you want dots under the hoverable text */
/*}*/

/* Tooltip text */
.tooltiptext {
    visibility: hidden;
    overflow: hidden;
    /*width: 120px;*/
    background-color: rgba(30,30,30,0.8);
    color: #fff;
    font-family: Arial;
    font-size: 10px;
    text-align: center;
    padding: 5px 0;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 6px;
    width: 120px;
    /*top: 100%;*/
    left: 50%;
    /*margin-left: -65px;*/ /* Use half of the width (130/2 = 65), to center the tooltip */
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 9999;
    transition: opacity 500ms ease-in-out;
    -moz-transition: opacity 500ms ease-in-out;
    -webkit-transition: opacity 500ms ease-in-out;
}

/* Show the tooltip text when you mouse over the tooltip container */
/*.tooltip:hover .tooltiptext {
    visibility: visible;
}*/

.superToolTip {
    position: absolute;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

.Favo {
    vertical-align: middle;
    background-color: transparent;
    align-self: stretch;
    display: flex;
    align-items: center;
}
.miniDeletedDateLabel {
    position: absolute;
    right: 0;
    top: 0;
    font-family: Arial;
    font-size: 8px;
}

.newUpdatedIndicator {
/*    position: absolute;*/
    height: 8px;
    width:8px;
    flex-shrink: 0;
    display:block;
    background-color: unset;
    border-radius: 50%;
    /*margin-left:-10px;*/
    /*visibility:inherit;*/ 
    margin-right: 5px;
}

.newUpdatedIndicatorMobile {
    /*position: absolute;*/
    height: 8px;
    width: 8px;
    flex-shrink: 0;
    background-color: unset;
    border-radius: 50%;
    /*margin-left: -10px;*/
    visibility:inherit;
}

.newUpdatedIndicatorOn {
    background-color: olivedrab !important;
}

.deletedBranchIndicatorOn {
    background-color: red !important;
}


.plus {
    width: 100%;
    background-color: transparent;
    display: flex;
    flex-direction: row;
    align-items: center;
    word-wrap: break-word;
    z-index: 999;
}

.fade-in {
/*    animation: fadeIn 2s;*/
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}

.divHighlighted {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: red !important;
    box-sizing: border-box;
}


/* width */
/*::-webkit-scrollbar {
    width: 20px;
}*/
/* button */
/*::-webkit-scrollbar-button {
    background: #222;
}*/
/* Handle */
/*::-webkit-scrollbar-thumb {
    background: #333;
}*/
    /* Handle on hover */
    /*::-webkit-scrollbar-thumb:hover {
        background: #666;
    }*/
/* Track */
/*::-webkit-scrollbar-track {
    background: #000;
}*/
/* The track NOT covered by the handle.
::-webkit-scrollbar-track-piece {
    background: #000; 
}
/* Corner */
/*::-webkit-scrollbar-corner {
    background: #999;
}*/
/* Resizer */
/*::-webkit-resizer {
    background: #111;
}*/

/* scrollbar customization for Chrome, Edge */
*::-webkit-scrollbar {
    width: 12px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: lightgrey;
    border-radius: 20px;
    /*border: 3px solid;*/
}

.HideScrollBar::-webkit-scrollbar {
    display: none;
}

.HideScrollBar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.slideContainer {
    background-color: green;

}


.slideOver {
    left: 20px !important;
    /*left: 40px !important;*/
}
.slider {
    -webkit-transition: background-color 500ms linear;
    -ms-transition: background-color 500ms linear;
    transition: background-color 500ms linear;
}

.slideOptionSelected {
    font-size: 22px;
    color: black !important;
    -webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

.slideOptionNotSelected {
    font-size: 22px;
    -webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}