:root {
            --theme: rgb(128, 204, 255);
        }

        body {
            text-align: center;
            color: black;
            font-family: sans-serif;
            background-image: url(gradientnew.png);
            height: fit-content;
            background-attachment: fixed;
            cursor: url(cursor.png), auto;
            margin: 0;
            background-repeat: no-repeat;
            background-size: 100vw 100vh;
        }

        a {
            cursor: default;
        }

        fieldset {
            color: black;
            border: 3px solid black;
        }

        fieldset legend {
            font-size: 2rem;
        }

        ::-moz-selection {
            color: powderblue;
            background: blue;
        }

        ::selection {
            color: powderblue;
            background-color: blue;
        }

        .navbar {
            display: none;
        }

        .open {
            display: block;
        }


        ol li {
            text-align: left;
        }

        button {
            cursor: default;
        }

        .appBar {
            width: 100%;
            height: 150px;
            position: relative;
            display: flex;
            justify-content: center;
            text-align: center;
            float: center;
        }

        .appBar figure {
            margin: 7px;
            transition: 0.5s;
        }


        .appBar figure img {
            background-color: rgba(255, 255, 255, 0.733);
            width: fit-content;
            padding: 18px;
            border-radius: 15px;
        }

        .appBar figure figcaption {
            background-color: rgba(255, 255, 255, 0.596);
            width: fit-content;
            padding: 10px;
            text-align: center;
            width: 80%;
            border: 3px solid rgba(255, 255, 255, 0.678);
            height: 20px;
            transition: 0.5s;
            font-size: 0.9rem;
            border-radius: 15px;
        }

        #searchBar:focus {
            outline: none;
            border: none;
        }

        #webBar {
                display: block;
                width: 90%;
                background-color: #ededed;
                border: none;
                font-weight: bold;
                height: 15px;
                color: black;
                padding: 5px;
                border-radius: 15px;
        }

        #webBar:hover {
            background-image: none;
        }

        #webBarButton {
            display: block;
            width: 90%;
            background-image: linear-gradient(50deg, #F5F5F5, white);
            border-radius: 5px;
            border: 3px solid black;
            padding: 3px;
            display: inline;
            width: 10%;
            margin-left: 3px;
            font-weight: bold;
        }

        #webBarButton:hover {
            background-color: rgb(238, 238, 238);
            background-image: none;
        }

        #searchButton {
            background-color: #bbffdf80;
            padding: 4px;
            font-size: 2rem;
            margin: -4px;
            transition: 1s;
            border-radius: 25px;
            color: black;
            background-size: 100% 100%;
            width: 6%;
            border: none;
            margin-left: 68%;
            position: absolute;
        }

        #searchbarContainer {
            display: inline-flex;
            text-align: center;
            align-items: center;
            justify-content: space-between;
            width: 75%;
            margin: auto;
            background-image: url(searchBarBackground.jpg);
            border-radius: 25px;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
            background-attachment: fixed;
            border: none;
            height: 66px;
            transition: 0.5s;
        }

        #searchbarContainer:hover {
            padding: 5px;
            border-radius: 15px;
        }

        #settingsPopup {
            margin-top: 5%;
            height: 80%;
            width: 90%;
            background-color: gold;
            margin-left: 5%;
            position: fixed;
            z-index: 5;
            display: none;
            border-radius: 15px;
            overflow: auto;
        }

        #settingsPopup button,
        #settingsPopup a {
            background-image: linear-gradient(90deg, #5fa0fa, #82b6ff, rgb(159, 118, 255));
            color: white;
            padding: 10px;
            font-size: larger;
            border: none;
            border-radius: 5px;
            cursor: url(cursor.png), auto;
            text-decoration: none;
            transition: 0.1s;
        }

        #settingsPopup button:hover,
        #settingsPopup a:hover {
            font-size: 3rem;
        }

        #settingsPopup textarea{
            cursor: url(text.png), auto;
        }

        #mainContent {
            transition: 0.3s;
        }

        .news {
            border: 3px solid black;
            background-image: url(aboutPageBackground.png);
            width: 85%;
            margin: 3px;
            border-radius: 20px;
            margin: auto;
            margin-bottom: 5px;
            background-size: 100% 100%;
            transition: 0.5s;
        }

        .news:hover {
            color: blue;
            background-image: linear-gradient(rgba(167, 252, 255, 0.973), rgba(113, 250, 255, 0.973));
            font-size: 1.2rem;
            padding: 5px;
        }

        .news img {
            border-radius: 5px;
        }

        .newsText {
            border: 3px solid black;
            margin: 3px;
            border-radius: 15px;
            background-image: linear-gradient(45deg, rgba(85, 179, 255, 0.7), rgba(157, 240, 255, 0.7));
            background-size: 100% 100%;
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
        }

        #bottombar {
            overflow: auto;
            background-color: rgb(255, 255, 255);
            position: fixed;
            bottom: 0;
            width: 35px;
            z-index: 5;
            height: 100%;
            flex-direction: column;
        }
        
        .flex{
        display:flex;
        }

        #bottombar a {
            display: block;
            text-align: center;
            padding: 2px 2px;
            text-decoration: none;
            font-size: 17px;
            margin-left: 1px;
            margin-top: 1px;
            cursor: url(pointer.png), auto;
        }


        #bottombar a:active {
            border-radius: 5px;
            background-color: lightgrey;
        }


        #divTabBarIdAndWebBarId {
            position: fixed;
            width: 100%;
            z-index: 5;
        }

        #suggested {
            background-color: rgb(233, 233, 233);
            width: 80%;
            margin: auto;
            display: none;
            border-radius: 15px;
            margin-top: 5px;
            box-shadow: 4px 5px;
            transition: 0.5s;
        }

        #suggested:hover {
            box-shadow: 8px 5px;
        }

        #suggestedHeading {
            border:3px solid lightgray;
            border-radius:15px;
        }

        .suggestedSingleRows {
        background-color:lightgray;
        padding:5px;
            border-radius: 5px;
            margin:5px;
        }

        .suggestedSingleRows:active {
            background-color: #6ca2ee;
        }

        .suggestedSingleRows h3 a {
            color: blue;
            text-decoration: underline 3px;
            cursor: url("pointer.png"), auto;
        }

        #profilePopup {
            margin-top: 5%;
            height: 80%;
            width: 90%;
            background-color: gold;
            margin-left: 5%;
            position: fixed;
            z-index: 5;
            display: none;
            border-radius: 15px;
            overflow: auto;
        }

        #profilePopup button {
            background-image: linear-gradient(90deg, #5fa0fa, #5990df, blue);
            color: white;
            padding: 10px;
            font-size: larger;
            border: none;
            border-radius: 5px;
            cursor: default;
            text-decoration: none;
            transition: 0.1s;
        }

        #profilePopup button:hover {
            font-size: 3rem;
        }

        .download {
            transition: 0.5s;
            background-color: rgba(255, 255, 255, 0.5);
            color: Blue;
            border: 5px solid blue;
            border-radius: 5px;
            text-decoration: none;
            padding: 10px;
            cursor: default;
        }

        .download:hover {
            background-color: darkblue;
        }


        #pickSearchEngine {
            display: inline;
            border: 3px solid rgb(150, 211, 236);
            background-image: linear-gradient(45deg, rgba(99, 99, 252, 0.5), rgba(98, 171, 240, 0.5), rgba(128, 128, 255, .5));
            height: 50px;
            font-weight: bolder;
            border-radius: 15px;
            color: #222222;
            padding: 10px;
        }




        #quickNotePopup {
            height: 80%;
            width: 90%;
            background-color: var(--theme);
            margin-left: 5%;
            position: fixed;
            z-index: 5;
            display: none;
            overflow: auto;
            display: none;
            border-radius: 15px;
        }


        #quickNotePopup button {
            background-color: white;
            padding: 10px;
            color: black;
            border: 5px solid black;
            font-size: larger;
        }

        #quickNotePopup button:hover {
            background-color: black;
            padding: 10px;
            color: white;
            border: 5px solid white;
            outline: 5px solid black;
        }

        #newsOnePopup {
            height: 80%;
            width: 90%;
            background-color: white;
            margin-left: 5%;
            position: fixed;
            z-index: 5;
            display: none;
            overflow: auto;
            display: none;
        }

        #newsTwoPopup {
            height: 80%;
            width: 90%;
            background-color: white;
            margin-left: 5%;
            position: fixed;
            z-index: 5;
            display: none;
            overflow: auto;
            display: none;
        }

        #searchBar::placeholder {
            color: #d1d1d1;
        }

        #webBar::placeholder {
            color: #d1d1d1;
        }

        .hidden {
            display: none;
        }

        #clockWindow {
            background-color: white;
            border-radius: 5px;
            width: 50%;
            height: 100vh;
            position: absolute;
            z-index: 50;
            margin-left: 50px;
        }

        .timer {
            background-color: lightgray;
            display: inline-block;
            text-align: center;
            padding: 5px;
            width: 100px;
            margin-top: 5px;
        }

        #clockWindow button {
            border: 2px solid blue;
            border-radius: 50px;
            cursor:url(pointer.png), auto;
        }

        .btnnew {
            border: 2px solid blue;
            border-radius: 50px;
            cursor: url(pointer.png), auto;
        }

        .newsContainer {
            width: 100%;
            display: grid;
            grid-template-columns: auto auto;
        }

        #newFavoritePrompt {
            width: 50%;
            height: 75vh;
            position: fixed;
            margin-top: 100px;
            margin-left: 25%;
            z-index: 99999;
            border-radius: 10px;
            background-color: rgba(240, 240, 255, .9);
            display: none;
            transition: 0.5s;
            opacity: 0%;
        }

        .coolInput {
            width: 75%;
            background-color: white;
            border-radius: 25px;
            border: 1px solid grey;
            padding: 10px;
        }

        .coolBtn {
            padding: 7px 20px;
            margin: 10px;
            border-radius: 25px;
            background-color: transparent;
            border: 1px solid grey;
            transition: 0.1s;
            cursor: url(pointer.png), auto;
        }

        .coolBtn:hover {
            background-color: rgba(250, 250, 255, .5);
            color: blue;
        }

        .favorite {
            width: 250px;
            height: 200px;
            background-color: rgba(255, 255, 255, .9);
            margin: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: url(pointer.png), auto;
            flex-direction: column;
            border-radius: 10px;
        }

        #favorites {
            display: flex;
            align-items: center;
            justify-content: space-evenly;
        }

        .favorite img {
            width: 50%;
        }

        .favorite h1 {
            margin: 5px;
            padding: 0;
        }

        select,
        select:focus,
        option,
        option:focus,
        #searchButton,
        .appBar figcaption,
        .appBar figure,
        .appBar {
            cursor: url(cursor.png), auto;
        }

        input {
            cursor: url(text.png), auto;
        }

        #addOnsPopup {
            height: 80%;
            width: 90%;
            background-color: var(--theme);
            margin-left: 5%;
            position: fixed;
            z-index: 5;
            display: none;
            overflow: auto;
            display: none;
            overflow: auto;
            border-radius: 15px;
        }

        .addonlist {
            border-radius: 5px;
            background-color: #5990df;
            color: white;
            border-radius: 15px;
            margin: auto;
            box-shadow: 5px 5px 5px black;
        }

        .addonlist:hover{
            box-shadow: 10px 10px 5px black;
        }

        #bottombar {
            overflow: auto;
        }

        .window {
            width: 50vw;
            height: 50vh;
            margin-left: 25vw;
            margin-top: 25vh;
            box-shadow: 5px 5px 10px rgba(0, 0, 0, .5);
            overflow: auto;
            resize: both;
            position: absolute;
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 99999;
            transition: 0.1s;
        }

        .windowBar {
            width: 50px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            background-color: lightgrey;
        }

        .windowIcon {
            width: calc(100% - 5px);
            margin: 2.5px;
        }

        .draggableArea {
            width: 100%;
            height: calc(100% - 150px);
        }

        .windowActionButtons {
            width: 100%;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        .windowActionButtons button {
            width: 100%;
            height: 50px;
            margin: 0;
            padding: 0;
            border: none;
            outline: none;
            color: white;
            transition: 0.1s;
            cursor: url("pointer.png"), auto;
            font-size: 2rem;
        }

        .windowActionButtons button:hover {
            color: black;
        }

        .maximizeButton {
            background-color: orange;
        }

        .closeButton {
            background-color: red;
        }

        .maximizeButton:hover {
            background-color: coral;
        }

        .closeButton:hover {
            background-color: pink;
        }

        .windowContent {
            width: calc(100% - 50px);
            height: 100%;
            background-color: white;
        }

        #fileManager {
            margin-top: 5%;
            height: 80%;
            width: 90%;
            background-color: var(--theme);
            margin-left: 5%;
            position: fixed;
            z-index: 5;
            border-radius: 15px;
            overflow: auto;
            border-radius: 15px;
        }

        .file {
            border-radius: 5px;
            background-color: #5990df;
            color: white;
            border-radius: 15px;
            margin: auto;
            box-shadow: 5px 5px 5px black;
            margin-top: 15px;
        }

        .file:hover{
            box-shadow: 10px 10px 5px black;
        }
		
		        #newNotePrompt {
            width: 50%;
            height: 75vh;
            position: fixed;
            margin-top: 100px;
            margin-left: 25%;
            z-index: 99999;
            border-radius: 10px;
            background-color: rgba(240, 240, 255, .9);
			display:none;
            transition: 0.5s;
            opacity: 100%;
        }

        #newTimerPrompt{
            width: 50%;
            height: 75vh;
            position: fixed;
            margin-top: 100px;
            margin-left: 25%;
            z-index: 99999;
            border-radius: 10px;
            background-color: rgba(240, 240, 255, .9);
			display:none;
            transition: 0.5s;
            opacity: 100%;
        }

        #newAlarmPrompt{
            width: 50%;
            height: 75vh;
            position: fixed;
            margin-top: 100px;
            margin-left: 25%;
            z-index: 99999;
            border-radius: 10px;
            background-color: rgba(240, 240, 255, .9);
			display:none;
            transition: 0.5s;
            opacity: 100%;
        }

                #askWindow {
            background-image: linear-gradient(45deg, white, white, rgb(215, 239, 255), rgb(172, 222, 255));
            border-radius: 5px;
            width: 50%;
            height: 100vh;
            position: absolute;
            z-index: 50;
            margin-left: 50px;
            overflow: auto;
            border-radius: 15px;
        }

        #askInput{
            border-radius: 15px;
            padding: 5px;
            border: 2px solid gray;
            box-shadow: 5px 5px 5px gray;
            font-size: 1rem;
            width: 250px;
        }

        #askButton{
            border-radius: 15px;
            padding: 5px;
            border: 2px solid gray;
            box-shadow: 5px 5px 5px gray;
            font-size: 1rem; 
            cursor: url("pointer.png"), auto;
        }

        #paintWindow{
            height: 80%;
            width: 90%;
            background-color: lightblue;
            margin-left: 5%;
            position: fixed;
            z-index: 5;
        }

        #settingsSidebar{
            width: 20%;
            height: 80%;
            background-color: #5990df;
            color: white;
            position: fixed;
            border-radius: 15px;
        }

        #settingsSidebar a{
            color: white;
            background-color: transparent;
            background-image: none;
        }

        #settingsSidebar a:hover {
            color: blue;
            font-size: large;
        }

                .context-menu {
  position: absolute;
  text-align: center;
  background-color: rgb(219, 250, 255);
  min-width: 150px;
  border-radius: 15px;
  z-index: 1000;
}
.context-menu ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.context-menu ul li {
  padding: 7px;
  border-radius: 15px;
}
.context-menu ul li:hover {
  background-color: rgb(206, 236, 255);
}  

        
.prismdocswindow{
    overflow:hidden;
}

