[ Avaa Bypassed ]

:root {
  /*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
  /* 
    Created on : 05.01.2018, 17:26:23
    Author     : saeed
*/

  /*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
  /* 
    Created on : 05.01.2018, 17:26:23
    Author     : saeed
*/

  --textColor: #585858;
  --barBtnColor: #ffffff;
  --pColor: #585858;

  //-------- content background color ---------//
  --ionContentColor: #fcfcfc;
  /*--ionContentColor : #fcfcfc !important;*/

  --itemColor: black;
  --ionItemBgColor: rgba(210, 212, 212, 0.858824);
  --profileItemBgColor: transparent;

  --itemFreeBgColor: rgba(255, 255, 255, 1);

  --avatarBgColor: #d1dde3;
  --itemInnerColor: #585858;

  //-------- header text color ----------//
  --toolbarTitleColor: white; //#767777
  --headerBgColor: #1aa8d5;
  --headerBgColor: #0277bd; // material
  --headerBgColor: #6967f1; // material
  --toolbarBgColor: #1aa8d5;
  --toolbarBgColor: #6967f1;
  --toolbarBgColor: linear-gradient(to left, #6967f1 0%, #21b3f9 150%);
  --scrollContentBgColor: linear-gradient(197deg, #6967f1 0%, #21b3f9, #ffffff 100%);
  --scrollContentBgColor: linear-gradient(197deg, #6967f1 0%, #abe2ffd1, #ffffff 100%);
  --scrollContentBgColor: linear-gradient(197deg, #6967f1 0%, #abe2ff 41%, #ffffff 96%);

  // --scroll-content-bg-color: linear-gradient(197deg, #6967f1 0%, #abe2ff 41%, #ffffff 96%);
  --scroll-content-bg-color: linear-gradient(210deg, #9d9bf8 0%, #5ff0f9 100%);
  /*--toolbarBgColor : #0277bd; //  material*/
  --navarBtnColor: white;

  --iconStarColor: yellow;

  --ionLabelColor: white;

  // ------ message --------- //
  --messageBgColor: #33c7f5;
  --messageBgColor: #b2ff59; // material
  --messageBgColor: #bcffed; // material
  --messageBgColor: rgba(0, 11, 160, 0.18823529411764706); // material
  --messageBgColor: rgb(130, 138, 251); // material
  /*--messageReceivedBgColor : #bfcfd4;*/
  --messageHeaderTextColor: black;
  --messageReceivedBgColor: transparent;
  --inputBorderColor: yellowgreen;

  --inputBgColor: #d1dde3;

  --btnBorderColor: #ffc6c6;
  /*--btnBgColor : #2d5a8c;*/
  --btnBgColor: #8dbac8;
  --btnBgColor: #3974b2;
  --inputBorderColor: #00b7ff;

  // ----- menu ---------------
  --menuItemColor: #6bb5e4;
  --menuItemColor: transparent; //material

  //-------action sheet--------//
  --actionSheetTitleColor: #585858;
  --actionSheetBgColor: #cee2f8;
  --actionSheetBgColor: transparent;
  --actionSheetBtnColor: #6b8a9c;

  //------add friend dialog-----//
  /*--addFriendDialogBgColor : #4776aa;*/
  --addFriendDialogBgColor: #1aa8d5;
  --addFriendDialogBgColor: #fffafa;
  --addFriendDialogInputBgColor: #d1dde3;
  --addFriendDialogInputColor: #00b7ff;

  //-----foooter-----//
  /*--footerBgColor : #98daef;*/
  --footerBgColor: #e3f7f7;
  --footerBgColor: #63a4ff; // material color
  --footerBgColor: #84c9fb; // material color
  --footerBgColor: #ffffff; // material color
  --footerBgColor: #f5f5f5; // material color
  --footerBgColor: #fafeff; // material color
  --footerBgColor: #ffffff; // material color
  /*--iconColor : #767777;*/
  /*--iconColor : rgba(43, 222, 215, 0.6705882352941176);*/
  /*--iconColor : rgb(72, 138, 255);*/
  /*--iconColor : #9dbffb;;*/
  --iconColor: #7ebad2;
  --iconColor: #0078ff; //material
  --iconColor: #727475; //material
  --h1Color: white;
  --h1Color: #05111f;
  --footerTextColor: #7ebad2;
  --footerTextColor: #0078ff; // material
  --footerTextColor: #727475; // material

  --footerSelectedTextColor: #05111f; // material

  // fabButton
  --fabIconColor: #585858;
  /*--fabBtnBgColor : transparent;*/
  --fabBtnBgColor: #1aa8d5;
  --fabBtnBgColor: #3974b2;

  //------send tools-----//
  --sendToolsBtnBorderColor: white;
  /*--sendToolsBgColor : #1aa8d5;*/
  --sendToolsFabBtnBgColor: transparent;
  --sendToolsBgColor: transparent;
  /*--sendToolsBtnColor :  rgba(102, 102, 102, 1);*/
  --sendToolsBtnColor: #0292ab;

  .light-theme {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    .toolbar-title,
    body {
      /*transition: all 1.1s ease;*/
      color: var(--textColor);
    }
    .bar-button-default {
      color: var(--barBtnColor);
    }
    ion-content {
      .item {
        background: var(--menuItemColor);
        --ion-background-color: var(--menuItemColor);
      }
    }

    ion-content {
      /*transition: all 1.1s ease;*/
      --ion-background-color: linear-gradient(to bottom, #3572b1 0%, #ffffff 100%);
      --ion-background-color: var(--scrollContentBgColor);
      --ion-background-color: var(--scroll-content-bg-color);
      .scroll-content {
        /*background: url(../../assets/img/bg.jpg);*/
        // background: url(./../assets/img/bg.jpg);
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0281d1+0,80ede5+100 */
        background: #0281d1; /* Old browsers */
        /*background: -moz-linear-gradient(top, #0281d1 0%, #80ede5 100%);  FF3.6-15 */
        /*background: -webkit-linear-gradient(top, #0281d1 0%,#80ede5 100%);  Chrome10-25,Safari5.1-6 */
        // background: linear-gradient(to bottom, #0281d1 0%,#80ede5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        // background: linear-gradient(to bottom, #3572b1 0%, #c7ffef 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        // background: linear-gradient(to bottom, #3572b1 0%, #ffffff 100%);
        // --ion-background-color: linear-gradient(to bottom, #3572b1 0%, #ffffff 100%);
        // --ion-background-color: var(--scrollContentBgColor);
        // --ion-background-color: var(--scroll-content-bg-color);

        /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0281d1', endColorstr='#80ede5',GradientType=0 );  IE6-9 */
        /*background: url(../../assets/img/chatbackground2.jpg);*/
        background-size: cover;
        padding-bottom: 200px;
        .messagesArea {
          padding-bottom: 50px;
        }
        ion-slides {
          // background: url(../assets/img/chatbackground2.jpg);
          background-size: cover;
        }

        ion-item.item {
          /*background-color: var(--itemColor);*/
          /*padding :0px;*/
          /*transition: all 1.1s ease;*/
          --ion-background-color: var(--ionItemBgColor);
          ion-avatar {
            margin: 0px;
            margin-bottom: 0px;
            margin-right: 6px;
            border-radius: 100%;
            /*width: 50px;*/
            /*height : 50px;*/
            /*height: 100%;*/
            background: var(--avatarBgColor);
            --ion-background-color: var(--avatarBgColor);
            p {
              background: none;
              text-align: center;
              /*vertical-align: middle;*/
              margin-top: 4px;
              font-size: 30px;
              /*margin: 0px;*/
              /*padding: 0px;*/
            }
          }
          .item-inner {
            border-color: var(--itemInnerColor);
            --ion-border-color: var(--itemInnerColor);
            border-bottom: 0px solid;
            ion-label.label {
              /*color : var(--itemInnerColor);*/
            }
          }
        }

        word-item {
          ion-item.item {
            background-color: #fff;
          }
          .wordWrapper {
            width: 100%;
            button.conjugateNow {
              padding-top: 10%;
              width: 25px;
            }
          }
        }
        ion-item.item.free {
          --ion-background-color: var(--itemFreeBgColor);
        }
        friend {
          ion-item.item {
            --ion-background-color: rgb(103, 179, 228);
          }
        }
      }
      :host {
        .scroll-content {
          /*background: url(../../assets/img/bg.jpg);*/
          // background: url(../assets/img/chatbackground2.jpg);
        }
      }

      /*        ion-list {
                    ion-label.label {
                        color : var(--ionLabelColor);
                    }
        }*/

      message {
        background: transparent;
        /*background-size: cover;*/
        /*background: url(../../assets/img/css/button.png);*/
        border-radius: 5px;
        .card {
          background: var(--messageBgColor);
          // border-radius: 10px 10px 0px  10px;
          z-index:4;
        }
        .card.rounded-border {
          border-radius: 10px 10px 0px 10px;
        }
        .card.full-border {
          border-radius: 10px 10px 0px 0rem;
        }
        .right {
          position: relative;
          background: var(--messageBgColor);
          border-radius: 10px 10px 10px  10px;
        }
        
        .right::before {
          content: '';
          position: absolute;
          visibility: visible;
          right: -10px;
          border: 9px solid transparent;
          border-top: 10px solid var(--messageBgColor);
          z-index: 1;
        }
        
        .right::after {
          content: '';
          position: absolute;
          visibility: visible;
          top: 0px;
          right: -8px;
        //  border: 10px solid transparent;
          border-top: 10px solid var(--messageBgColor);
          clear: both;
          
        }
        
        .moreBtn {
          color: var(--messageHeaderTextColor);
          font-size: 2.1rem;
        }
        .card.chat {
          color: black;
          background: white;
          border-radius: 17px;
          width: auto;
          padding-left: 20px;
          padding-right: 20px;
          ion-col.col {
            color: #6e6580;
          }
          /*                .moreBtn.moreEnglish {
                    color: #6e6580;
                }
                .moreBtn.morePersian {
                    color: #6e6580;
                }*/
        }
        .header {
          ion-col {
            font-weight: bolder;
            font-size: 1.2em;
            color: var(--messageHeaderTextColor);
          }
        }
        word-item {
          ion-item {
            padding: 0px;
            div.item-inner {
              /*background: url(../../assets/img/css/paper.png);*/
              background: white;
              /*background-size: cover;*/
              padding: 0px;
              ion-icon.speechIcon {
                position: absolute;
                right: 2px;
              }
              ion-label {
                /*margin : 0px;*/
              }
            }
            ion-col {
              padding-top: 0px;
              padding-bottom: 0px;
              /*white-space: normal;*/
            }
          }
          ion-grid {
            padding: 0px;
          }
          noun {
            p {
              color: var(--pColor);
            }
          }
          verb {
            button {
              padding: 6px;
            }
          }
        }

        .footer {
          /*background: url(../../assets/img/css/paper.png);*/
          background: white;
          background: rgba(99, 44, 44, 0);
          padding-bottom: 27px;
          border-radius: 0px 0px 15px 15px;
        }
      }
      message.received {
        background: var(--messageReceivedBgColor);
        .card.chat {
          /*color: black;*/
          background: cyan;
        }
      }
      friend {
        border-bottom: 1px solid;
        border-bottom-color: #faebd75c;
        ion-item {
          padding-top: 3px;
          padding-bottom: 3px;
          background-color: #000;
        }
      }
    }
    :host {
      .textToShare {
        background: rgba(255, 255, 255, 0.3);
      }
    }
    ion-footer {
      chat-input {
        ion-item.item {
          background-color: white;
          --ion-background-color: white;
        }
        .suggestionPanel {
          .suggestionItem {
            width: 100%;
            height: 44px;
            /*background: rgba(63, 107, 117, 0.360784);*/
            background: rgba(223, 235, 255, 0.94);
          }
        }
      }
    }
    :host {
      ion-content {
        .scroll-content {
          /*background: url(../../assets/img/chatbackground.jpg);*/
          background-size: cover;
          padding-bottom: 200px;
        }
      }
    }
    .menu-inner {
      ion-icon.star {
        color: yellow;
        font-size: x-large;
      }
    }
    :host {
      ion-content {
        .scroll-content {
          ion-icon {
            color: yellow;
            font-size: x-large;
          }
          ion-item.item {
            background: transparent;
          }
        }
      }
    }
    .header .toolbar-title {
      /*color : white;*/
    }
    .header .toolbar-background {
      background-color: var(--headerBgColor);
    }
    ion-header {
      ion-title {
        .toolbar-title {
          color: var(--toolbarTitleColor);
        }
      }
      .back-button.show-back-button {
        display: inline-block;
        color: white;
      }
      ion-input {
        border: 1px solid --inputBorderColor;
        background: var(--inputBgColor);
      }
      ion-toolbar.toolbar {
        ion-buttons {
          button {
            color: var(--navarBtnColor);
          }
        }
        .toolbar-background {
          background: var(--toolbarBgColor);
        }
      }
    }

    ion-action-sheet {
      .action-sheet-wrapper {
        .action-sheet-title {
          color: var(--actionSheetTitleColor);
        }
        .action-sheet-container {
          background: var(--actionSheetBgColor);
          button {
            color: var(--actionSheetBtnColor);
          }
        }
      }
    }
    ion-slide.swiper-slide {
      background: var(--ionContentColor);
      height: 100vh;
    }
    comp-footer {
      /*background-color: red;*/
      box-shadow: 1px 0px 5px 0px #676b73;
      background: var(--footerBgColor);
      .bayaTab {
        p {
          color: var(--footerTextColor);
        }
      }
      ion-icon {
        color: var(--iconColor);
        text-align: center;
        margin-left: auto;
        margin-right: auto;
      }
      .bayaTab {
        .selected {
          ion-icon {
            color: var(--footerSelectedTextColor);
          }
          p {
            color: var(--footerSelectedTextColor);
          }
        }
      }
    }
    ion-fab {
      button.fab {
        background-color: var(--fabBtnBgColor);
        border-radius: 17px;
      }
    }
    chat-input {
      ion-fab {
        height: 100%;
        width: 42px;
        button.fab {
          background: var(--sendToolsBgColor);
        }
        ion-icon {
          color: black;
          font-size: 20px;
        }
        button {
          background: var(--sendToolsBgColor);
          border: 1px solid --sendToolsBtnColor;
          margin: 1px;
          border-radius: 15%;
          /*height :100%;*/
        }
      }

      .sendTools {
        min-height: 45px;
        background-color: var(--sendToolsBgColor);
        ion-col.mic,
        ion-col.send {
          background: var(--sendToolsBgColor);
          border-radius: 15%;
          border: var(--sendToolsBtnBorderColor solid 1px);
        }
        .micBtn,
        .sendBtn,
        .stopMicBtn {
          background: var(--sendToolsBgColor);
          /*border-radius: 40%;*/
          height: 100%;
          border-radius: 15%;
          color: var(--sendToolsBtnColor);
        }
      }
    }
    dialog-menu-option-message {
      .optionMenu {
        background: #ffffff;
        border: 1px solid rgb(149, 168, 214);
        box-shadow: 1px 1px 10px rgba(66, 66, 66, 0.4588235294117647);
      }
    }

    add-friend-dialog {
      .dialog {
        ion-card.card {
          border-radius: 8px;
          h1 {
            color: var(--h1Color);
          }
          ion-input {
            border-radius: 10px;
            border: 1px solid --addFriendDialogInputColor;
            background: var(--addFriendDialogInputBgColor);
            width: 99%;
            border: 1px solid --inputBorderColor;
            margin: 12px auto 12px auto;
          }
          button {
            border-radius: 11px;
            padding: 19px;
            padding-left: 29px;
            border: 1px solid --btnBorderColor;
            background: var(--btnBgColor);
            padding-right: 29px;
          }
          button.cancel {
            float: right;
            width: 99px;
          }
          background: var(--addFriendDialogBgColor);
        }
      }
    }
    selection-language {
      ion-item.item {
        background: #e5f0f700;
        border-top: 1px rgba(0, 0, 0, 0.21176470588235294) solid;
        font-weight: bold;
        text-align: center;
      }
    }
  }
}