/* Color Theme Swatches in RGBA
.ocean-tide-market-1-rgba { color: rgba(253, 77, 0, 1); }
.ocean-tide-market-2-rgba { color: rgba(232, 28, 8, 1); }
.ocean-tide-market-3-rgba { color: rgba(244, 182, 0, 1); }
.ocean-tide-market-4-rgba { color: rgba(68, 200, 216, 1); }
.ocean-tide-market-5-rgba { color: rgba(7, 47, 86, 1); }
*/

/*general*/
    
    body {
        margin: 0;
    }
    
    * {
        box-sizing: border-box;
        font-family: 'Varela Round', sans-serif;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    }
    
    p, span {
        font-size: 18px;
    }
    
    input {
        width: 80px;
        text-align: center;
        background-color: rgba(0,0,0,0);
        //padding-left: 5px;
        box-shadow: 0 0;
        direction: ltr;
        border: 1px solid rgba(244, 182, 0, 1);
        border-radius: 40px;
        font-size: 14px;
        padding: 3px 0;
    }
    
    ::-webkit-scrollbar { 
        display: none; 
    }

/*ad*/

    #footer-ad{
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 11;
    }

/*header*/

    .header {
        position: fixed;
        z-index: 10;
        top: 0;
        width: 100%;
        height: 6vh;
        min-height: 55px;
        background-color: rgb(32,56,100);
        display: flex;
        align-items: center;
        overflow: visible;
        justify-content: space-around;
        box-shadow: 0 1px 2px;
    }
    
    #select {
        flex: 8;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .options {
        border: 3px solid rgb(32,56,100);
        border-radius: 15px;
        width: 30px;
        height: 30px;
        color: white;
        flex: 1;
        text-align: center;
        margin: 0 20px;
    }
    
    .placeholder {
        width: 100%;
        height: 6vh;
        min-height: 55px;
        z-index: 9;
    }

    .knesset {
        background-color: rgba(0,0,0,0);
        border: 1px solid rgb(191,191,191);
        border-radius: 12px;
        text-align: center;
        color: white;        
        padding: 9px;
        padding-left: 25px;
        font-size: 18px;        
        background-color: rgb(32,56,100);
        cursor: pointer;
    }
    
    .knesset:hover {
        background-color: rgb(143,170,220);
    }
    
    .knesset select {
        color: black;        
    }
    
    select::-ms-expand {display: none;}
    select{
        -webkit-appearance: none;
        appearance: none;
    }
    
    .header .arrow {
        color: white;
        transform: translate(-134px, 0);
    }
    