#sidebarBtn{
border-radius:2px;
cursor:url(pointer.png), auto;
}

#sidebarBtn:hover{
background-color:lightgray;
border-radius:5px;
}
 
 .askingPopup{
             width: 50%;
            height: 75vh;
            position: fixed;
            margin-top: 100px;
            margin-left: 25%;
            z-index: 99999;
            border-radius: 10px;
            background-color: rgba(240, 240, 255, .9);
            transition: 0.5s;
            opacity: 100%;
 }
 
        .noteStylePopup{
            height: 80%;
            width: 90%;
            background-color: var(--theme);
            margin-left: 5%;
            position: fixed;
            z-index: 5;
            overflow: auto;
            margin-top: 20px;
            border-radius: 25px;
        }

#previewImagePopup{
    z-index:15;
}

#urlOp{
    padding: 5px;
    border:none;
    background-color: rgb(224, 224, 224);
    border-radius: 15px;
    margin-right: 3px;
    margin-left: 3px;
}

.toolList{
    margin: 15px;
    background-color:#00a2ff;
    border-radius: 25px;
    transition: 0.5s;
    color: white;
    padding: 5px;
}


.toolList:hover{
    background-color: #0066ff;
}

#webBarContainer{
    background-image: linear-gradient(45deg, rgb(75, 209, 253), rgb(106, 194, 223));
}

.selector{
    border: 2px solid black;
    background-color: white;
}

.selector img{
    height: 150px;
    border: 2px solid red;
}

.selector img:hover {
    border: 3px solid red;
}

.bold_body{
    font-weight: bold;
}

.widget{
    background-color: rgb(105, 200, 255);
    text-align: center;
    margin: 15px;
    height:200px;
    width: 25%;
    border-radius: 5px;
    margin-left: calc(50vw - 12.5%);
    overflow: auto;
}

.closePopup{
    background-color: #aae0ff;
    margin: 15px;
    border-radius: 25px;
}