@import "calendar.css";
@import 'review.css';
@import "timeline.css";
@import "timeline-review.css";
@import "todo.css";
@import "actiontext.css";
@import "todo-modal.css";
@import "default_items.css";
@import "emojionearea.min";
@import "user_profile.css";
@import "voice_typing.css";
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 /**= custom_devise_styles*/
 *= require_self
 */

body {
    width: 100%;
    height: 100%;

}
input[type="submit"]  {
    background-color: #3b723f;
    color: white;
    padding: 3px 10px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
}

.default-button {
    padding: 3px 10px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
    font-family: sans-serif;
}
 .delete {
    background-color: red !important;
     color: white;
}




.dark {
    color: white;
    background: #1f1a1a ;
}


.light {
    color: black;
    background: whitesmoke ;
}



/*@font-face {*/
/*    font-family: 'phesis';*/
/*    src: url(/app/assets/fonts/Ephesis-Regular.ttf) format('truetype');*/
/*    font-weight: normal;*/
/*    font-style: normal;*/
/*}*/

.toolbar-items{
    position: fixed;
    top: 32px;
    z-index: 11;
}

.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #333; /* Set your desired background color */
    color: #fff; /* Set your desired text color */
    padding: 10px; /* Adjust padding as needed */
    box-sizing: border-box;
    z-index: 10;

}

.disabled {
    pointer-events: none;
    opacity: 0.6;
}

.button-link {
    color: white;
    text-decoration: none;
    display: inline-block;
    padding: 2px 10px;
    background-color: #262b2d; /* Button background color */
    /*color: #fff; !* Text color *!*/
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Hover effect */
.button-link:hover {
    background-color: #2980b9; /* Change the background color on hover */
}

.banner {
    font-size: 50px;
    width: 100%;
    text-align: center;
    font-family: phesis;
    position: absolute;
    top: 20px;
}
.rounded-button, input[type="submit"].rounded-button {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    /*margin-top: 10px; !* Optional: Add spacing between the input and button *!*/
    padding: 10px;
    border: none;
    border-radius: 10px; /* Match the border-radius of the input */
    background-color: #3498db; /* Set the background color for the button */
    color: #ffffff; /* Set the text color for the button */
    cursor: pointer;
    width: 260px;
    margin: 10px;
    box-sizing: border-box;
    font-family: sans-serif;

}

.rounded-input {
    width: 250px; /* Set the width of the input */
    padding: 10px;
    border: none;
    border-radius: 10px; /* Adjust the border-radius for rounded corners */
    /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); !* Optional: Add a subtle box shadow *!*/

    box-shadow: inset -10px -10px 15px rgba(255, 255, 255, 0.5), inset 10px 10px 15px rgba(70, 70, 70, 0.12);
    background-color: #ffffff; /* Set the background color to white */
    outline: none; /* Remove the default input focus outline */
    margin: 5px;

}
.container {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* This ensures the grid is centered vertically on the page */
}
.password-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: auto;
    width: 700px;
    height: 50%;

    border-radius: 10px;
}
a {
    color: white;
}

h1 {
    /*color: white;*/
}

div {
    /*color: white;*/
}

input, textarea {
    background-color: #346c6c;
}



.link-toolbar {
    margin: 5px;
    background: darkslategrey;
    padding: 2px;
    position: fixed;
    top: 25px;
    left: 0px;
    right: 0px;
    height: 22px;

}

.link-toolbar  a {
    text-decoration: none;
    display: inline-block;
    padding: 2px 10px;
    background-color: #262b2d; /* Button background color */
    color: #fff; /* Text color */
    border: none;
    border-radius: 5px;
    cursor: pointer;

}
.quote-title{
    margin-top: -5px;
    margin-left: 20px;
    position: fixed;
}

.quote-of-day {
    padding-top: 3px;
    font-size: 15px;
    display: inline;
    font-style: italic;
}
.sign-out-button{
    position: fixed; right: 10px; top: 5px
}

@media (max-width: 1000px) {
    .quote-title{
        width: 0px;
        display: none;
    }
    .hide-mobile{
        width: 0px;
        display: none;
    }
    .button-link{
      font-size:   15px;
    }

    /*.toolbar-items{*/
    /*    top: 32px;*/
    /*}*/
    .sign-out-button{
        font-size: 2vw;
    }
}


/*.quote-of-day a {*/

/*    display: none;*/
/*    height: 0px;*/

/*}*/

/*.quote-of-day b {*/

/*    display: none;*/
/*    height: 0px;*/

/*}*/


/*//box-sizing: border-box;*/
/*    max-width: 100%;*/
/*    width: 100%;*/
/*}*/


/*label {*/
/*    display: inline-block;*/
/*    cursor: pointer;*/
/*    position: relative;*/
/*    padding-left: 25px;*/
/*    margin-right: 15px;*/
/*    font-size: 11px;*/
/*}*/

/*label:before {*/
/*    content: "";*/
/*    display: inline-block;*/

/*    width: 16px;*/
/*    height: 16px;*/

/*    margin-right: 10px;*/
/*    position: absolute;*/
/*    left: 0;*/
/*    bottom: 1px;*/
/*    background-color: pink;*/
/*    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);*/
/*}*/

/*input[type=checkbox] {*/
/*    display: none;*/
/*}*/
/*.checkbox label:before {*/
/*    border-radius: 3px;*/
/*}*/

/*input[type=checkbox]:checked + label:before {*/
/*    content: "\2713";*/
/*    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);*/
/*    font-size: 12px;*/
/*    color: #fff;*/
/*    text-align: center;*/
/*    line-height: 12px;*/
/*}*/