/*content*/
    
    .container {
        z-index: 1;
        margin-top: 10px;
        margin-right: 5%;
        margin-left: 5%;
        direction: rtl;
    }
    
    .lim input {
        text-align: left;
        padding-left: 8px;
    }
    
    .window {
        width: 100%;
        max-height: 250px;
        border: 1px solid rgb(191,191,191);
        border-radius: 20px;
        margin: 20px 0;
        overflow: auto;
        transition: max-height 1s ease;
    }
    
    .list {
        margin: 5px 18px;
        border-collapse: collapse;
    }
    
    .list td, .list th {
        border-bottom: 1px solid rgb(191,191,191);    
    }
    
    .list .line {
        width: 5px;
        height: 26px;
        background-color: rgb(32,56,100);
        border-radius: 5px;
        margin-left: 10px;
    }
    
    .list .name {
        font-size: 24px;
    }
    
    .list input {
        margin: 0 8px;
    }
    
    .list .mandat, .list .gap {
        font-size: 24px;
        text-align: center;
        font-weight: bold;
    }
    
    .list .gap {
        padding-right: 10px;
    }
    
    .list tr:hover {
        background-color: rgba(191,191,191,0.3);
    
    }
    
    .agreements .plus {
        font-size: 24px;
        text-align: center;
        font-weight: bold;
        padding: 0 8px 0 10px;
    }
    
    .odafim-selection {
        padding: 0 6px;
        font-size: 16px;
        width: 120px;
        border: 1px solid rgba(244, 182, 0, 1);
        border-radius: 40px;
        background-color: white;
    }
    
    .agreements .name {
        width: 110px;
        position: relative;
    }
    
    .agreements .arrow {
        position: absolute;
        top: 6px;
        left: 4px;
    }
 
    .agreements .delete {
        padding-right: 4px;
        cursor: pointer;
    }
    
    .agreements .delete:hover {
        color: grey;
    }
    
    #add-agr {
        margin-right: 20px;
        border: 1px solid rgb(191,191,191);
        border-radius: 12px;
        padding: 10px;
        width: 150px;
        cursor: pointer;
    }
    
    #add-agr:hover {
        color: white;
        background-color: rgb(191,191,191);
    }
    
    .show-more {
        color: blue;
        font-size: 14px;
        cursor: pointer;
        text-decoration: underline;
        text-decoration-style: dashed;
    }
    
    .show-more:hover {
        text-decoration: underline;
        text-decoration-style: solid;
    }
    
    .number {
        color: blue;
    }
    
    #odafim-div .name {
        text-align: right;
        white-space: nowrap;
        font-size: 24px;
        //width: auto;
    }
    
    td:first-child, th:first-child {
        position:sticky;
    }
    
    #odafim-div th {
        font-weight: bold;
    }
    
    #odafim-div td {
        padding: 0 7px;
    }
    
    .max {
        background-color: #B9D948;
    }
    
    #second-odafim-div .window {
        max-height: none;
    }
    
    .green {
        color: green;
    }
    
    .red {
        color: red;
    }
    
    #blocks {
        border-radius: 10px 10px 0 0;    
        width: 100%;
    }
    
    .blocks {
        border: 1px solid rgb(191,191,191);
        display: flex;
        justify-content: space-around;
        flex-direction: row; /*column*/
        flex-wrap: wrap;
        padding: 10px;
        min-height: 100px;
    }
    
    .block {
        color: white;
        background-color: rgb(51,63,80);
        border-radius: 6px;
        margin: 5px;
        padding: 10px;
        display: flex;
        align-items: center;
        cursor: pointer;
        z-index: 1;
        height: 44px;
    }
    
    #right {
        float: right;
        width: 50%;
        min-height: 100px;
        border: 1px solid rgb(191,191,191);
        position: relative;
    }
    
    #left {
        float: right;
        width: 50%;
        min-height: 100px;
        border: 1px solid rgb(191,191,191);
        position: relative;
    }
    
    .label {
        font-weight: bold;
        color: rgb(191,191,191);
        font-size: 30px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        z-index: 0;
    }
    
    #chart-cont {
        display: flex;
        width: 100%;
        align-items: center;
        flex-direction: column;
    }
    
    canvas {
        width:300px !important;
        height:300px !important;
    }
    
/*Spinner*/    
    .spinner:after {
        content: "";
        box-sizing: border-box;
        position: absolute;
        top: 50%;
        left: 50%;
        height: 60px;
        width: 60px;
        margin-top: -30px;
        margin-left: -30px;
        border-radius: 50%;
        border-top: 2px solid coral;
        border-right: 2px solid transparent;
        animation: spinner 0.7s linear infinite;
        z-index: 12;
    }
    
    .spinner:before {
        content: "";
        box-sizing: border-box;
        position: fixed;
        top: 0%;
        left: 0%;
        height: 100vh;
        width: 100vw;
        background-color: rgba(255,255,255,0.3); /*rgba(255,250,240,0.3);*/
        z-index: 11;
    }
    
    @keyframes spinner {
        to {
            transform: rotate(360deg);
        }
    }
    
/*Tooltip*/
    .tooltip {
        position: relative;
        /*display: inline-block;*/
        /*border-bottom: 1px dotted black;*/
    }
    
    .tooltip .tooltiptext {
        visibility: hidden;
        /*width: 120px;*/
        width: 200px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 150%;
        left: 20%;
        margin-left: -60px;
    }
    
    .tooltip .tooltiptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: black transparent transparent transparent;
    }
    
    .tooltip:hover .tooltiptext {
        visibility: visible;
    }