/* Minification failed. Returning unminified contents. (7647,2): run-time error CSS1030: Expected identifier, found '.' (7647,2): run-time error CSS1019: Unexpected token, found '.' (7681,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7682,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7683,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7684,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7685,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7686,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7687,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7688,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7689,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7690,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7691,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7692,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7700,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (7730,35): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (7731,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (7735,21): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (7746,21): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (7750,21): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (7757,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (7763,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (7764,25): run-time error CSS1039: Token not allowed after unary operator: '-radius' (7765,28): run-time error CSS1039: Token not allowed after unary operator: '-white' (7774,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (7799,17): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (7806,21): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (7839,17): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (7846,17): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (7871,17): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (7886,25): run-time error CSS1039: Token not allowed after unary operator: '-radius' (7890,25): run-time error CSS1039: Token not allowed after unary operator: '-radius' (7905,28): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (7915,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (7923,22): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (7924,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (7931,30): run-time error CSS1039: Token not allowed after unary operator: '-radius' (7955,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (7976,36): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (7994,17): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (7995,28): run-time error CSS1039: Token not allowed after unary operator: '-white' (8003,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (8010,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (8037,39): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (8046,25): run-time error CSS1039: Token not allowed after unary operator: '-white' (8075,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray' (8080,28): run-time error CSS1039: Token not allowed after unary operator: '-white' (8085,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (8086,30): run-time error CSS1039: Token not allowed after unary operator: '-radius' (8106,21): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (8122,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray' (8125,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (8126,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (8153,35): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (8166,17): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (8174,21): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (8201,21): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (8205,21): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (8237,40): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (8250,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray' (8271,25): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (8287,25): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (8293,25): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (8321,25): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (8327,29): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (8331,36): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (8339,25): run-time error CSS1039: Token not allowed after unary operator: '-white' (8351,36): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (8359,25): run-time error CSS1039: Token not allowed after unary operator: '-white' (8371,36): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (8378,25): run-time error CSS1039: Token not allowed after unary operator: '-white' (8404,39): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (8414,32): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray' (8415,21): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (8419,36): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (8429,41): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (8433,42): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (8437,42): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (8441,25): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (8449,36): run-time error CSS1039: Token not allowed after unary operator: '-white' (8450,25): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (8466,36): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (8469,40): run-time error CSS1039: Token not allowed after unary operator: '-white' (8499,21): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (8521,25): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (8524,36): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray' (8534,17): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (8543,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (8551,21): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (8569,21): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (8584,21): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (8587,32): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (8599,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (8608,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (8612,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (8695,25): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (8737,33): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (8743,29): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (8753,29): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (8769,29): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (8784,21): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (8796,36): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (8797,33): run-time error CSS1039: Token not allowed after unary operator: '-radius' (8798,41): run-time error CSS1039: Token not allowed after unary operator: '-radius' (8799,38): run-time error CSS1039: Token not allowed after unary operator: '-radius' (8800,33): run-time error CSS1039: Token not allowed after unary operator: '-radius' (8813,29): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (8825,21): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (8838,21): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (8860,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (8864,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray' (8865,35): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (8873,21): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (8874,32): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray' (8875,39): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (8882,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (8896,21): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (8916,21): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (8932,32): run-time error CSS1039: Token not allowed after unary operator: '-main-light-color' (8963,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (8983,24): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (8984,28): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (8995,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (9076,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray' (9077,25): run-time error CSS1039: Token not allowed after unary operator: '-radius' (9097,43): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (9121,40): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray' (9138,33): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (9144,33): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (9150,33): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (9161,17): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (9171,17): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (9173,28): run-time error CSS1039: Token not allowed after unary operator: '-white' (9225,28): run-time error CSS1039: Token not allowed after unary operator: '-white' (9226,17): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (9230,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray' (9340,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (9367,17): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (9593,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (9610,17): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (9618,32): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray' (9619,34): run-time error CSS1039: Token not allowed after unary operator: '-radius' (9623,36): run-time error CSS1039: Token not allowed after unary operator: '-main-light-color' (9624,36): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (9672,21): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (9718,21): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (9730,36): run-time error CSS1039: Token not allowed after unary operator: '-white' (9731,36): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (9732,38): run-time error CSS1039: Token not allowed after unary operator: '-radius' (9758,28): run-time error CSS1039: Token not allowed after unary operator: '-white' (9768,21): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (9769,32): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (9800,32): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (9818,29): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (9886,28): run-time error CSS1039: Token not allowed after unary operator: '-white' (9888,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (9901,21): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (9906,17): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (9965,17): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (9966,28): run-time error CSS1039: Token not allowed after unary operator: '-main-light-color' (9971,17): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (9972,28): run-time error CSS1039: Token not allowed after unary operator: '-main-light-color' (10078,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (10124,36): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (10132,25): run-time error CSS1039: Token not allowed after unary operator: '-white' (10203,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (10204,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (10205,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (10206,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (10207,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (10208,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (10209,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (10210,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (10211,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (10212,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (10213,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (10214,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (10274,32): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (10275,21): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (10285,21): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (10362,32): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (10363,34): run-time error CSS1039: Token not allowed after unary operator: '-radius' (10364,32): run-time error CSS1039: Token not allowed after unary operator: '-white' (10374,21): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (10377,21): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (10380,21): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (10383,21): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (10426,17): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (10432,21): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (10433,38): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (10445,21): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (10450,21): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (10456,25): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (10460,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (10473,34): run-time error CSS1039: Token not allowed after unary operator: '-radius' (10474,32): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray' (10477,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (10496,32): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (10497,28): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (10506,21): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (10516,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (10526,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (10577,21): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (10658,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (10671,21): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (10692,32): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (10693,34): run-time error CSS1039: Token not allowed after unary operator: '-radius' (10694,32): run-time error CSS1039: Token not allowed after unary operator: '-white' (10720,32): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (10721,21): run-time error CSS1039: Token not allowed after unary operator: '-white' (10738,21): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (10753,25): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (10757,17): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (10765,17): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (10768,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (10769,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (10770,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (10771,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (10772,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (10773,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (10774,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (10775,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (10776,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (10777,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (10778,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (10779,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (10814,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (10815,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10831,1): run-time error CSS1019: Unexpected token, found '@keyframes' (10832,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10865,21): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (10880,29): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (10893,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray' (10905,21): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (10931,44): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (10938,33): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (10945,33): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (10952,33): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (10959,33): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (10968,33): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (10969,50): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (10995,28): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (10996,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (11002,32): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (11017,28): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (11026,21): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (11044,32): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (11051,21): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (11058,21): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (11065,21): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (11072,21): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (11087,21): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (11107,17): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (11125,17): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (11129,17): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (11142,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (11164,32): run-time error CSS1039: Token not allowed after unary operator: '-white' (11184,22): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (11211,21): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (11232,40): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (11244,22): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (11252,17): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (11258,21): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (11274,17): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (11292,28): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (11351,28): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (11362,17): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (11388,32): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (11410,40): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (11440,32): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (11444,36): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (11451,40): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (11467,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray' (11473,21): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (11483,21): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (11494,25): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (11499,25): run-time error CSS1039: Token not allowed after unary operator: '-white' (11530,38): run-time error CSS1039: Token not allowed after unary operator: '-radius' (11550,32): run-time error CSS1039: Token not allowed after unary operator: '-white' (11554,36): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (11566,36): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray' (11570,32): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (11578,32): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (11582,36): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray' (11586,32): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (11590,36): run-time error CSS1039: Token not allowed after unary operator: '-white' (11612,32): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (11716,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (11720,21): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (11793,25): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (11812,51): run-time error CSS1039: Token not allowed after unary operator: '-radius' (11813,54): run-time error CSS1039: Token not allowed after unary operator: '-radius' (11817,52): run-time error CSS1039: Token not allowed after unary operator: '-radius' (11818,55): run-time error CSS1039: Token not allowed after unary operator: '-radius' (11823,36): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray' (11834,44): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (11853,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (11861,32): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (11870,32): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (11882,40): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (11891,32): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray' (11892,34): run-time error CSS1039: Token not allowed after unary operator: '-radius' (11920,17): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (11958,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary-color' (11969,21): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (11973,28): run-time error CSS1039: Token not allowed after unary operator: '-main-light-color' (12006,36): run-time error CSS1039: Token not allowed after unary operator: '-white' (12007,36): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (12020,32): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (12021,34): run-time error CSS1039: Token not allowed after unary operator: '-radius' (12029,47): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (12044,33): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (12055,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-gray' (12058,30): run-time error CSS1039: Token not allowed after unary operator: '-radius' (12064,39): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (12107,25): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary-color' (12120,32): run-time error CSS1039: Token not allowed after unary operator: '-white' (12121,32): run-time error CSS1039: Token not allowed after unary operator: '-border-color' (12131,32): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (12132,21): run-time error CSS1039: Token not allowed after unary operator: '-white' (13377,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (13378,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (13379,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (13380,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (13381,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (13382,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (13383,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (13384,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (13385,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (13386,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (13387,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (13397,28): run-time error CSS1039: Token not allowed after unary operator: '-white' (13406,35): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (13412,28): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (13444,17): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (13481,26): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (13500,24): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (13503,28): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (13507,17): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (13511,28): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (13534,24): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (13537,28): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (13541,17): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (13545,28): run-time error CSS1039: Token not allowed after unary operator: '-second-color' */ /*......................................................................... ======================== MODAL ===================================== ......................................................................*/ .trn-modal { position: fixed; display: none; height: 100%; width: 100%; top: 0; left: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.7); z-index: 999999; padding-top: 4%; } .trn-modal.medium-popup.trn-flight-details-note-modal .trn { border-radius: 6px; } .trn-modal.medium-popup.trn-flight-details-note-modal .trn .time-count-btn { margin-top: 20px; } .trn-modal.medium-popup.trn-flight-details-note-modal .trn .time-count-btn button { background-color: #2321FF; color: #fff; border: 1px solid #2321FF; outline: 0; border-radius: 3px; padding: 5px; } .trn-modal > .trn-modal-close { display: block; position: relative; font-size: 35px; top: 0; right: 10px; color: #fff; border-radius: 100%; text-align: center; padding: 10px; cursor: pointer; float: right; margin-top: -5%; z-index: 99999; text-shadow: 1px 1px 8px #000000; text-shadow: 1px 1px 8px black; } .trn-modal .trn .trn-modal-caption { width: 96%; position: absolute; display: block; background-color: #F8F9FB; color: #000000; padding: 12px 2%; top: 0; left: 0; font-weight: 600; letter-spacing: .0325em; font-size: 15px; border-bottom: 1px solid #DDDDDD; } /*....... LOGIN .......*/ .trn-modal > .trn { position: relative; display: block; width: 100%; padding: 30px; max-width: 390px; margin: 0 auto; background-color: #fff; border-radius: 6px; } .trn-modal > .trn > .social-button-wrapper > .social-btn { text-decoration: none; display: inline-block; color: #fff; width: 48.5%; cursor: pointer; font-size: 13px; height: 56px; padding-left: 20px; } .trn-modal > .trn > .social-button-wrapper > .facebook-login, .trn-modal > .trn > .social-button-wrapper > .facebook-signup { background: url(https://res.cloudinary.com/turna/image/upload/q_auto,f_auto/Images/Icons/social/icon-login-facebook.png) no-repeat 6px 17px; background-size: 20px; background-color: #3B5998; border: 1px solid #385693; margin-right: 2%; } .trn-modal > .trn > .social-button-wrapper > .google-login, .trn-modal > .trn > .social-button-wrapper > .google-signup { background: url(https://res.cloudinary.com/turna/image/upload/q_auto,f_auto/Images/Icons/social/google-login-icon.png) no-repeat 10px 18px; background-size: 18px; background-color: #e55f4b; border: 1px solid #d64833; } .trn-modal > .trn > .social-button-wrapper > .facebook-login:hover, .trn-modal > .trn > .social-button-wrapper > .facebook-signup:hover { background-color: #2a4378; border: 1px solid #3B5998; } .trn-modal > .trn > .social-button-wrapper > .google-login:hover { cursor: pointer; background-color: #d64833; } .trn-modal > .trn > .trn-line { display: inline-block; width: 100%; height: 10px; border-bottom: 1px solid #DDDDDD; text-align: center; margin: 15px 0 25px; } .trn-modal > .trn > .trn-line > span { background-color: #fff; padding: 0 10px; font-size: 14px; color: #AAAAAA; font-weight: 600; letter-spacing: .0625em; } .trn-modal > .trn .trn-form-margin { margin-top: 40px; } .trn-modal > .trn .trn-form { width: 100%; display: inline-block; margin-top: 20px; } .trn-modal > .trn .trn-form input[type=text], .trn-modal > .trn .trn-form input[type=password] { width: 100%; display: inline-block; border: 1px solid #DDDDDD; font-size: 22px; text-align: center; min-height: 51px; } .trn-modal > .trn .trn-form input[type=text].lgn-email { background: url(https://res.cloudinary.com/turna/image/upload/q_auto,f_auto/Images/Icons/icon-login-email.png) no-repeat right 10px center; } .trn-modal > .trn .trn-form input[type=text].lgn-email:focus { background: url(https://res.cloudinary.com/turna/image/upload/q_auto,f_auto/Images/Icons/icon-login-email-focus.png) no-repeat right 10px center; } .trn-modal > .trn .trn-form input[type=password].lgn-password { background: url(https://res.cloudinary.com/turna/image/upload/q_auto,f_auto/Images/Icons/icon-login-password.png) no-repeat right 10px center; } .trn-modal > .trn .trn-form input[type=password].lgn-password:focus { background: url(https://res.cloudinary.com/turna/image/upload/q_auto,f_auto/Images/Icons/icon-login-password-focus.png) no-repeat right 10px center; } #modal-reservation-control .new-popup { max-width: 475px; } .trn-modal > .trn .trn-form button { width: 100%; display: inline-block; background-color: #2321FF; color: #fff; border: 1px solid #2321FF; margin: 7px 0 3px; padding: 16px 0; font-size: 16px; } #modal-reservation-control .section-card__header { margin-bottom: 20px; } #modal-reservation-control .section-card__title { font-size: 16px; font-weight: bold; color: #000000; } .trn-modal > .trn .trn-form button.btn-signup, .trn-modal > .trn .trn-form button.btn-signin { width: 100.5%; display: inline-block; background-color: #fff; color: #AAAAAA; border: 1px solid #DDDDDD; margin-bottom: 5px; padding: 15px 0; font-size: 16px; } .trn-modal > .trn .trn-form button.btn-signup:hover, .trn-modal > .trn .trn-form button.btn-signin:hover { color: #2321FF; border: 1px solid #2321FF; } .trn-modal > .trn .trn-form .trn-form-group { width: 100%; display: inline-block; padding: 6px 0 0; } .trn-modal > .trn .trn-form .trn-form-group > .left { width: 50%; float: left; } .trn-modal > .trn .trn-form .trn-form-group input[type=checkbox] { height: 20px; width: 20px; float: left; margin-right: 5px; cursor: pointer; } .trn-modal .trn .trn-form .trn-form-group input[type=checkbox] + label { font-size: 14px; color: #000000; float: left; cursor: pointer; } .trn-modal > .trn .trn-form .trn-form-group input[type=checkbox]:checked + label { color: #2321FF; } .trn-modal .trn .trn-form .trn-form-group .full .label-agreement, .trn-modal .trn .trn-form .trn-form-group .full .label-mailing { width: 93%; font-size: 0.85em; float: right; } .trn-modal .trn .trn-form .trn-form-group .label-agreement-error { padding: 5px; width: 98% !important; } .trn-modal .trn .trn-form .trn-form-group .full .label-agreement a { color: #AAAAAA; } .trn-modal > .trn .trn-form .trn-form-group > .right { width: 50%; float: right; text-align: right; } .trn-modal > .trn .trn-form .trn-form-group > .right > a:link, .trn-modal > .trn .trn-form .trn-form-group > .right > a:active, .trn-modal > .trn .trn-form .trn-form-group > .right > a:visited { color: #2321FF; font-size: 12px; } .trn-modal > .trn .trn-form .trn-form-group > .right > a:hover { color: #000000; } .trn-modal > .trn .trn-form .trn-form-group > .full { width: 100%; display: inline-block; } .trn-modal > .trn .trn-form .trn-form-group > .full > label { width: 90%; font-size: 12px; margin-top: -3px; } .trn-modal > .trn .trn-form .trn-form-group > .full > p { width: 100%; font-size: 14px; padding: 0 0 18px; color: #000000; } body[dir="rtl"] .trn-modal > .trn .trn-form input[type=text], body[dir="rtl"] .trn-modal > .trn .trn-form input[type=password] { width: 100%; } body[dir="rtl"] .trn-modal > .trn .trn-form .trn-form-group > .left { float: right; text-align: right; } body[dir="rtl"] .trn-modal > .trn .trn-form .trn-form-group > .right { float: left; text-align: left; } body[dir="rtl"] .trn-modal > .trn .trn-form input[type=text].lgn-email { background: url(https://res.cloudinary.com/turna/image/upload/q_auto,f_auto/Images/Icons/icon-login-email.png) no-repeat left 10px center; } body[dir="rtl"] .trn-modal > .trn .trn-form input[type=text].lgn-email:focus { background: url(https://res.cloudinary.com/turna/image/upload/q_auto,f_auto/Images/Icons/icon-login-email-focus.png) no-repeat left 10px center; } body[dir="rtl"] .trn-modal > .trn .trn-form input[type=password].lgn-password { background: url(https://res.cloudinary.com/turna/image/upload/q_auto,f_auto/Images/Icons/icon-login-password.png) no-repeat left 10px center; } body[dir="rtl"] .trn-modal > .trn .trn-form input[type=password].lgn-password:focus { background: url(https://res.cloudinary.com/turna/image/upload/q_auto,f_auto/Images/Icons/icon-login-password-focus.png) no-repeat left 10px center; } body[dir="rtl"] .trn-modal > .trn .trn-form input[type=text].lgn-name { background: url(https://res.cloudinary.com/turna/image/upload/q_auto,f_auto/Images/Icons/icon-login-name.png) no-repeat left 10px center; } body[dir="rtl"] .trn-modal > .trn .trn-form input[type=text].lgn-name:focus { background: url(https://res.cloudinary.com/turna/image/upload/q_auto,f_auto/Images/Icons/icon-login-name-focus.png) no-repeat left 10px center; } body[dir="rtl"] .trn-modal > .trn .trn-form input[type=text].lgn-ticket { background: url(https://res.cloudinary.com/turna/image/upload/q_auto,f_auto/Images/Icons/icon-login-ticket.png) no-repeat left 10px center; } body[dir="rtl"] .trn-modal > .trn .trn-form input[type=text].lgn-ticket:focus { background: url(https://res.cloudinary.com/turna/image/upload/q_auto,f_auto/Images/Icons/icon-login-ticket-focus.png) no-repeat left 10px center; } body[dir="rtl"] .trn-modal > .trn .trn-form .trn-form-group input[type=checkbox] { float: right; margin-left: 5px; margin-right: unset; } body[dir='rtl'] .trn-modal > .trn .trn-form .trn-form-group > .full { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .trn-modal.medium-popup { height: unset !important; } .trn-modal #results { padding: 5px 12px; margin: 5px 0px 10px; -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75); } .new-popup__close { position: absolute !important; right: 0; top: 0; width: 40px; height: 40px; background-color: #01007F; border-radius: 0 6px 0 12px; font-size: 32px; display: -webkit-box; display: -ms-flexbox; display: flex !important; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #fff; cursor: pointer; } body[dir='rtl'] .new-popup__close { right: unset; left: 0; border-radius: 0 0 12px 0; } .new-popup__close:after { content: "\e92c"; font-family: turna; } .bill-popup { max-width: 590px !important; } @media screen and (max-width: 1600px) { .bill-popup { zoom: .8; } } @media screen and (max-width: 1500px) { .bill-popup { zoom: .7; } } .info-message { background-color: #F8F9FB; } .info-message__container { padding: 12px 20px 12px 45px; position: relative; font-size: 13px; color: #000000; } .info-message__container::before { content: "\e948"; font-family: turna; position: absolute; left: 15px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); color: #AAAAAA; font-size: 22px; } .bill-popup__btn { width: 100%; text-align: center; margin-top: 20px; } .bill-popup__btn button { width: 100% !important; max-width: 275px; font-size: 18px !important; font-weight: 600 !important; color: #fff; height: 56px !important; background-color: #2321FF !important; border: none !important; border-radius: 6px !important; } .bill-popup__select { font-size: 13px !important; } .bill-popup__textarea { margin-bottom: unset !important; } .trn::-webkit-scrollbar { width: 0px; } .trn::-webkit-scrollbar-track { background: #F8F9FB; } .trn::-webkit-scrollbar-thumb { background: #01007F; } .popup-flex-layout { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-top: unset; } .trn-modal.new-popup-scroll-bar { height: 100% !important; overflow-x: hidden; overflow-y: auto; padding: 4% 0; } .btn-operations__group .button-in-header.reservation-operation.btn-operations { background-color: #fff; color: #01007F; font-size: 14px; max-width: 202.5px; height: 56px; border: none; border: 1px solid #01007F; border-radius: 6px; } .btn-operations__group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 30px; } .campaign-banner.trn-modal.medium-popup { padding-top: unset !important; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .campaign-banner.trn-modal.medium-popup.campaign-banner--flex { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .campaign-banner .new-popup { max-width: 950px; width: 100%; height: 560px !important; padding: unset !important; max-height: 420px; background: transparent; } /*.campaign-banner__container { display: flex; justify-content: space-between; align-items: center; padding: 50px; height: 100%; }*/ /* .campaign-banner__container__header { font-size: 42px; color: var(--white); font-weight: 400; } .campaign-banner__container__header span { font-weight: 700; } .campaign-banner__container__left { max-width: 500px; height: 100%; display: flex; flex-direction: column; justify-content: space-evenly; } .campaign-banner__container__footer-logo{ width: 200px; } .campaign-banner__container__footer-logo img{ width: 100%; }*/ /*@media (min-width: 769px) and (max-width: 1023px) { .trn-modal { .tab-menu__label { flex-wrap: wrap; justify-content: flex-start; padding-left: 12px; } .tab-menu__label label::after { left: 16px; } } } */ @media only screen and (max-width: 768px) { .trn-modal { padding-top: 0; } .trn-modal .signin-new-popup { margin: 0 auto !important; } .trn-modal .signin-new-popup__left-side { display: none; } .trn-modal .signin-new-popup__right-side { height: 100vh; } .trn-modal .btn-operations__group { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 8px; } #modal-reservation-control .new-popup { max-width: 475px; height: 100%; max-height: 100%; overflow: auto; } } .trn-modal .trn-modal-signin-content { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: transparent; } .trn-modal .trn-modal-signin-content .signin-modern__wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; max-width: 420px; height: auto; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -ms-flex-negative: 0; flex-shrink: 0; border-radius: 16px; background: #FFF; margin: auto; } .trn-modal .trn-modal-signin-content .signin-modern__wrapper .forget-password { padding: 0; margin: 0; width: 100%; height: 100%; } .trn-modal .trn-modal-signin-content .signin-modern__wrapper .forget-password .forget-password-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 22px 12px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; border-bottom: 1px solid #E4E6E9; } .trn-modal .trn-modal-signin-content .signin-modern__wrapper .forget-password .forget-password-header .forget-password-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0 36px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #1D1E20; text-align: center; -webkit-font-feature-settings: 'liga' off, 'clig' off; font-feature-settings: 'liga' off, 'clig' off; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 600; line-height: 21px; width: 100%; } .trn-modal .trn-modal-signin-content .signin-modern__wrapper .forget-password__container { padding: 16px 24px 32px 24px; width: 100%; } .trn-modal .trn-modal-signin-content .signin-modern__wrapper .forget-password__container__header-wrapper { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 8px; margin-bottom: 24px; } .trn-modal .trn-modal-signin-content .signin-modern__wrapper .forget-password__container__header-wrapper__title { color: #1D1E20; font-family: "Sofia Sans"; font-size: 26px; font-style: normal; font-weight: 700; line-height: 34px; } .trn-modal .trn-modal-signin-content .signin-modern__wrapper .forget-password__container__header-wrapper__description { color: #585B5E; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: 21px; } .trn-modal .trn-modal-signin-content .signin-modern__wrapper .forget-password__container input { display: -webkit-box; display: -ms-flexbox; display: flex; height: 56px; padding: 0px 16px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; -ms-flex-item-align: stretch; align-self: stretch; border-radius: 8px; border: 1px solid #BCBEBF; background: #FFF; width: 100%; color: #909294; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: 21px; } .trn-modal .trn-modal-signin-content .signin-modern__wrapper .forget-password__container input:-webkit-autofill { background-color: #fff !important; -webkit-box-shadow: 0 0 0 1000px white inset !important; -webkit-text-fill-color: #000 !important; -webkit-transition: background-color 5000s ease-in-out 0s; -o-transition: background-color 5000s ease-in-out 0s; transition: background-color 5000s ease-in-out 0s; color: #909294 !important; -webkit-text-fill-color: #909294 !important; font-family: Inter, sans-serif !important; } .trn-modal .trn-modal-signin-content .signin-modern__wrapper .forget-password__container input:not(:placeholder-shown), .trn-modal .trn-modal-signin-content .signin-modern__wrapper .forget-password__container input:placeholder-shown, .trn-modal .trn-modal-signin-content .signin-modern__wrapper .forget-password__container input:valid, .trn-modal .trn-modal-signin-content .signin-modern__wrapper .forget-password__container input[value]:not([value=""]), .trn-modal .trn-modal-signin-content .signin-modern__wrapper .forget-password__container input.filled { background-color: #fff; font-family: Inter, sans-serif !important; color: #909294 !important; } .trn-modal .trn-modal-signin-content .signin-modern__wrapper .forget-password__container .forget-password__container__btn { display: -webkit-box; display: -ms-flexbox; display: flex; height: 56px; padding: 24px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; -ms-flex-item-align: stretch; align-self: stretch; border-radius: 8px; background: #01007F; cursor: pointer; } .trn-modal .trn-modal-signin-content .signin-modern__wrapper .forget-password__container .forget-password__container__btn button { color: #FFF; text-align: right; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 500; line-height: 21px; background: transparent; border: none; text-align: center; } .trn-modal .trn-modal-signin-content .signin-modern__wrapper .form-row { margin-bottom: 24px; } .trn-modal .trn-modal-signin-content .signin-modern__wrapper input.invalid, .trn-modal .trn-modal-signin-content .signin-modern__wrapper .invalid[type="text"] { border: 1px solid #DC2626 !important; background: #FFFFFF !important; } .trn-modal .trn-modal-signin-content .signin-modern__wrapper label.invalid { color: #DC2626 !important; padding: 0 0 0 16px !important; bottom: -20px; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 400; line-height: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .trn-modal .trn-modal-signin-content .signin-modern__wrapper label.invalid i { font-family: "Font Awesome 6 Pro" !important; margin-right: 4px; color: #DC2626; font-size: 16px; } .trn-modal .trn-modal-signin-content .signin-modern__box { width: 100%; padding: 24px 32px 0 32px; } .trn-modal .trn-modal-signin-content .signin-modern__box__header { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .trn-modal .trn-modal-signin-content .signin-modern__box__header__close { justify-self: flex-end; margin-left: auto; display: -webkit-box; display: -ms-flexbox; display: flex; width: 32px; height: 32px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 64px; background: #E0E0E0; cursor: pointer; } .trn-modal .trn-modal-signin-content .signin-modern__box__header__close::after { content: "\e92c"; font-family: turna; position: relative; font-size: 16px; width: 16px; height: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #585B5E; } .trn-modal .trn-modal-signin-content .signin-modern__box__logo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; margin-bottom: 40px; } .trn-modal .trn-modal-signin-content .signin-modern__box__logo img { width: 180px; height: 36px; padding: 0px 4.005px 0px 0px; } .trn-modal .trn-modal-signin-content .signin-modern__box__form { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 16px; margin: 0; } .trn-modal .trn-modal-signin-content .signin-modern__box__form__inputs-wrapper { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 16px; width: 100%; } .trn-modal .trn-modal-signin-content .signin-modern__box__form__inputs-wrapper__password-wrapper { position: relative; width: 100%; } .trn-modal .trn-modal-signin-content .signin-modern__box__form__inputs-wrapper__password-wrapper input { width: 100%; padding-right: 40px; } .trn-modal .trn-modal-signin-content .signin-modern__box__form__inputs-wrapper__password-wrapper i { font-family: "Font Awesome 6 Pro" !important; position: absolute; right: 16px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer; color: #909294; font-size: 16px; } .trn-modal .trn-modal-signin-content .signin-modern__box__form__inputs-wrapper input { display: -webkit-box; display: -ms-flexbox; display: flex; height: 56px; padding: 0px 16px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; -ms-flex-item-align: stretch; align-self: stretch; border-radius: 8px; border: 1px solid #BCBEBF; background: #FFF; width: 100%; color: #909294; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: 21px; } .trn-modal .trn-modal-signin-content .signin-modern__box__form__inputs-wrapper input:-webkit-autofill { background-color: #fff !important; -webkit-box-shadow: 0 0 0 1000px white inset !important; -webkit-text-fill-color: #000 !important; -webkit-transition: background-color 5000s ease-in-out 0s; -o-transition: background-color 5000s ease-in-out 0s; transition: background-color 5000s ease-in-out 0s; color: #909294 !important; -webkit-text-fill-color: #909294 !important; font-family: Inter, sans-serif !important; } .trn-modal .trn-modal-signin-content .signin-modern__box__form__inputs-wrapper input:not(:placeholder-shown), .trn-modal .trn-modal-signin-content .signin-modern__box__form__inputs-wrapper input:placeholder-shown, .trn-modal .trn-modal-signin-content .signin-modern__box__form__inputs-wrapper input:valid, .trn-modal .trn-modal-signin-content .signin-modern__box__form__inputs-wrapper input[value]:not([value=""]), .trn-modal .trn-modal-signin-content .signin-modern__box__form__inputs-wrapper input.filled { background-color: #fff; font-family: Inter, sans-serif !important; color: #909294 !important; } .trn-modal .trn-modal-signin-content .signin-modern__box__form__inputs-wrapper__signup-name-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; } .trn-modal .trn-modal-signin-content .signin-modern__box__form__inputs-wrapper__signup-password-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; } .trn-modal .trn-modal-signin-content .signin-modern__box__form__forgot { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } .trn-modal .trn-modal-signin-content .signin-modern__box__form__forgot__button { -ms-flex-item-align: end; align-self: flex-end; margin-left: auto; color: #585B5E; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: 21px; -webkit-text-decoration-line: underline; text-decoration-line: underline; -webkit-text-decoration-style: solid; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; } .trn-modal .trn-modal-signin-content .signin-modern__box__form__forgot__button span { cursor: pointer; } .trn-modal .trn-modal-signin-content .signin-modern__box__form .signin-new-popup__right-side__sub-section { margin: 0; } .trn-modal .trn-modal-signin-content .signin-modern__box__form .signin-new-popup__right-side__sub-section .signin-new-popup__right-side__sub-section__agreement_ok, .trn-modal .trn-modal-signin-content .signin-modern__box__form .signin-new-popup__right-side__sub-section .signin-new-popup__right-side__sub-section #agreement_ok:checked ~ .signin-new-popup__right-side__sub-section__agreement_ok { color: #1D1E20 !important; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: 19px; padding-left: 37px; } .trn-modal .trn-modal-signin-content .signin-modern__box__form .signin-new-popup__right-side__sub-section .signin-new-popup__right-side__sub-section__agreement_ok a, .trn-modal .trn-modal-signin-content .signin-modern__box__form .signin-new-popup__right-side__sub-section .signin-new-popup__right-side__sub-section #agreement_ok:checked ~ .signin-new-popup__right-side__sub-section__agreement_ok a { color: #2321FF !important; text-decoration: none; font-weight: 400 !important; } .trn-modal .trn-modal-signin-content .signin-modern__box__form .signin-new-popup__right-side__sub-section .signin-new-popup__right-side__sub-section__agreement_ok::before { top: 30%; width: 24px; height: 24px; border-color: #BCBEBF; border-radius: 4px; margin-right: 12px; cursor: pointer; } .trn-modal .trn-modal-signin-content .signin-modern__box__form .signin-new-popup__right-side__sub-section .signin-new-popup__right-side__sub-section__agreement_ok::after { top: 28%; cursor: pointer; } .trn-modal .trn-modal-signin-content .signin-modern__box__form__btn { display: -webkit-box; display: -ms-flexbox; display: flex; height: 56px; padding: 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; -ms-flex-item-align: stretch; align-self: stretch; border-radius: 8px; background: #01007F; cursor: pointer; } .trn-modal .trn-modal-signin-content .signin-modern__box__form__btn button { color: #FFF; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 500; line-height: 21px; background: transparent; border: none; width: 100%; height: 100%; text-align: center; } .trn-modal .trn-modal-signin-content .signin-modern__box__seperator { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 12px; margin: 24px 0; } .trn-modal .trn-modal-signin-content .signin-modern__box__seperator .line { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 1px; background: #D3D3D4; } .trn-modal .trn-modal-signin-content .signin-modern__box__seperator span { color: #585B5E; text-align: center; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: 21px; } .trn-modal .trn-modal-signin-content .signin-modern__box__social-btn { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 16px 0px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; -ms-flex-item-align: stretch; align-self: stretch; border-radius: 8px; border: 1px solid #E1E1EF; } .trn-modal .trn-modal-signin-content .signin-modern__box__social-btn #google-sign-up-trigger-for-mobile, .trn-modal .trn-modal-signin-content .signin-modern__box__social-btn #google-sign-in-trigger-for-mobile { display: -webkit-box; display: -ms-flexbox; display: flex; } .trn-modal .trn-modal-signin-content .signin-modern__box__social-btn button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; background: transparent; border: none; } .trn-modal .trn-modal-signin-content .signin-modern__box__social-btn img { display: -webkit-box; display: -ms-flexbox; display: flex; width: 24px; height: 24px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .trn-modal .trn-modal-signin-content .signin-modern__box__social-btn span { color: #585B5E; font-family: Inter; font-size: 18px; font-style: normal; font-weight: 500; line-height: 24px; } .trn-modal .trn-modal-signin-content .signin-modern__footer { width: 100%; border-top: 1px solid #E1E1EF; margin-top: 24px; } .trn-modal .trn-modal-signin-content .signin-modern__footer__box { padding: 24px 24px 54px 24px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; -ms-flex-wrap: wrap; flex-wrap: wrap; } .trn-modal .trn-modal-signin-content .signin-modern__footer__box span { color: #1D1E20; font-family: Inter; font-size: 18px; font-style: normal; font-weight: 500; line-height: 24px; } .trn-modal .trn-modal-signin-content .signin-modern__footer__box__login-btn { color: #2563EB; font-family: Inter; font-size: 18px; font-style: normal; font-weight: 500; line-height: 24px; border: none; background: transparent; } @media screen and (max-width: 1023px) { .trn-modal .trn-modal-signin-content { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: transparent; } .trn-modal .trn-modal-signin-content .signin-modern__wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; max-height: 80vh; height: 100%; min-height: 70vh; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-negative: 0; flex-shrink: 0; border-radius: 16px 16px 0px 0px; background: #FFF; position: fixed; bottom: 0; max-width: 100%; } .trn-modal .trn-modal-signin-content .signin-modern__wrapper .forget-password { padding: 0; margin: 0; width: 100%; } .trn-modal .trn-modal-signin-content .signin-modern__wrapper .forget-password .forget-password-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 22px 12px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; border-bottom: 1px solid #E4E6E9; } .trn-modal .trn-modal-signin-content .signin-modern__wrapper .forget-password .forget-password-header .forget-password-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0 36px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #1D1E20; text-align: center; -webkit-font-feature-settings: 'liga' off, 'clig' off; font-feature-settings: 'liga' off, 'clig' off; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 600; line-height: 21px; width: 100%; } .trn-modal .trn-modal-signin-content .signin-modern__wrapper .forget-password__container { padding: 16px 24px; width: 100%; } .trn-modal .trn-modal-signin-content .signin-modern__wrapper .forget-password__container__header-wrapper { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 8px; margin-bottom: 24px; } .trn-modal .trn-modal-signin-content .signin-modern__wrapper .forget-password__container__header-wrapper__title { color: #1D1E20; font-family: "Sofia Sans"; font-size: 26px; font-style: normal; font-weight: 700; line-height: 34px; } .trn-modal .trn-modal-signin-content .signin-modern__wrapper .forget-password__container__header-wrapper__description { color: #585B5E; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: 21px; } .trn-modal .trn-modal-signin-content .signin-modern__wrapper .forget-password__container input { display: -webkit-box; display: -ms-flexbox; display: flex; height: 56px; padding: 0px 16px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; -ms-flex-item-align: stretch; align-self: stretch; border-radius: 8px; border: 1px solid #BCBEBF; background: #FFF; width: 100%; color: #909294; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: 21px; } .trn-modal .trn-modal-signin-content .signin-modern__wrapper .forget-password__container input:-webkit-autofill { background-color: #fff !important; -webkit-box-shadow: 0 0 0 1000px white inset !important; -webkit-text-fill-color: #000 !important; -webkit-transition: background-color 5000s ease-in-out 0s; -o-transition: background-color 5000s ease-in-out 0s; transition: background-color 5000s ease-in-out 0s; color: #909294 !important; -webkit-text-fill-color: #909294 !important; font-family: Inter, sans-serif !important; } .trn-modal .trn-modal-signin-content .signin-modern__wrapper .forget-password__container input:not(:placeholder-shown), .trn-modal .trn-modal-signin-content .signin-modern__wrapper .forget-password__container input:placeholder-shown, .trn-modal .trn-modal-signin-content .signin-modern__wrapper .forget-password__container input:valid, .trn-modal .trn-modal-signin-content .signin-modern__wrapper .forget-password__container input[value]:not([value=""]), .trn-modal .trn-modal-signin-content .signin-modern__wrapper .forget-password__container input.filled { background-color: #fff; font-family: Inter, sans-serif !important; color: #909294 !important; } .trn-modal .trn-modal-signin-content .signin-modern__wrapper .forget-password__container .forget-password__container__btn { display: -webkit-box; display: -ms-flexbox; display: flex; height: 56px; padding: 24px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; -ms-flex-item-align: stretch; align-self: stretch; border-radius: 8px; background: #01007F; cursor: pointer; } .trn-modal .trn-modal-signin-content .signin-modern__wrapper .forget-password__container .forget-password__container__btn button { color: #FFF; text-align: right; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 500; line-height: 21px; background: transparent; border: none; text-align: center; } .trn-modal .trn-modal-signin-content .signin-modern__box { width: 100%; padding: 24px 32px 0 32px; max-width: 420px; } .trn-modal .trn-modal-signin-content .signin-modern__box__header { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .trn-modal .trn-modal-signin-content .signin-modern__box__header__close { justify-self: flex-end; margin-left: auto; display: -webkit-box; display: -ms-flexbox; display: flex; width: 32px; height: 32px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 64px; background: #E0E0E0; } .trn-modal .trn-modal-signin-content .signin-modern__box__header__close::after { content: "\e92c"; font-family: turna; position: relative; font-size: 16px; width: 16px; height: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #585B5E; } .trn-modal .trn-modal-signin-content .signin-modern__box__logo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; margin-bottom: 40px; } .trn-modal .trn-modal-signin-content .signin-modern__box__logo img { width: 180px; height: 36px; padding: 0px 4.005px 0px 0px; } .trn-modal .trn-modal-signin-content .signin-modern__box__form { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 16px; margin: 0; } .trn-modal .trn-modal-signin-content .signin-modern__box__form__inputs-wrapper { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 16px; width: 100%; } .trn-modal .trn-modal-signin-content .signin-modern__box__form__inputs-wrapper__password-wrapper { position: relative; width: 100%; } .trn-modal .trn-modal-signin-content .signin-modern__box__form__inputs-wrapper__password-wrapper input { width: 100%; padding-right: 40px; } .trn-modal .trn-modal-signin-content .signin-modern__box__form__inputs-wrapper__password-wrapper i { font-family: "Font Awesome 6 Pro" !important; position: absolute; right: 16px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer; color: #909294; font-size: 16px; } .trn-modal .trn-modal-signin-content .signin-modern__box__form__inputs-wrapper input { display: -webkit-box; display: -ms-flexbox; display: flex; height: 56px; padding: 0px 16px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; -ms-flex-item-align: stretch; align-self: stretch; border-radius: 8px; border: 1px solid #BCBEBF; background: #FFF; width: 100%; color: #909294; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: 21px; } .trn-modal .trn-modal-signin-content .signin-modern__box__form__inputs-wrapper input:-webkit-autofill { background-color: #fff !important; -webkit-box-shadow: 0 0 0 1000px white inset !important; -webkit-text-fill-color: #000 !important; -webkit-transition: background-color 5000s ease-in-out 0s; -o-transition: background-color 5000s ease-in-out 0s; transition: background-color 5000s ease-in-out 0s; color: #909294 !important; -webkit-text-fill-color: #909294 !important; font-family: Inter, sans-serif !important; } .trn-modal .trn-modal-signin-content .signin-modern__box__form__inputs-wrapper input:not(:placeholder-shown), .trn-modal .trn-modal-signin-content .signin-modern__box__form__inputs-wrapper input:placeholder-shown, .trn-modal .trn-modal-signin-content .signin-modern__box__form__inputs-wrapper input:valid, .trn-modal .trn-modal-signin-content .signin-modern__box__form__inputs-wrapper input[value]:not([value=""]), .trn-modal .trn-modal-signin-content .signin-modern__box__form__inputs-wrapper input.filled { background-color: #fff; font-family: Inter, sans-serif !important; color: #909294 !important; } .trn-modal .trn-modal-signin-content .signin-modern__box__form__inputs-wrapper__signup-name-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; } .trn-modal .trn-modal-signin-content .signin-modern__box__form__inputs-wrapper__signup-password-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; } .trn-modal .trn-modal-signin-content .signin-modern__box__form__forgot { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } .trn-modal .trn-modal-signin-content .signin-modern__box__form__forgot__button { -ms-flex-item-align: end; align-self: flex-end; margin-left: auto; color: #585B5E; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: 21px; -webkit-text-decoration-line: underline; text-decoration-line: underline; -webkit-text-decoration-style: solid; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; } .trn-modal .trn-modal-signin-content .signin-modern__box__form .signin-new-popup__right-side__sub-section { margin: 0; } .trn-modal .trn-modal-signin-content .signin-modern__box__form .signin-new-popup__right-side__sub-section .signin-new-popup__right-side__sub-section__agreement_ok, .trn-modal .trn-modal-signin-content .signin-modern__box__form .signin-new-popup__right-side__sub-section .signin-new-popup__right-side__sub-section #agreement_ok:checked ~ .signin-new-popup__right-side__sub-section__agreement_ok { color: #1D1E20 !important; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: 19px; padding-left: 37px; } .trn-modal .trn-modal-signin-content .signin-modern__box__form .signin-new-popup__right-side__sub-section .signin-new-popup__right-side__sub-section__agreement_ok a, .trn-modal .trn-modal-signin-content .signin-modern__box__form .signin-new-popup__right-side__sub-section .signin-new-popup__right-side__sub-section #agreement_ok:checked ~ .signin-new-popup__right-side__sub-section__agreement_ok a { color: #2321FF !important; text-decoration: none; font-weight: 400 !important; } .trn-modal .trn-modal-signin-content .signin-modern__box__form .signin-new-popup__right-side__sub-section .signin-new-popup__right-side__sub-section__agreement_ok::before { top: 30%; width: 24px; height: 24px; border-color: #BCBEBF; border-radius: 4px; margin-right: 12px; } .trn-modal .trn-modal-signin-content .signin-modern__box__form .signin-new-popup__right-side__sub-section .signin-new-popup__right-side__sub-section__agreement_ok::after { top: 28%; } .trn-modal .trn-modal-signin-content .signin-modern__box__form__btn { display: -webkit-box; display: -ms-flexbox; display: flex; height: 56px; padding: 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; -ms-flex-item-align: stretch; align-self: stretch; border-radius: 8px; background: #01007F; cursor: pointer; } .trn-modal .trn-modal-signin-content .signin-modern__box__form__btn button { color: #FFF; text-align: center; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 500; line-height: 21px; background: transparent; border: none; } .trn-modal .trn-modal-signin-content .signin-modern__box__seperator { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 12px; margin: 24px 0; } .trn-modal .trn-modal-signin-content .signin-modern__box__seperator .line { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 1px; background: #D3D3D4; } .trn-modal .trn-modal-signin-content .signin-modern__box__seperator span { color: #585B5E; text-align: center; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: 21px; } .trn-modal .trn-modal-signin-content .signin-modern__box__social-btn { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 16px 0px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; -ms-flex-item-align: stretch; align-self: stretch; border-radius: 8px; border: 1px solid #E1E1EF; } .trn-modal .trn-modal-signin-content .signin-modern__box__social-btn button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; background: transparent; border: none; } .trn-modal .trn-modal-signin-content .signin-modern__box__social-btn img { display: -webkit-box; display: -ms-flexbox; display: flex; width: 24px; height: 24px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .trn-modal .trn-modal-signin-content .signin-modern__box__social-btn span { color: #585B5E; font-family: Inter; font-size: 18px; font-style: normal; font-weight: 500; line-height: 24px; } .trn-modal .trn-modal-signin-content .signin-modern__footer { width: 100%; border-top: 1px solid #E1E1EF; margin-top: 24px; max-width: 420px; } .trn-modal .trn-modal-signin-content .signin-modern__footer__box { padding: 24px 24px 54px 24px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; } .trn-modal .trn-modal-signin-content .signin-modern__footer__box span { color: #1D1E20; font-family: Inter; font-size: 18px; font-style: normal; font-weight: 500; line-height: 24px; } .trn-modal .trn-modal-signin-content .signin-modern__footer__box__login-btn { color: #2563EB; font-family: Inter; font-size: 18px; font-style: normal; font-weight: 500; line-height: 24px; border: none; background: transparent; } } .trn-popover-content { z-index: 1051; border-radius: 8px; background-color: #fff; padding: 0; min-width: 190px; } .trn-popover-content .ul-links > li { padding: 10px 20px; text-align: center; border-bottom: 1px solid #DDDDDD; font-size: 13px; } .trn-popover-content .ul-links > .last-li { border-bottom: none; } .trn-popover-content .ul-links > li > a:link, .trn-popover-content .ul-links > li > a:visited, .trn-popover-content .ul-links > li > a:active { color: #000000; text-decoration: none; } /*POPUP OVER USER INFO*/ .trn-popover-content.popover-user-info { width: 270px; } .trn-popover-content.popover-user-info > div.items { padding: 10px 5px; background-color: #F8F9FB; border-bottom: 1px solid #DDDDDD; border-top-right-radius: 8px; border-top-left-radius: 8px; overflow: hidden; } .trn-popover-content.popover-user-info > div.items > .item { padding: 3px 5px; font-size: 13px; overflow: hidden; } .trn-popover-content.popover-user-info > div.items > .item > .point-description { display: block; float: left; } .trn-popover-content.popover-user-info > div.items > .item > span { color: #AAAAAA; display: block; float: right; } .trn-popover-content.popover-user-info > .ul-links > .left { border: none; text-align: left; padding: 6px 20px; } .trn-popover-content.popover-user-info > .ul-links > li { cursor: pointer; } .trn-popover-content.popover-user-info > .ul-links > li a { display: block; width: 100%; } .trn-popover-content.popover-user-info > .ul-links > .border-bottom { border-bottom: 1px solid #DDDDDD; } .trn-popover-content.popover-user-info > .ul-links > .right { text-align: right; } .trn-popover-content.popover-user-info > .ul-links > li:hover { background-color: #F8F9FB; } .popup-container { display: none; } .popup-container .popup-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 2000; opacity: 0.5; background: #000000; } .popup-container .popup-frame { z-index: 999999; width: 500px; background-color: #fff; } .popup-container.pos-center .popup-frame, .popup-container.pos-bottom .popup-frame, .popup-container.pos-top .popup-frame { position: fixed; } .popup-container.active .popup-frame { display: block; } .popup-container .popup-frame { border-radius: 8px; } .popup-container .popup-frame .popup-title { padding: 10px 20px 5px; font-size: 18px; font-size: 16px; line-height: 1.5; letter-spacing: .02em; } .popup-container .popup-frame .popup-content { padding: 10px 10px 20px 10px; line-height: 20px; font-size: 14px; } .popup-container .popup-frame .popup-close { cursor: pointer; font-size: 35px; line-height: 21px; position: absolute; right: 0; top: 0; background: #01007F; color: #fff; padding: 5px; border-radius: 0 6px 0 12px; } .popup-container.CornerLight .popup-frame { background: #fff; color: #fff; } .popup-container.CornerLight .popup-title { color: #000000; border-bottom: 1px solid #DDDDDD; font-weight: 600; } .popup-container.CornerLight .popup-content { color: #AAAAAA; font-size: 13px; font-weight: 500; display: block; } .popup-container.CornerDark .popup-title { color: #000000; border-bottom: 1px solid #DDDDDD; } .popup-container.CornerDark .popup-content { color: #AAAAAA; font-size: 13px; font-weight: 500; display: block; padding: 10px 20px; } .popup-container.CornerLightImageAndAction .popup-frame { background-color: #fff; } .popup-container.CornerLightImageAndAction .popup-title { background: #fff; color: #000000; border-bottom: 1px solid #DDDDDD; font-size: 16px; font-weight: 600; padding-bottom: 5px; margin-top: 20px; } .popup-container.CornerLightImageAndAction .popup-content { color: #000000; font-size: 12px; font-weight: 300; display: block; padding: 0 10px 7px; } .CornerLightImageAndAction .inl-one { width: 28%; display: inline-block; vertical-align: middle; } .CornerLightImageAndAction .inl-two { width: 70%; display: inline-block; vertical-align: middle; } .CornerLightImageAndAction .inl-two div { color: #AAAAAA; padding-bottom: 6px; font-weight: 500; font-size: 13px; } .CornerLightImageAndAction a { background-color: #01007F; padding: 6px 23px; border-radius: 5px 0 5px 0; color: #fff; text-decoration: none; font-size: 13px; -webkit-transition-property: background-color,color; -o-transition-property: background-color,color; transition-property: background-color,color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; outline: none; margin: 0 auto; font-weight: 600; } .form-row { margin-bottom: 20px; } .form-row--col-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .form-row--col-1 > * { -webkit-box-flex: 0; -ms-flex: 0 0 calc(100% / 1); flex: 0 0 calc(100% / 1); margin-bottom: 0; } .form-row--col-1 > *:not(:last-child) { margin-right: 0; } .form-item { margin-bottom: 0; } .form-item__label { font-size: 13px; font-weight: 600; margin-bottom: 5px; } .form-item__input { position: relative; } .form-item__input input { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .form-item__input input:not([type=checkbox]) { width: 100%; height: 48px; padding: 0 15px; border: 1px solid #DDDDDD; border-radius: 8px; } * { -webkit-box-sizing: border-box; box-sizing: border-box; } .form-item__input input:not([type=checkbox])::-webkit-input-placeholder { color: rgba(72, 72, 72, 0.5); padding-left: 5px; } .form-item__input input:not([type=checkbox]):-ms-input-placeholder { color: rgba(72, 72, 72, 0.5); padding-left: 5px; } .form-item__input input:not([type=checkbox])::-ms-input-placeholder { color: rgba(72, 72, 72, 0.5); padding-left: 5px; } .form-item__input input:not([type=checkbox])::placeholder { color: rgba(72, 72, 72, 0.5); padding-left: 5px; } .form-item__input input:not([type=checkbox])[disabled] { background-color: #F8F9FB; border: 0; } .form-item__input input:not([type=checkbox]):focus { -webkit-box-shadow: 0 0 0 3px rgba(140, 140, 140, 0.3); box-shadow: 0 0 0 3px rgba(140, 140, 140, 0.3); } /*.trn-modal > .trn { max-width: 940px !important; padding: unset; }*/ .trn.signin-new-popup { padding: unset; max-width: 940px !important; } .signin-new-popup { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; border-radius: 8px; overflow: hidden; -webkit-box-shadow: unset !important; -webkit-box-shadow: unset !important; box-shadow: unset !important; box-shadow: unset !important; margin: 100px auto !important; position: relative; } .signin-new-popup__close { position: absolute; right: 0; top: 0; width: 40px; height: 40px; background-color: #01007F; border-radius: 0 0 0px 12px; font-size: 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #fff; cursor: pointer; } .signin-new-popup__left-side, .signin-new-popup__right-side { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .signin-new-popup__left-side { background-color: #01007F; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 50px; } .signin-new-popup__left-side__header { font-size: 36px; font-weight: 500; } .signin-new-popup__left-side__sub-header { font-size: 40px; font-weight: 500; margin-top: 10px; margin-bottom: 40px; } .signin-new-popup__left-side__btn:last-child { margin-top: 20px; } .signin-new-popup__left-side__btn button { background-color: #fff; color: #01007F; height: 65px; width: 264px; border-radius: 65px; border: none; cursor: pointer; font-weight: bold; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .signin-new-popup__left-side > div { text-align: center; } .signin-new-popup__right-side { padding: 50px; } body[dir='rtl'] .signin-new-popup__right-side__sub-section__agreement_ok { padding-left: unset; padding-right: 25px; } body[dir='rtl'] .signin-new-popup__right-side__sub-section__agreement_ok::before { left: unset; right: 0; } body[dir='rtl'] .signin-new-popup__right-side__sub-section__agreement_ok::after { left: unset; right: -7px; } body[dir='rtl'] .signin-new-popup__right-side__sub-section__remember-me { padding-left: unset; padding-right: 25px; } body[dir='rtl'] .signin-new-popup__right-side__sub-section__remember-me::before { left: unset; right: 0; } body[dir='rtl'] .signin-new-popup__right-side__sub-section__remember-me::after { left: unset; right: -7px; } body[dir='rtl'] .trn-modal-close.signin-new-popup__close { background-color: #01007F; right: unset; left: 0; border-radius: 6px 0 12px 0px; } body[dir='rtl'] .trn-modal-close.signin-new-popup__close .trn-close { color: #fff; } body[dir='rtl'] .signin-new-popup__right-side--grow .gap-20 { gap: 20px; } body[dir='rtl'] .signin-new-popup__right-side--grow .margin-0 .form-item { margin-right: 0 !important; margin-left: 0 !important; } .signin-new-popup__right-side__sub-section { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 30px; margin-top: 32px; } .signin-new-popup__right-side__sub-section__remember-me { padding-left: 25px; } .signin-new-popup__right-side__sub-section__remember-me::before { content: ""; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 16px; height: 16px; border: 1px solid #000000; } .signin-new-popup__right-side__sub-section__remember-me::after { content: "\e936"; position: absolute; font-size: 24px; color: #01007F; left: 0; top: -10px; font-family: turna; display: none; } #rememberme { display: none; } .signin-new-popup__right-side__sub-section label[for="rememberme"] { position: relative; } .signin-new-popup__right-side__sub-section #rememberme:checked ~ .signin-new-popup__right-side__sub-section__remember-me::after { display: block; } .signin-new-popup__right-side__sub-section #rememberme:checked ~ .signin-new-popup__right-side__sub-section__remember-me::before { border-color: #01007F; } .signin-new-popup__right-side__sub-section #rememberme:checked ~ .signin-new-popup__right-side__sub-section__remember-me { color: #01007F; } .signin-new-popup__right-side__btn:not(:last-of-type) { margin-bottom: 20px; } .signin-new-popup__right-side__btn button { border: none; color: #fff; height: 65px; width: 100%; border-radius: 8px; background: #01007F; cursor: pointer; font-weight: bold; } .signin-new-popup__right-side__btn--white button { background: #fff !important; color: #01007F !important; border: 1px solid #01007F !important; } #forgot-password-id { text-decoration: none; color: #000000; } #login-form { margin-bottom: 20px; } .form-row--col-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .form-row--col-2 > * { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; -ms-flex-preferred-size: calc((100% - (2 - 1) * 20px) / 2); flex-basis: calc((100% - (2 - 1) * 20px) / 2); margin-bottom: 20px; } .form-row--col-2 > *:not(:last-child) { margin-right: 20px; } .form-row--col-2 > *:nth-child(2n) { margin-right: 0; } .signin-new-popup__left-side--grow { -webkit-box-flex: 1 !important; -ms-flex: 1 !important; flex: 1 !important; -webkit-box-flex: 3 !important; -ms-flex-positive: 3 !important; flex-grow: 3 !important; } .signin-new-popup__right-side--grow { -webkit-box-flex: 2 !important; -ms-flex: 2 !important; flex: 2 !important; -webkit-box-flex: 3 !important; -ms-flex-positive: 3 !important; flex-grow: 3 !important; } .signin-new-popup--space-top { margin: 50px auto !important; } .signin-new-popup__right-side__sub-section label[for="agreement_ok"] { position: relative; } .signin-new-popup__right-side__sub-section #agreement_ok:checked ~ .signin-new-popup__right-side__sub-section__agreement_ok::after { display: block; } .signin-new-popup__right-side__sub-section #agreement_ok:checked ~ .signin-new-popup__right-side__sub-section__agreement_ok::before { border-color: #01007F; } .signin-new-popup__right-side__sub-section #agreement_ok:checked ~ .signin-new-popup__right-side__sub-section__agreement_ok { color: #01007F; } .signin-new-popup__right-side__sub-section__agreement_ok { padding-left: 25px; } .signin-new-popup__right-side__sub-section__agreement_ok::before { content: ""; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 16px; height: 16px; border: 1px solid #000000; } .signin-new-popup__right-side__sub-section__agreement_ok::after { content: "\e936"; position: absolute; font-size: 24px; color: #01007F; left: 0; top: 44%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-family: turna; display: none; } .signin-new-popup__right-side__sub-section #agreement_ok:checked ~ .signin-new-popup__right-side__sub-section__agreement_ok a { color: #01007F; font-weight: bold; } label.invalid { font-size: 11px !important; color: #01007F !important; font-weight: bold; position: absolute; bottom: -25px; } .form-item { position: relative; } .invalid[type='text'], .invalid[type='password'], .invalid[type='email'] { background-color: #F8F9FB !important; border-color: #01007F !important; } .form-row--col-2 > * { margin-bottom: unset !important; } .trn.forget-password { max-width: 600px !important; border-radius: 8px; margin: 100px auto; } .forget-password__container { padding: 60px 40px; } .forget-password__container__header-info { margin-bottom: 20px; font-size: 16px; color: #000000; } .forget-password__container__btn button { border: none; color: #fff; height: 65px; width: 100%; border-radius: 8px; background: #01007F; cursor: pointer; font-weight: bold; } .trn-modal > .trn { -webkit-box-shadow: unset !important; -webkit-box-shadow: unset !important; box-shadow: unset !important; box-shadow: unset !important; } .reservation-popup { padding: 60px 50px !important; border-radius: 8px; } .reservation-popup__points { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: start; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .reservation-popup__points__item > div:not(:last-of-type) { margin-bottom: 20px; } .reservation-popup__points__item .form-row { margin-bottom: unset !important; } .reservation-popup__points__item { color: #000000; font-size: 16px; } .reservation-popup__points__item--header { font-weight: 600; } .bottom-line { position: relative; } .bottom-line::after { content: ""; position: absolute; width: 100%; height: 1px; background-color: #F8F9FB; bottom: -20px; left: 0; } .reservation-popup__buttons { margin-top: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 20px; padding: 0 10px; } .reservation-popup__buttons__btn { -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%; } .reservation-popup__buttons__btn button { width: 100%; padding: 20px 0; } .reservation-popup__buttons__btn .passive { border: 1px solid #01007F; color: #01007F; background-color: #fff; } .reservation-popup__buttons__btn .active { border: none; color: #fff; background-color: #01007F; } .reservation-popup__buttons__btn .active, .reservation-popup__buttons__btn .passive { font-weight: bold; border-radius: 8px; } .reservation-popup__footer { color: #AAAAAA; margin-top: 40px; font-size: 16px; } .trn.reservation-popup { max-width: 768px !important; } .reservation-popup__points__item__value { position: absolute; top: 50%; right: 10px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); color: #01007F; font-weight: bold; } .cancel-reservation-info { color: #000000; font-weight: 500; font-size: 16px; } .cancel-reservation-btn { margin-top: 30px; } .cancel-reservation-btn button { width: 100%; padding: 20px 0; border-radius: 8px; background-color: #01007F; color: #fff; font-weight: bold; font-size: 16px; border: none; } #cancel-reservation-dialog .trn.reservation-popup { max-width: 568px !important; } .new-popup { position: relative; border-radius: 8px; } .new-popup::-webkit-scrollbar { width: 0px; } .new-popup::-webkit-scrollbar-track { background: #f9f9ff; border-radius: 6px 0 0 6px; } .new-popup::-webkit-scrollbar-thumb { background: #01007F; border-radius: 6px 0 0 6px; } .new-popup-flex-layout { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-top: unset; } .new-popup__close { position: absolute; display: inline-block; right: 0; top: 0; width: 40px; height: 40px; background-color: #01007F; border-radius: 0 0 0px 12px; font-size: 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #fff; cursor: pointer; z-index: 99; } .new-popup__close:after { content: "\e92c"; font-family: turna; } body[dir='rtl'] .popup-container .popup-frame .popup-close { right: unset; left: 0; border-radius: 6px 0 12px 0; } @media (min-width: 769px) { #google-sign-up-trigger-for-mobile, #google-sign-in-trigger-for-mobile { display: none; } } /*........ FOOTER .......*/ .trn-content > .trn-default-footer { position: relative; display: inline-block; width: 100%; padding: 20px 0; margin-top: 80px; } .trn-default-footer > .btn-more-info:link, .trn-default-footer > .btn-more-info:visited, .trn-default-footer > .btn-more-info:active { border-radius: 50px; border: 1px solid #2321FF; padding: 20px 30px; text-decoration: none; color: #2321FF; font-size: 16px; } .trn-default-footer > .btn-more-info:hover { border: 1px solid #DDDDDD; color: #DDDDDD; } .trn-main-footer { padding: 10px 4% 15px; width: 100%; /*background: url(https://res.cloudinary.com/turna/image/upload/q_auto,f_auto/Images/General/footer.png) bottom center no-repeat;*/ /* background-color: #2b2d2e;*/ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #fff; } .trn-main-footer .ul-wrapper { max-width: 1073px; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; } .trn-main-footer .ul-wrapper > ul { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; list-style: none; padding: 15px; margin: 0; } .trn-main-footer .ul-wrapper > ul > li .footer-title { font-weight: 600; font-size: 18px; padding: 15px 0 10px; text-rendering: optimizelegibility; } .trn-main-footer .ul-wrapper > ul > li > a:link, .trn-main-footer .ul-wrapper > ul > li > a:visited, .trn-main-footer .ul-wrapper > ul > li > a:active { font-size: 14px; color: #AAAAAA; text-decoration: none; padding: 1px 0; display: inline-block; } .trn-main-footer .ul-wrapper > ul > li > a:hover { color: #2321FF; } .trn-main-footer > .copyright { display: inline-block; width: 98%; padding: 20px 0 0; text-align: center; color: #AAAAAA; font-size: 12px; border-top: 1px solid #DDDDDD; margin: 65px 1% 0; position: relative; } .trn-main-footer > .copyright > .social { position: absolute; background-color: #2b2d2d; display: block; width: 280px; left: 50%; margin-left: -140px; top: -11px; } .trn-main-footer > .copyright > .social a { margin: 0 5px; text-decoration: none; } .trn-main-footer > .copyright div { margin-top: 10px; } .trn-main-footer > .copyright > .footer-info { width: 100%; display: inline-block; padding: 45px 0 10px; position: relative; max-width: 1215px; } @media screen and (max-width: 768px) { .trn-main-footer > .copyright > .footer-info > .footer-info-app { left: 35%; display: inline-block; float: none; position: absolute; z-index: 1; padding-top: 100px; } .trn-main-footer > .copyright > .footer-info > .footer-info-side { width: 48%; display: block; float: left; overflow: hidden; margin-bottom: 30px; } .trn-main-footer .ul-wrapper > ul > li .footer-title { font-size: 16px; } .trn-main-footer .ul-wrapper > ul > li:not(.footer-title) { font-size: 13px; } } @media screen and (min-width: 769px) { .trn-main-footer > .copyright > .footer-info > .footer-info-app { width: 20%; display: block; float: left; } .trn-main-footer > .copyright > .footer-info > .footer-info-side { width: 40%; display: block; float: left; overflow: hidden; margin-top: 20px; } } @media screen and (min-width: 1025px) { .trn-main-footer > .copyright > .footer-info > .footer-info-app a { margin: 0 5px; } .trn-main-footer > .copyright > .footer-info > .footer-info-app { width: 30%; display: block; float: left; } .trn-main-footer > .copyright > .footer-info > .footer-info-side { width: 35%; display: block; float: left; overflow: hidden; padding-top: 0px; } } .trn-main-footer > .copyright > .footer-info > .footer-info-side > p { padding: 0; margin: 0; display: block; line-height: 13px; font-size: 11px; color: #AAAAAA; } .trn-main-footer > .copyright > .footer-info > .footer-info-side > p.text-left { text-align: left; } .trn-main-footer > .copyright > .footer-info > .footer-info-side > p.text-right { text-align: right; } .trn-main-footer > .copyright > .footer-info > .footer-info-side .trn-sprt-logo-white { margin: 0 10px 10px; } .trn-main-footer > .copyright > .footer-info > .footer-info-side > .iata { background-position: -82px -127px; width: 52px; height: 50px; float: left; } .trn-main-footer > .copyright > .footer-info > .footer-info-side > .tursab { background-position: -5px -127px; width: 72px; height: 50px; float: right; } .trn-main-footer > .copyright > .footer-info > .footer-info-app > a { margin-top: 10px; display: inline-block; } .trn-main-footer > .copyright > .footer-info > .footer-info-app > a > .android { background-position: -5px -90px; width: 131px; height: 43px; } .trn-main-footer > .copyright > .footer-info > .footer-info-app > a > .ios { background-position: -5px -42px; width: 131px; height: 43px; } .social .st0 { fill: #868484; } .social .st1 { fill: #D7D7D7; } .trn-main-footer > .copyright > .social > a:hover .st0 { fill: #D7D7D7; } .footer { font-size: 13px; padding: 60px 48px 0 48px !important; background-color: #fff !important; color: #000000; } @media (min-width: 992px) { .footer { font-size: 14px; } } .footer__left { margin-bottom: 30px; } @media (min-width: 768px) { .footer__inner { display: -webkit-box; display: -ms-flexbox; display: flex; } .footer__inner .footer__left { padding-right: 30px; margin-bottom: 0; } } @media (min-width: 992px) { .footer__inner .footer__left { -webkit-box-flex: 0; -ms-flex: 0 0 300px; flex: 0 0 300px; margin-right: 60px; } .footer__inner .footer__right { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } } .footer__logo { margin-bottom: 30px; } .footer__logo img { width: 160px; height: auto; } @media (max-width: 768px) { .footer__logo { text-align: center; } } .footer__app-download { margin-bottom: 30px; } .footer__app-download__description { font-size: 0.9em; margin-bottom: 15px; } .footer__app-download__buttons { padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; } .footer__app-download__buttons__item { width: 132px; height: 44px; } .footer__app-download__buttons__item.google { width: 150px; height: 44px; } .footer__app-download__buttons__item:not(:last-of-type) { margin-right: 15px; } .footer__app-download__buttons__item a { color: #000000; text-decoration: none; display: block; width: 100%; height: 100%; } .footer__app-download__buttons__item a img { width: 100%; height: 100%; } @media (max-width: 768px) { .footer__app-download { text-align: center; /*max-width: 300px;*/ margin: 0 16px 30px; } .footer__app-download__buttons { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .footer__list-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .footer__list-wrapper > * { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; -ms-flex-preferred-size: calc((100% - (2 - 1) * 30px) / 2); flex-basis: calc((100% - (2 - 1) * 30px) / 2); margin-bottom: 30px; } .footer__list-wrapper > *:not(:last-child) { margin-right: 30px; } .footer__list-wrapper > *:nth-child(2n) { margin-right: 0; } @media (min-width: 992px) { .footer__list-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .footer__list-wrapper > * { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; -ms-flex-preferred-size: calc((100% - (3 - 1) * 30px) / 3); flex-basis: calc((100% - (3 - 1) * 30px) / 3); margin-bottom: 30px; } .footer__list-wrapper > *:not(:last-child) { margin-right: 30px; } .footer__list-wrapper > *:nth-child(3n) { margin-right: 0; } } @media (min-width: 992px) { .footer__list-wrapper.home-footer-links { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .footer__list-wrapper.home-footer-links > * { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; -ms-flex-preferred-size: calc((100% - (4 - 1) * 30px) / 4); flex-basis: calc((100% - (4 - 1) * 30px) / 4); margin-bottom: 30px; } .footer__list-wrapper.home-footer-links > *:not(:last-child) { margin-right: 30px; } .footer__list-wrapper.home-footer-links > *:nth-child(4n) { margin-right: 0; } } .footer__list { padding: 0; list-style: none; } .footer__list__item { padding: 8px 0; } .footer__list__item.title { font-size: 1.2em; font-weight: bold; } .footer__list__item a { display: inline-block; color: #000000; line-height: 1.3; text-decoration: none; } .footer__list__item a:hover { color: #01007F; } .footer__list__item a.accent { position: relative; color: #01007F; font-weight: 600; } .footer__list__item a.accent::after { content: "\e928"; position: absolute; right: -16px; font-family: "turna"; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .footer__bottom { min-height: 100px; background-color: #01007F; } .footer__additional { margin-bottom: -60px !important; } .footer__trust { background-color: white; border-radius: 8px; padding: 30px; margin-bottom: 15px; -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); } .footer__trust__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media only screen and (max-width: 768px) { .footer__trust__item { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } .footer__trust__item:not(:last-of-type) { margin-right: 0; margin-bottom: 15px; } .footer__trust__item__figure { margin: 0; margin-right: 15px; width: 96px; } .footer__trust__item__figure img { display: block; width: 100%; } @media only screen and (max-width: 768px) { .footer__trust__item__figure.tursab { width: 120px; } } @media only screen and (max-width: 768px) { .footer__trust__item__figure.tursab__redirect img { width: 180px; height: 100px; } } @media only screen and (max-width: 375px) { .footer__trust__item__figure.tursab__redirect img { width: 160px; height: 100px; } } .footer__trust__item__description { color: #AAAAAA; font-size: 0.8em; } @media (min-width: 768px) { .footer__trust { display: -webkit-box; display: -ms-flexbox; display: flex; } .footer__trust__item { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .footer__trust__item:not(:last-of-type) { margin-right: 30px; margin-bottom: 0; } .footer__trust__item__figure.iata { width: 60px; } .footer__trust__item__figure.tch { width: 80px; } .footer__trust__item__figure.tursab__redirect img { width: 200px; height: 96px; } } .footer__copyright { color: #fff; text-align: center; } .footer__subscribe { margin-bottom: 30px; } .footer__subscribe__label { display: block; font-weight: bold; font-size: 1.1em; margin-bottom: 5px; } .footer__subscribe__button { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 40px; height: 100%; right: 0; top: 0; background-color: #01007F; font-size: 2em; color: white; cursor: pointer; } .footer__subscribe__form { position: relative; height: 40px; margin-bottom: 10px; border-radius: 8px; background-color: #F8F9FB; overflow: hidden; } .footer__subscribe__form:focus-within { -webkit-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2); } .footer__subscribe__form input { display: block; width: 100%; height: 100%; border: 0; outline: none; background-color: transparent; padding-left: 15px; padding-right: 60px; color: #000000; } .footer__subscribe__form input::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.5); } .footer__subscribe__form input:-ms-input-placeholder { color: rgba(0, 0, 0, 0.5); } .footer__subscribe__form input::-ms-input-placeholder { color: rgba(0, 0, 0, 0.5); } .footer__subscribe__form input::placeholder { color: rgba(0, 0, 0, 0.5); } .footer__subscribe__description { font-size: 0.9em; } @media (max-width: 768px) { .footer__subscribe { /*max-width: 300px;*/ margin: 0 16px 30px; text-align: center; } } .footer__follow-us { margin-bottom: 60px; } .footer__follow-us__icons { display: -webkit-box; display: -ms-flexbox; display: flex; list-style: none; margin: 0; padding: 0; gap: 32px; } .footer__follow-us__icons li { border-radius: 5px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .footer__follow-us__icons li:hover { background-color: rgba(0, 0, 0, 0.05); } .footer__follow-us__link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 40px; height: 40px; font-size: 2.8em; color: #000000; text-decoration: none; } .footer__follow-us__link i { font-family: "Font Awesome 6 Brands" !important; } @media (max-width: 768px) { .footer__follow-us__icons { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } body[dir="rtl"] .footer__list__item a.accent::after { content: "\e926"; right: unset; left: -16px; } body[dir="rtl"] .footer__app-download__buttons__item { margin-right: 0; margin-left: 15px; } body[dir="rtl"] .footer__subscribe__form input { padding-right: 15px; padding-left: 60px; } body[dir="rtl"] .footer__subscribe__button { right: unset; left: 0; } body[dir="rtl"] .footer__subscribe__button i { -webkit-transform: scale(-1); -ms-transform: scale(-1); transform: scale(-1); } body[dir="rtl"] .footer__follow-us__icons li { margin-right: 0; margin-left: 10px; } body[dir="rtl"] .footer__trust__item { margin-right: 0; margin-left: 30px; } body[dir="rtl"] .footer__trust__item__figure { margin-right: 0; margin-left: 15px; } body.tkfb .footer__bottom { background: -webkit-gradient(linear, left top, right top, color-stop(0, #2d2926), to(#a2aaad)); background: -webkit-linear-gradient(left, #2d2926 0, #a2aaad 100%); background: -o-linear-gradient(left, #2d2926 0, #a2aaad 100%); background: linear-gradient(to right, #2d2926 0, #a2aaad 100%); } body.teb .footer__bottom { background: #16bc5d !important; } .tursab__redirect--container { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 16px; } .tursab__redirect--container a { width: 200px; } @media only screen and (max-width: 768px) { .footer__right { padding: 16px; } } @media (min-width: 1025px) and (max-width: 1247px) { .footer { padding: 60px 48px 0 48px !important; } .footer__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .footer__left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } @media (min-width: 769px) and (max-width: 1024px) { .footer { padding: 60px 48px 0 48px !important; } .footer__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .footer__left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .footer__logo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .footer__app-download { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .footer__app-download__buttons { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .footer__subscribe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; } .footer__subscribe__label { -ms-flex-item-align: start; align-self: flex-start; } .footer__subscribe__form { width: 100%; } .footer__follow-us { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media (min-width: 1024px) and (max-width: 1248px) { .footer__list-wrapper.home-footer-links > * { margin-bottom: 120px; } .footer__bottom { min-height: 120px; } .footer__trust { margin-bottom: 24px; border-radius: 16px; } .footer__trust__item { color: #000000; font-size: 16px; font-weight: 500; } .footer__trust__item__description { color: #000000; font-size: 16px; font-weight: 500; } .footer__copyright { font-size: 16px; font-weight: 400; } .footer__list__item { padding: 12px 0; } .footer__list__item.title { padding: unset; } .footer__logo { margin-bottom: 48px; } .footer__app-download__description { margin-bottom: 8px; font-size: 16px; } .footer__app-download__buttons { gap: 8px; } .footer__app-download__buttons__item:not(:last-of-type) { margin: unset !important; } .footer__left { padding: unset !important; margin: unset !important; -webkit-box-flex: unset !important; -ms-flex: unset !important; flex: unset !important; gap: 32px; } .footer__subscribe { margin-bottom: 32px; } .footer__subscribe__form { height: 48px; margin-bottom: 8px; } .footer__subscribe__button { width: 48px; } .footer__subscribe__description { font-size: 16px; } .footer__follow-us__icons { gap: 32px; } .footer__follow-us__icons li:not(:last-of-type) { margin-right: unset !important; } .footer__inner { gap: 64px; } } @media (min-width: 768px) and (max-width: 1024px) { .footer__list-wrapper.home-footer-links > * { margin-bottom: 120px; } .footer__bottom { min-height: 120px; } .footer__trust { margin-bottom: 24px; border-radius: 16px; } .footer__trust__item { color: #000000; font-size: 16px; font-weight: 500; } .footer__trust__item__description { color: #000000; font-size: 16px; font-weight: 500; } .footer__copyright { font-size: 16px; font-weight: 400; } .footer__list__item { padding: 6px 0; } .footer__list__item.title { padding: unset; } .footer__logo { margin-bottom: 32px; } .footer__app-download__description { margin-bottom: 8px; font-size: 16px; } .footer__app-download__buttons { gap: 8px; } .footer__app-download__buttons__item:not(:last-of-type) { margin: unset !important; } .footer__left { padding: unset !important; margin: unset !important; -webkit-box-flex: unset !important; -ms-flex: unset !important; flex: unset !important; gap: 32px; } .footer__subscribe { margin-bottom: 32px; } .footer__subscribe__form { height: 48px; margin-bottom: 8px; } .footer__subscribe__button { width: 48px; } .footer__subscribe__description { font-size: 16px; } .footer__follow-us__icons { gap: 32px; } .footer__follow-us__icons li:not(:last-of-type) { margin-right: unset !important; } .footer__inner { gap: 64px; } .footer__follow-us__link i { font-size: 48px; } .footer__list-wrapper > * { -ms-flex-preferred-size: calc((100% / 3 )); flex-basis: calc((100% / 3 )); } .footer__list-wrapper { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .footer__list-wrapper > *:not(:last-child) { margin-right: unset !important; } } @media (max-width: 768px) { .footer { padding: 0 !important; } .footer__list-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .footer__trust { padding: 24px; } .footer__list-wrapper.home-footer-links > * { margin-bottom: 48px; } .footer__bottom { min-height: 120px; } .footer__trust { margin-bottom: 24px; border-radius: 16px; margin-left: 16px; margin-left: 16px; } .footer__trust__item { color: #000000; font-size: 16px; font-weight: 500; } .footer__trust__item__description { color: #000000; font-size: 16px; font-weight: 500; } .footer__copyright { font-size: 16px; font-weight: 400; } .footer__list__item { padding: 6px 0; } .footer__list__item.title { padding: unset; } .footer__logo { margin-bottom: 32px; } .footer__app-download { margin-bottom: 32px; margin-left: 0 !important; margin-right: 0 !important; } .footer__app-download__description { margin-bottom: 8px; font-size: 16px; } .footer__app-download__buttons { gap: 8px; } .footer__app-download__buttons__item:not(:last-of-type) { margin: unset !important; } .footer__left { padding: unset !important; margin: unset !important; -webkit-box-flex: unset !important; -ms-flex: unset !important; flex: unset !important; gap: 32px; } .footer__subscribe { margin-bottom: 32px; } .footer__subscribe__form { height: 48px; margin-bottom: 8px; } .footer__subscribe__button { width: 48px; } .footer__subscribe__description { font-size: 16px; } .footer__follow-us { margin-bottom: 32px; } .footer__follow-us__icons { gap: 32px; } .footer__follow-us__icons li:not(:last-of-type) { margin-right: unset !important; } .footer__inner { gap: 64px; } .footer__follow-us__link i { font-size: 48px; } .footer__trust__item:not(:last-of-type) { gap: 8px; } .footer__trust__item__figure { margin-right: unset !important; } .tursab__redirect--container { gap: 24px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 32px; } .footer__trust__item__figure.tursab__redirect { width: 219px; } .tursab__redirect--container a { width: 219px; } .footer__trust__item__figure.tursab__redirect img { width: 219px; } .footer__subscribe { text-align: start; margin-left: 0 !important; margin-right: 0 !important; } .footer__subscribe__description { text-align: center; } .footer__inner { padding: 0 16px !important; } } @media (max-width: 425px) { .footer__trust__item__figure.tursab__redirect { width: 160px !important; } .tursab__redirect--container a { width: 160px !important; } .footer__trust__item__figure.tursab__redirect img { width: 160px; } } .footer__inner { padding: 0 48px; } .footer__follow-us__link i { font-size: 28px; } .tursab-agancy-title-mobile { display: block; text-align: center; color: #ffffff4f; font-size: 12px; font-weight: 400; } @media (min-width: 1024px) { .tursab-agancy-title-mobile { display: none; } } .snackbar-container { position: fixed; -webkit-box-shadow: 0px 1px 8px rgba(18, 5, 41, 0.15); box-shadow: 0px 1px 8px rgba(18, 5, 41, 0.15); min-height: 80px; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 6px; padding: 30px; display: none; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: #fff; z-index: 999; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; -webkit-transform: translateY(200%); -ms-transform: translateY(200%); transform: translateY(200%); } @media (min-width: 320px) and (max-width: 480px) { .snackbar-container { padding: 20px !important; } .snackbar-container.isOpen { bottom: 60px !important; left: 20px !important; width: 90% !important; } } .snackbar-container .snackbar-accept-button { padding: 10px 50px; background-color: white; color: #343A40; } .snackbar-container .snackbar-button { margin-top: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; } .snackbar-container .snackbar-accept-button { font-size: 16px; font-weight: 600; border-radius: 6px; cursor: pointer; -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; -o-transition: transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s; } .snackbar-container.isOpen { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; bottom: 0px; left: 0px; width: 100%; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .snackbar-container .snackbar-title { font-weight: bold; font-size: 14px; color: #343a40; margin-bottom: 7px; } @media (min-width: 320px) { .snackbar-container .snackbar-title { font-size: 12px; } } .snackbar-container .snackbar-description { color: #343a40; font-size: 10px; line-height: 16px; } @media (min-width: 768px) { .snackbar-container .snackbar-description { line-height: 20px; font-size: 12px; letter-spacing: 1px; } } .snackbar-container a { color: #343a40; text-decoration: underline; } .snackbar-container .snackbar-close-button { display: block; position: absolute; right: 20px; } @media (min-width: 576px) { .snackbar-container .snackbar-close-button { right: 80px; } } .snackbar-container .snackbar-close-button:after { content: ""; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); display: inline-block; width: 20px; height: 20px; border-radius: 36px; border: 2px solid white; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcBAMAAACAI8KnAAAAG1BMVEUAAAD////////////////////////////////rTT7CAAAACHRSTlMAENDPwKAwn7mBpgoAAAB7SURBVBjTRdGxDYAwEATBowMLKiAjJaMCRAkugCKIwRZfNpa1Jz57TbLS6XyTuOHadcTqd4qiiCeBW4RyNAajauwMzhqWxuCdBIOCjTBoBs2gGTSDMOhap7mWNCPsWpdTSzmYKAclM7UwCBvNuSNcBcI6OsJFZ/1HyfsHuaxNbxbonh0AAAAASUVORK5CYII="); background-size: 8px; background-position: center; background-repeat: no-repeat; } @media (min-width: 576px) { .snackbar-container .snackbar-close-button:after { width: 36px; height: 36px; background-size: 12px; } } .snackbar-container .snackbar-close-button:hover { cursor: pointer; } .snackbar-container .snackbar-close-button .snackbar-close-button-text { visibility: hidden; position: relative; font-size: 14px; padding-right: 50px; } @media (min-width: 768px) { .snackbar-container .snackbar-close-button .snackbar-close-button-text { visibility: visible; } } .snackbar-container .snackbar-action-buttons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #fff; margin-top: 16px; } .snackbar-container .snackbar-action-buttons .snackbar-action-button { font-size: 12px; background-color: #343a40; padding: 8px 16px; border-radius: 6px; } .snackbar-container .snackbar-action-buttons .snackbar-action-button:not(:last-child) { margin-right: 15px; } @media (min-width: 768px) { .snackbar-container .snackbar-accept-button { padding: 8px 16px; background-color: #343a40; color: #fff; } .snackbar-container .snackbar-accept-button { font-size: 14px; font-weight: 700; border-radius: 6px; cursor: pointer; -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; -o-transition: transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s; } .snackbar-container.isOpen { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; bottom: 10px; left: 10px; width: 37%; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .snackbar-detail-button-text { text-decoration: underline; font-size: 12px; color: #868e96; cursor: pointer; } .snackbar-description-details { margin-top: 20px; } @media (min-width: 320px) and (max-width: 480px) { .snackbar-description-details { font-size: 13px; } .snackbar-description-details.options { font-size: 12px; } .snackbar-description-details .cookie-policy__text { padding-left: 24px; } .snackbar-description-details .cookie-policy__text::before { width: 14px; height: 14px; } .snackbar-description-details .cookie-policy__text::after { font-size: 13px; } } .snackbar-description-details.options { margin-top: 7px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 7px; } .snackbar-description-details.options input[type='checkbox']:checked ~ span::before { border-color: #ff3200; background-color: #ff3200; } .snackbar-description-details.options input[type='checkbox']:checked ~ span::after { display: block; } .cookie-policy__text { position: relative; padding-left: 30px; color: #343a40; } .cookie-policy__text input[type="checkbox"] { display: none; } .cookie-policy__text::before { content: ""; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 0; width: 16px; height: 16px; border: 1px solid #868e96; background-color: #fff; border-radius: 4px; cursor: pointer; } input[type="checkbox"]:checked + .cookie-policy__text::before { background-color: #01007f; border-color: #01007f; } .cookie-policy__text::after { content: "\e936"; position: absolute; top: 50%; left: 2px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-family: turna; color: #fff; display: none; } input[type="checkbox"]:checked + .cookie-policy__text::after { display: block; } body[dir='rtl'] .cookie-policy__text { padding-left: unset; padding-right: 30px; } body[dir='rtl'] .cookie-policy__text::before { left: unset; right: 0; } body[dir='rtl'] .cookie-policy__text::after { left: unset; right: 2px; } .switch-bar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .switch-bar input[type='checkbox']:checked ~ .switch-container .switch::before { background-color: #ff3200; border-color: #ff3200; } .switch-bar input[type='checkbox']:checked ~ .switch-container .switch::after { -webkit-transform: translate(20px, -50%); -ms-transform: translate(20px, -50%); transform: translate(20px, -50%); border-color: #ffffff; background-color: #ffffff; } .switch-bar .switch-container .switch { position: relative; width: 40px; height: 22px; display: inline-block; } .switch-bar .switch-container .switch::before { content: ""; width: 40px; height: 20px; border-radius: 20px; border: 1px solid #868e96; background-color: #f1f3f5; position: absolute; right: 0; top: 0; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .switch-bar .switch-container .switch::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 1px solid #868e96; background-color: #868e96; left: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .trn-default-content.btn-accept { margin-top: 20px; } .trn-default-content.btn-accept span { background-color: #343a40; padding: 8px 16px; color: #fff; font-size: 16px; border-radius: 6px; } .trn-default-content.options-dialog-details { font-size: 14px; color: #868e96; margin: 3px 0 10px; } .trn-default-content.options-dialog-title { font-size: 16px; color: #343a40; font-weight: 600; } .snackbar-description-details-main { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: start; gap: 4px; } @charset "UTF-8"; .turna-description { text-align: center; color: #000000; font-size: 18px; } .mb-10 { margin-bottom: 10px; } .mt-10 { margin-top: 10px; } .pb-10 { padding-bottom: 10px; } .pt-10 { padding-top: 10px; } .mb-20 { margin-bottom: 20px; } .mt-20 { margin-top: 20px; } .pb-20 { padding-bottom: 20px; } .pt-20 { padding-top: 20px; } .mb-30 { margin-bottom: 30px; } .mt-30 { margin-top: 30px; } .pb-30 { padding-bottom: 30px; } .pt-30 { padding-top: 30px; } .mb-40 { margin-bottom: 40px; } .mt-40 { margin-top: 40px; } .pb-40 { padding-bottom: 40px; } .pt-40 { padding-top: 40px; } .mb-50 { margin-bottom: 50px; } .mt-50 { margin-top: 50px; } .pb-50 { padding-bottom: 50px; } .pt-50 { padding-top: 50px; } .m-reset { margin: 0 !important; } .mb-reset { margin-bottom: 0 !important; } .mt-reset { margin-top: 0 !important; } .mr-reset { margin-right: 0 !important; } .ml-reset { margin-left: 0 !important; } .mt-auto { margin-top: auto; } .mb-auto { margin-bottom: auto; } .ml-auto { margin-left: auto; } .mr-auto { margin-right: auto; } .p-reset { padding: 0 !important; } .pb-reset { padding-bottom: 0 !important; } .pt-reset { padding-top: 0 !important; } .pr-reset { padding-right: 0 !important; } .pl-reset { padding-left: 0 !important; } .text-align-center { text-align: center; } .text-align-left { text-align: left; } .text-align-right { text-align: right; } .underline { text-decoration: underline; } .cursor-pointer { cursor: pointer; } /* Flex Layout Module Classes */ .d-flex { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .align-items-center { -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; } .justify-content-center { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; } .justify-content-space-between { -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important; } .p-relative { position: relative; } .stretched-link::before { content: ""; position: absolute; pointer-events: auto; background-color: rgba(0, 0, 0, 0); top: 0; right: 0; bottom: 0; left: 0; z-index: 1; } .fw-400 { font-weight: 400; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-bold { font-weight: bold; } .color-primary { color: #01007F; } .fs-16 { font-size: 16px; } .fs-18 { font-size: 18px; } .fs-20 { font-size: 20px; } .price::after { content: attr(data-currency); font-size: 0.8em; margin-left: 3px; } /* Widget Header Styles Start */ .widget-header { margin-bottom: 30px; color: #000000; } .widget-header .widget-title { font-size: 18px; margin-bottom: 5px; } .widget-header .widget-description { font-size: 22px; font-weight: bold; margin: 0; } /* Widget Header Styles End */ /* Background Color Styles Start */ .background-white { background-color: #fff; } .background-ghost-white { background-color: #F8F8FB; } /* Background Color Styles End */ .section { padding: 30px 0; } .section, .section::before, .section::after, .section *, .section *::before, .section *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } @media (min-width: 768px) { .section { margin-bottom: 50px; } } .section__inner { position: relative; max-width: 1248px; margin: 0 auto; } .section__inner--medium { max-width: 1000px; } .section__inner--small { max-width: 800px; } .section__header { margin-bottom: 30px; color: #000000; } .section__header > *:not(:last-child) { margin-bottom: 5px; } .section__title { font-weight: bold; font-size: 24px; } .section__description { font-weight: normal; font-size: 16px; } @media (min-width: 768px) { .section__description { font-size: 18px; } } .section__cta { margin-top: 20px; } .section__cta .btn { color: #01007F; font-size: 13.5px; font-weight: 600; border-width: 1.5px; border-style: solid; border-color: #01007F; background-color: transparent; padding: 0 15px; height: 44px; border-radius: 5px; background-color: #fff; border: 1px solid #01007F; } .section__cta .btn .button-text { position: relative; } .section__cta .btn .button-text:before, .section__cta .btn .button-text:after { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-family: "turna"; font-size: 1.3em; font-weight: normal; } .section__cta .btn .button-text { padding-right: 20px; display: block; line-height: 0; } .section__cta .btn .button-text:after { content: ""; right: 0; } .section__cta a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: inherit; text-decoration: none; } body[dir="rtl"] .section__cta .btn .button-text { padding-right: 0; } body[dir="rtl"] .section__cta .btn .button-text::after { display: none; } @media (max-width: 1024px) { .section, .layout { padding: 0 !important; } } .custom-popup { position: fixed; z-index: 999999; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); } .custom-popup i { font-family: "Font Awesome 6 Pro" !important; } .custom-popup__close { background-color: #F8F9FB; border-radius: 50%; width: 32px; height: 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; } .custom-popup__container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; } .custom-popup__container__layout { background-color: white; padding: 24px; border-radius: 16px; } .custom-popup__header { border-bottom: 1px solid #DDDDDD; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 24px; padding-bottom: 24px; margin-bottom: 24px; } .custom-popup__title { font-size: 20px; color: #000000; font-weight: 700; line-height: 26px; margin-bottom: 2px; } .custom-popup__description { font-size: 14px; color: #AAAAAA; font-weight: 400; line-height: 19px; } .custom-popup__footer { border-top: 1px solid #DDDDDD; padding: 24px 0 0; display: -webkit-box; display: -ms-flexbox; display: flex; } .custom-popup__footer__item { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .custom-popup__footer__item:first-child { -webkit-box-flex: 2; -ms-flex: 2; flex: 2; color: #AAAAAA; font-size: 14px; font-weight: 400; line-height: 19px; } .custom-popup__footer__item--button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; gap: 8px; } .custom-popup__footer__item--button button { height: 56px; padding: 0 24px; border-radius: 64px; border: none; background-color: #01007F; color: white; font-size: 16px; font-weight: 500; line-height: 21px; } .custom-select { margin-bottom: 24px; } .custom-select__title { font-size: 18px; font-weight: 700; line-height: 24px; color: #000000; margin-bottom: 16px; } .custom-select__container { position: relative; } .custom-select__container select { width: 100%; height: 56px; border-radius: 8px; border-color: #DDDDDD; padding: 0 16px; outline: none; font-size: 16px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .custom-select__label { position: absolute; left: 16px; top: -8px; background-color: white; padding: 0 4px; font-size: 12px; color: #AAAAAA; font-weight: 400; line-height: 16px; } .custom-select__label-icon { position: absolute; right: 16px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .custom-select__label-icon i { font-size: 20px; color: #AAAAAA; } .custom-checkbox { display: inline-block; } .custom-checkbox input[type='checkbox']:checked + label::before { background-color: #2321ff; border-color: #2321ff; } .custom-checkbox input[type='checkbox']:checked + label::after { display: block; } .custom-checkbox label { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; position: relative; color: white; } .custom-checkbox label::before { content: ""; position: relative; width: 24px; height: 24px; border: 1px solid #E9E9EA; border-width: 1.5px; border-radius: 4px; display: inline-block; background-color: white; } .custom-checkbox label::after { content: "\f00c"; position: absolute; left: 8px; font-family: "Font Awesome 6 Pro"; color: white; display: none; } .custom-radio { display: inline-block; } .custom-radio input[type='radio']:checked + label::before { background-color: #2321ff; border-color: #2321ff; } .custom-radio input[type='radio']:checked + label::after { display: block; } .custom-radio label { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 12px; position: relative; color: white; } .custom-radio label::before { content: ""; position: relative; width: 24px; height: 24px; border: 1px solid #E9E9EA; border-radius: 50%; display: inline-block; background-color: white; } .custom-radio label::after { content: ""; position: absolute; left: 8px; color: white; background-color: white; display: none; width: 8px; height: 8px; border-radius: 50%; top: 8px; } .tn-mobile-menu { padding: 16px; } .tn-mobile-menu i { font-family: "Font Awesome 6 Pro" !important; color: #01007F; font-size: 16px; } .tn-mobile-menu__logo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 16px; } .tn-mobile-menu__logo__figure { width: 117px; height: 24px; margin: unset !important; } .tn-mobile-menu__logo__figure img { width: 100%; height: 100%; } .tn-mobile-menu__logo__close-icon span { width: 40px; height: 40px; border: 2px solid #F2F2F2; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .tn-mobile-menu__header { padding: 16px; background-color: #F5F6F7; border-radius: 16px; margin-bottom: 16px; } .tn-mobile-menu__header__title { color: #000000; font-size: 16px; font-weight: 600; line-height: 16px; margin-bottom: 12px; } .tn-mobile-menu__header__title i { font-family: "Font Awesome 6 Pro" !important; } .tn-mobile-menu__header__top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .tn-mobile-menu__header__top i { color: #000000; font-size: 16px; } .tn-mobile-menu__header__top__profile { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; } .tn-mobile-menu__header__top__profile-short span { width: 40px; height: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: #EA580C; color: white; color: #FFF; font-size: 14px; font-weight: 400; line-height: 19px; border-radius: 50%; } .tn-mobile-menu__header__top__profile-long__name { color: #000000; font-size: 16px; font-weight: 600; line-height: 18px; } .tn-mobile-menu__header__top__profile-long__mail { color: #000000; font-size: 12px; font-weight: 400; line-height: 16px; margin-top: 6px; } .tn-mobile-menu__header__bottom { margin-top: 12px; border-top: 1px solid #E1E1EF; padding-top: 12px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .tn-mobile-menu__header__bottom__membership-info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 2px; border-radius: 8px; border: 1px solid #EBEBEB; background: #FFF; padding: 8px; -ms-flex-negative: 0; flex-shrink: 0; } .tn-mobile-menu__header__bottom__membership-info i { font-size: 14px; } .tn-mobile-menu__header__bottom__membership-info__text { color: #01007F; font-size: 14px; font-weight: 500; line-height: 19px; } .tn-mobile-menu__header__bottom__turna-point-info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 4px; } .tn-mobile-menu__header__bottom__turna-point-info .turna-point { color: #2321FF; font-size: 14px; font-weight: 700; line-height: 19px; } .tn-mobile-menu__header__bottom__turna-point-info .turna-point-text { color: #2321FF; font-size: 14px; font-weight: 500; line-height: 19px; } .tn-mobile-menu__header__bottom__turna-point-info .turna-point-icon { color: #E1E1EF; } .tn-mobile-menu__auth-btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; } .tn-mobile-menu__auth-btn .button { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 48px; font-size: 16px; font-weight: 500; line-height: 21px; } .tn-mobile-menu__auth-btn .button button { height: 100%; width: 100%; background: none; border-radius: 8px; border: 1px solid #DDDDDD; border-color: #01007F; } .tn-mobile-menu__auth-btn__login button { background-color: #01007F !important; color: white; } .tn-mobile-menu__auth-btn__register button { color: #01007F; } .tn-mobile-menu__navbar { padding: unset; } .tn-mobile-menu__navbar__item { list-style: none; height: 56px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .tn-mobile-menu__navbar__item.active { background-color: #EBF2FF; border-radius: 8px; } .tn-mobile-menu__navbar__item a { color: #01007F; font-size: 16px; font-weight: 600; line-height: 18px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; text-decoration: none; padding: 16px; height: 56px; width: 100%; } .tn-mobile-menu__navbar__item a:active { background-color: #EBF2FF; border-radius: 8px; } .tn-mobile-menu__navbar__item a i { font-size: 18px; } .tn-mobile-menu__lang-currency { margin: 16px 0; padding: 16px; border-top: 1px solid #D9D9D9; border-bottom: 1px solid #D9D9D9; color: #000000; font-size: 14px; font-weight: 500; line-height: 19px; } .tn-mobile-menu__lang-currency i { font-size: 12px; color: #000000; } .tn-mobile-menu__lang-currency__container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 48px; } .tn-mobile-menu__lang-currency__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 4px; } .tn-mobile-menu__lang-currency__content figure { width: 20px; height: 20px; margin: unset !important; } .tn-mobile-menu__lang-currency__content figure img { width: 100%; height: 100%; } .tn-mobile-menu__subbar { padding: unset; } .tn-mobile-menu__subbar__item { padding: 16px; list-style: none; } .tn-mobile-menu__subbar__item a { font-size: 14px; color: #000000; font-weight: 500; line-height: 19px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; text-decoration: none; } .tn-mobile-menu__subbar__item a i { font-size: 16px; color: #000000; } .tn-mobile-menu__subbar__item a span span { color: #2321FF; } .tn-mobile-menu__subbar__item.logout a, .tn-mobile-menu__subbar__item.logout i { color: #DB282D; } .tn-mobile-menu__title { color: #000000; font-size: 14px; font-weight: 600; line-height: 19px; height: 48px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .tn-mobile-menu__currency-container, .tn-mobile-menu__lang-container { padding: unset !important; } .tn-mobile-menu__currency__item, .tn-mobile-menu__lang__item { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 48px; border-radius: 8px; padding: 0 16px; } .tn-mobile-menu__currency__item.active, .tn-mobile-menu__lang__item.active { background-color: #EBF2FF; } .tn-mobile-menu__currency__item .custom-search-form__radio-btn, .tn-mobile-menu__lang__item .custom-search-form__radio-btn { margin-bottom: unset; } .tn-mobile-menu__currency__item__unit, .tn-mobile-menu__lang__item__unit { color: #000000; font-size: 14px; font-weight: 500; line-height: 19px; } .tn-mobile-menu__currency__item label, .tn-mobile-menu__lang__item label { font-size: 14px !important; font-weight: 500 !important; line-height: 19px; color: #000000; } .tn-mobile-menu__currency__item figure, .tn-mobile-menu__lang__item figure { margin: unset !important; width: 30px; height: 20px; } .tn-mobile-menu__currency__item figure img, .tn-mobile-menu__lang__item figure img { width: 100%; height: 100%; } .tn-mobile-menu__savePreferencesBtn { margin-top: 48px; } .tn-mobile-menu__savePreferencesBtn button { color: #FFF; font-size: 16px; font-weight: 500; line-height: 21px; background-color: #2321FF; border-radius: 8px; height: 56px; width: 100%; padding: 0 24px; border: none; } .menu-line-throught { margin-top: 16px !important; padding-top: 16px; border-top: 1px solid #D9D9D9; } .inside-header { min-height: 56px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .inside-header .tn-mobile-menu__header__title { margin-bottom: unset !important; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; } .inside-header .tn-mobile-menu__header__title i { font-size: 14px; } .responsive-menu-design { position: fixed; top: 0; background: rgba(0, 0, 0, 0.5); width: 100%; z-index: 999999; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; overflow-y: scroll; height: 100%; display: none; } .responsive-menu-design #right-slide-bar { width: 82.5%; height: 100%; background: white; } .responsive-menu-design .tn-mobile-menu { background: white; } .layout { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 30px 0; gap: 32px; width: 100%; } .layout, .layout::before, .layout::after, .layout *, .layout *::before, .layout *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } .layout__content { -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%; width: 100%; } .layout__sidebar { -webkit-box-flex: 0; -ms-flex: 0 0 320px; flex: 0 0 320px; } .layout.layout--reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .layout.layout--reverse .layout__sidebar { margin-left: 0; margin-right: 30px; } /*body[dir='rtl'] { .layout { &__sidebar { margin-right: 30px !important; } } .otel-reservation--arabic-layout{ .layout{ &__sidebar{ margin-left: unset !important; margin-right: 30px !important; } } } }*/ .container { background: #F8F9FB no-repeat center/cover; } .container .section__inner--max-width-800 { max-width: 800px !important; } .container .section__inner--max-width-800 .section { padding: 0 15px !important; } .container .section__inner--max-width-800 .layout { padding: 0 !important; } .card-point-converter { width: 100%; height: 247px; background: url("https://res.cloudinary.com/turna/image/upload/v1717509434/general-campaign1_1920_x_250_piksel_-2.svg ") no-repeat center/cover; } .card-point-converter__header { max-width: 1248px; margin: auto; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .card-point-converter__header div:first-child { font-size: 3rem; font-weight: bold; color: #fff; } .card-point-converter__header div:last-child { font-size: 1rem; color: #F8F9FB; } .point { background: #fff no-repeat center/cover; padding: 26px 26px 48px; border: 1px solid #DDDDDD; border-radius: 8px; } .point-btn { margin: 30px 0 40px 0; } .point-btn button { padding: 16px 45px; height: 50px; background: #01007F no-repeat center/cover; border: none; border-radius: 3px; color: #fff; font-weight: bold; } .point-btn--p-20 button { padding: 16px 20px; } .point-btn--flex { text-align: end; margin: 36px 0 40px 0 !important; } .point-btn--flex button { padding: 16px 134px; } .point-btn--flex span { width: 324px; display: inline-block; margin-top: 14px; } .point-card { position: relative; } .point-card__item__query__section input[type="radio"] { display: none; } .point-card__item__query__section__header { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; margin-bottom: 30px; position: relative; border-bottom: 1px solid #DDDDDD; padding-bottom: 15px; } .point-card__item__query__section__header__item { font-size: 1rem; color: #AAAAAA; } .point-card__item__query__section__header__item label { cursor: pointer; } .point-card__item__query__section__header__item--active { color: #2321FF; font-weight: 600; } .point-card__item__query__section__header::after { content: ""; width: 50%; height: 3px; background-color: #2321FF; position: absolute; bottom: -2px; left: 0; } .point-card__item__query__section__container__content--border { border: 1px solid #DDDDDD; border-radius: 4px; padding: 32px 24px; } .point-card__item__query__section__container__content .query-registered__card-item { padding: 32px 24px; border-radius: 4px; } .point-card__item__query__section__container__content .query-registered__card-item:not(:last-of-type) { margin-bottom: 10px; } .point-card__item__query__section__container__content .query-registered__card-item .registered-card-info { display: none; } .point-card__item__query__section__container__content .query-registered__card-item__info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 37px; } .point-card__item__query__section__container__content .query-registered__card-item__info--mt-20 { margin-top: 20px; } .point-card__item__query__section__container__content .query-registered__card-item__info__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .point-card__item__query__section__container__content .query-registered__card-item__info__header__info { cursor: pointer; position: relative; } .point-card__item__query__section__container__content .query-registered__card-item__info__header__info--security div:first-child { font-size: 1rem; font-weight: bold; } .point-card__item__query__section__container__content .query-registered__card-item__info__header__info--security div:last-child { font-size: 14px; } .point-card__item__query__section__container__content .query-registered__card-item__info__header__info strong { font-size: 1rem; color: #000000; font-weight: bold; display: block; } .point-card__item__query__section__container__content .query-registered__card-item__info__header__info strong::before { width: 20px; height: 20px; border-radius: 20px; border: 2px solid #DDDDDD; left: -40px; } .point-card__item__query__section__container__content .query-registered__card-item__info__header__info strong::after, .point-card__item__query__section__container__content .query-registered__card-item__info__header__info strong::before { content: ""; position: absolute; display: block; top: 25%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .point-card__item__query__section__container__content .query-registered__card-item__info__header__info span { color: #000000; } .point-card__item__query__section__container__content .query-registered__card-item__info__header__info__card-number { color: #AAAAAA !important; } .point-card__item__query__section__container__content .query-registered__card-item__info__cvv input { width: 126px; height: 50px; background: #fff no-repeat center/cover; border: 1px solid #DDDDDD; border-radius: 1px; font-size: 1rem; font-weight: bold; text-align: center; } .point-card__item__query__section__container__content .query-registered__card-item--default { border: 1px solid #F8F9FB; background-color: #F8F9FB; } .point-converter { position: relative; } .point-converter__container__item { position: relative; } .point-converter__container__item:not(:last-of-type) { border-radius: 3px; background: #F8F9FB no-repeat center/cover; padding: 26px 30px 72px; } .point-converter__container__item__header div:first-child { font-size: 1rem; color: #000000; } .point-converter__container__item__header div:first-child strong { font-size: 20px; font-weight: bold; } .point-converter__container__item__header div:last-child { width: 467px; color: #AAAAAA; margin: 20px 0 30px 0; } .point-converter__container__item__card-logo { position: absolute; top: 32px; right: 30px; } .point-converter__container__item__point-section { color: #000000; } .point-converter__container__item__point-section__content { position: relative; } .point-converter__container__item__point-section__content input { width: 100%; height: 50px; background: #fff no-repeat center/cover; border: 1px solid #DDDDDD; border-radius: 8px; padding: 16px 20px; color: #000000; font-weight: bold; } .point-converter__container__item__point-section__content span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 20px; color: #AAAAAA; } .point-converter__container__item__point-section__checkbox-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; font-weight: 500 !important; } .point-converter__container__item__point-section__checkbox-item div { color: #000000; } .point-converter__container__item__point-section__checkbox-item label { color: #000000; } .point-completed__container { margin-bottom: 65px; } .point-completed__container__header div { font-size: 1rem; color: #000000; } .point-completed__container__header div:first-child { font-size: 20px; font-weight: bold; color: #2321FF; } /*.point-completed__container__header div:nth-child(2) { margin: 10px 0 16px 0; }*/ /*.point-completed__container__header div:last-child { margin-bottom: 45px; }*/ .point-completed__container__header div:last-child a { color: #000000; } .point-completed__container__content__info { font-size: 1rem; color: #AAAAAA; } .point-completed__container__content__info a { color: #2321FF; } .point-completed__container__content__section { background: #F8F9FB no-repeat center/cover; padding: 24px; margin-top: 15px; position: relative; } .point-completed__container__content__section__item:not(:first-of-type) { border-top: 1px solid #DDDDDD; padding-top: 25px; } .point-completed__container__content__section__item:not(:last-of-type) { padding: 20px 0; } .point-completed__container__content__section__item__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .point-completed__container__content__section__item__content__header { color: #000000; font-size: 18px; font-weight: bold; } .point-completed__container__content__section__item__content__header-text { color: #AAAAAA; font-size: 1rem; } .point-completed__container__content__section__item__content__hidden-hovered { position: absolute; top: -55px; right: -24px; background: #2321FF no-repeat center/cover; border-radius: 4px; color: #fff; padding: 10px; font-size: 13px; width: 20%; text-align: center; opacity: 0; -webkit-transition: .4s; -o-transition: .4s; transition: .4s; } .point-completed__container__content__section__item__content__hidden-hovered::after { content: ""; position: absolute; border-color: #2321FF transparent transparent transparent; border-style: solid; border-width: 10px; width: 0px; height: 0px; bottom: -20px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .point-completed__container__content__section__item__info-box { background-color: #F8F9FB !important; border-radius: 4px !important; color: #000000 !important; font-size: 15px !important; } .point-completed__container__content__section__item__form { margin: 24px 0 14px; } .point-completed__container__content__section__item__sub-text { color: #000000; } .point-completed__container__content__section__item__sub-text span { color: #2321FF; font-weight: bold; } .point-completed__home-btn { text-align: center; cursor: pointer; } .point-completed__home-btn a { border: 1px solid #2321FF; border-radius: 6px; padding: 16px 64px; color: #2321FF; font-weight: bold; font-size: 1rem; } .point .content-line { padding: 35px 0 0 60px; } .point .content-line::before, .point .content-line--small:after { content: ""; position: absolute; background-color: #F8F9FB; width: 1.5px; height: calc(100% - 80px); } .point .content-line::before { left: 20px; } .point .content-line--small::after { left: 20px; top: 75px; bottom: 5px; } #radio-2:checked ~ .point-card__item__query .point-card__item__query__section__header::after { left: unset; right: 0; } body[dir='rtl'] .point-card__item__query__section__header::after { right: 0 !important; left: unset !important; } body[dir='rtl'] #radio-2:checked ~ .point-card__item__query .point-card__item__query__section__header::after { left: 0 !important; right: unset !important; } .query-registered input[type="radio"]:checked + .query-registered__card-item { border: 1.5px solid #2321FF; background-color: #4171DA0D; } .query-registered input[type="radio"]:checked + .query-registered__card-item .registered-card-info { display: -webkit-box; display: -ms-flexbox; display: flex; } .query-registered input[type="radio"]:checked + .query-registered__card-item .query-registered__card-item__info__header__info strong::before { border-color: #2321FF !important; } .query-registered input[type="radio"]:checked + .query-registered__card-item .query-registered__card-item__info__header__info strong::after { width: 12px; height: 12px; border-radius: 14px; background-color: #2321FF; left: -36px; } /*Switch-Toggle button Code*/ .toggle-button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; cursor: pointer; } .toggle-button__label { margin-right: 10px; } .toggle-button input[type='checkbox'] { position: absolute; display: none; } .toggle-button__slider { position: relative; display: block; cursor: pointer; background: #AAAAAA no-repeat center/cover; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; width: 39px; height: 24px; } .toggle-button__slider::before { content: ""; position: absolute; height: 18px; width: 18px; background: #f9f9ff no-repeat center/cover; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; top: 3px; left: 3px; } .toggle-button__slider--round { border-radius: 12px; } .toggle-button__slider--round::before { border-radius: 9px; } .hovered-display:hover ~ .point-completed__container__content__section__item__content__hidden-hovered { opacity: 1; } #toggle-button:checked + .toggle-button__slider, #toggle-button-2:checked + .toggle-button__slider { background: #2321FF no-repeat center/cover; } #toggle-button:checked + .toggle-button__slider::before, #toggle-button-2:checked + .toggle-button__slider::before { background: #fff no-repeat center/cover; -webkit-transform: translateX(14px); -ms-transform: translateX(14px); transform: translateX(14px); } /*End it*/ .form-row { margin-bottom: 20px; } .form-row--col-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .form-row--col-1 > * { -webkit-box-flex: 0; -ms-flex: 0 0 calc(100% / 1); flex: 0 0 calc(100% / 1); margin-bottom: 0; } .form-row--col-1 > *:not(:last-child) { margin-right: 0; } .form-row--col-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .form-row--col-2 > * { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; -ms-flex-preferred-size: calc((100% - (2 - 1) * 20px) / 2); flex-basis: calc((100% - (2 - 1) * 20px) / 2); margin-bottom: 20px; } .form-row--col-2 > *:not(:last-child) { margin-right: 20px; } .form-row--col-2 > *:nth-child(2n) { margin-right: 0; } .form-row--col-3 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .form-row--col-3 > * { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; -ms-flex-preferred-size: calc((100% - (3 - 1) * 20px) / 3); flex-basis: calc((100% - (3 - 1) * 20px) / 3); margin-bottom: 20px; } .form-row--col-3 > *:not(:last-child) { margin-right: 20px; } .form-row--col-3 > *:nth-child(3n) { margin-right: 0; } .form-row--flex { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .guest-info__flex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .guest-info__container { position: relative; } .guest-info__container__add-btn { position: absolute; width: 42px; height: 42px; right: 0; top: 0; border-radius: 42px; background-color: #f9f9ff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .guest-info__container__add-btn:before { content: "\e985"; color: #fff; font-family: "turna"; font-size: 22px; } .form-item { margin-bottom: 0; } .form-item--flex { display: -webkit-box; display: -ms-flexbox; display: flex; } .form-item__label { font-size: 13px; font-weight: 600; margin-bottom: 5px; } .form-item__input { position: relative; } .form-item__input span { display: block; background-color: transparent; } .form-item__input input { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .form-item__input input:not([type=checkbox]) { width: 100%; height: 48px; padding: 0 15px; border: 1px solid #DDDDDD; border-radius: 8px; } .form-item__input input:not([type=checkbox])::-webkit-input-placeholder { color: rgba(52, 58, 64, 0.5); padding-left: 5px; } .form-item__input input:not([type=checkbox]):-ms-input-placeholder { color: rgba(52, 58, 64, 0.5); padding-left: 5px; } .form-item__input input:not([type=checkbox])::-ms-input-placeholder { color: rgba(52, 58, 64, 0.5); padding-left: 5px; } .form-item__input input:not([type=checkbox])::placeholder { color: rgba(52, 58, 64, 0.5); padding-left: 5px; } .form-item__input input:not([type=checkbox])[disabled] { background-color: #F8F9FB; border: 0; cursor: not-allowed; } .form-item__input input:not([type=checkbox]):focus { -webkit-box-shadow: 0 0 0 3px rgba(140, 140, 140, 0.3); box-shadow: 0 0 0 3px rgba(140, 140, 140, 0.3); } .form-item__input--gsm input { padding: 0 15px 0 60px !important; } .form-item__input--gsm::before { content: attr(data-gsm); position: absolute; height: 48px; width: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: rgba(52, 58, 64, 0.5); } .form-item__select { position: relative; -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%; } .form-item__select .passenger-sex.bed-option { color: #000000; } .form-item__select .phoneprefix.form-item__phone-select { color: #000000; } .form-item__select select { height: 48px; border: 1px solid #DDDDDD; border-radius: 8px; padding-left: 16px; color: #000000; -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; } .form-item__select select:focus { -webkit-box-shadow: 0 0 0 3px rgba(140, 140, 140, 0.3); box-shadow: 0 0 0 3px rgba(140, 140, 140, 0.3); z-index: 200; border-radius: 6px; } .form-item__select::after { content: "\e99b"; font-family: "turna"; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 0; width: 20px; height: 20px; } .form-item__textarea { margin-bottom: 10px; } .form-item__textarea textarea { width: 100%; height: 150px; padding: 20px 16px; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #DDDDDD; border-radius: 4px; resize: none; outline: none; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .form-item__textarea textarea::-webkit-input-placeholder { color: #AAAAAA; } .form-item__textarea textarea:-ms-input-placeholder { color: #AAAAAA; } .form-item__textarea textarea::-ms-input-placeholder { color: #AAAAAA; } .form-item__textarea textarea::placeholder { color: #AAAAAA; } .form-item__textarea textarea:focus { -webkit-box-shadow: 0 0 0 3px rgba(140, 140, 140, 0.3); box-shadow: 0 0 0 3px rgba(140, 140, 140, 0.3); } .form-item__date-picker { height: 48px; border: 1px solid #DDDDDD; border-radius: 8px; } .form-item__date-picker .day-of-datepicker.day-of-birth, .form-item__date-picker .month-of-datepicker.month-of-birth, .form-item__date-picker .year-of-datepicker.year-of-birth { color: #000000; } .form-item__date-picker__container select { height: 46px; border: none; background-color: transparent; } .form-item__date-picker__container:not(:last-of-type) { border-right: 1px solid #DDDDDD; } .form-item__gender { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 20px; } .form-item__gender input[type='radio']:checked + label { border-color: #01007F; color: #01007F; background-color: #f9f9ff; } .form-item__gender label { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; border: 1px solid #DDDDDD; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; height: 48px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 8px; color: #AAAAAA; } .form-item__sex { height: 48px; border: 1px solid #DDDDDD; border-radius: 8px; } .form-item__sex__container select { height: 46px; border: none; background-color: transparent; } select { width: 100%; } .reservation-confirm { text-align: right; margin-top: 36px; } .reservation-confirm button { width: 320px; height: 56px; border-radius: 8px; background-color: #2321FF; color: #fff; border: none; position: relative; font-size: 16px; } .reservation-confirm button::after { content: "\e90d"; position: absolute; top: 24%; right: 25%; -webkit-transform: translateX(50%); -ms-transform: translateX(50%); transform: translateX(50%); width: 16px; height: 16px; font-family: "turna"; font-size: 22px; } .hotel-reservation-page .alert.alert-list-wrapper.error { background-color: #01007F !important; color: #fff; } body[dir='rtl'] .form-item:not(:last-of-type) { margin-right: unset; margin-left: 20px; } body[dir='rtl'] .form-item__select select { padding-left: unset; padding-right: 16px; } body[dir='rtl'] .form-item__select::after { right: unset; left: 0; } body[dir='rtl'] .form-item__input--gsm input { padding: 0 60px 0 15px !important; } .lpg-rent-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .btn-load-contact.guest-info-icon.contact-form-icon { position: absolute; right: 10px; top: 10px; cursor: pointer; z-index: 10; } .btn-load-contact.guest-info-icon.contact-form-icon::after { content: "\e983"; font-family: turna; color: #01007F; font-size: 36px; } .guest-info-icon.btn-load-passenger { position: absolute; right: 10px; top: 10px; cursor: pointer; z-index: 10; } .guest-info-icon.btn-load-passenger::after { content: "\e983"; font-family: turna; color: #01007F; font-size: 36px; } .section-card { background-color: white; border-radius: 5px; border: 1px solid #DDDDDD; padding: 20px; position: relative; } .section-card__title { font-size: 16px; font-weight: bold; color: #000000; margin-bottom: 2px; } .section-card__description { font-size: 14px; color: #000000; } .section-card__description-light { font-size: 14px; color: #1D1E20; font-weight: 400; margin: 8px 0; } .section-card__header { margin-bottom: 20px; } .section-card__content p { margin-bottom: 20px; } .section-card__content .info-section { margin: 0; padding: 0; } .section-card__content .info-section__title { font-weight: 600; font-size: 14px; line-height: 19px; margin-bottom: 8px; } .section-card__content .info-section__header { font-size: 20px; font-weight: bold; margin-bottom: 16px; } .section-card__content .info-section__content { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 20px; max-height: 200px; overflow: hidden; -webkit-transition: max-height 0.3s ease; -o-transition: max-height 0.3s ease; transition: max-height 0.3s ease; } .section-card__content .info-section__item { -webkit-box-flex: 1; -ms-flex: 1 1 calc(50% - 20px); flex: 1 1 calc(50% - 20px); min-width: 200px; -webkit-box-sizing: border-box; box-sizing: border-box; } .section-card__content .info-section__item__title { font-size: 16px; font-weight: bold; margin-bottom: 8px; } .section-card__content .info-section__item__text { font-size: 14px; line-height: 1.6; color: #555; } .section-card__content .info-section__toggle { margin-top: 16px; background: none; border: none; color: #007bff; font-size: 14px; cursor: pointer; text-decoration: none; } .section-card__content .info-section__toggle:hover { color: #0056b3; } .section-card__lpg-rent-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 16px; } .section-card__lpg-rent-wrapper .isLpg-container, .section-card__lpg-rent-wrapper .isRented-container { margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; gap: 12px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; } .section-card__lpg-rent-wrapper .isLpg-container input[type="checkbox"], .section-card__lpg-rent-wrapper .isRented-container input[type="checkbox"] { accent-color: #2321FF; } .page-stepper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 40px; /*If you want to make a vertical stepper, you should use that classes*/ /*Start it*/ /*End it*/ } .page-stepper--vertical { display: block; } .page-stepper--vertical .page-stepper__item:not(:last-of-type)::after { display: none !important; } .page-stepper--vertical .page-stepper__item__counter { -webkit-box-flex: unset !important; -ms-flex: unset !important; flex: unset !important; } .page-stepper--vertical .page-stepper__item__info__secondary { display: block !important; } .page-stepper__item { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .page-stepper__item__counter { position: relative; width: 44px; height: 44px; -webkit-box-flex: 1; -ms-flex: 1 0 44px; flex: 1 0 44px; border-radius: 44px; background-color: #DDDDDD; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-right: 16px; } .page-stepper__item__info { position: relative; } .page-stepper__item__info__primary { color: #000000; } .page-stepper__item__info__secondary { display: none; color: #AAAAAA; } .page-stepper__item--completed .page-stepper__item__counter::before { content: "\e936"; position: absolute; left: 0; top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #2321FF; width: 44px; height: 44px; border-radius: 44px; font-family: "turna"; font-size: 22px; } .page-stepper__item--completed .page-stepper__item__info__secondary { display: block; } .page-stepper__item--active .page-stepper__item__counter { font-weight: bold; background-color: #2321FF; } .page-stepper__item--active .page-stepper__item__info__primary { color: #2321FF; font-weight: bold; } .page-stepper__item:not(:last-of-type)::after { content: ""; height: 1px; width: 50px; background-color: #DDDDDD; margin: 0 16px; } body[dir='rtl'] .page-stepper__item__info { margin-right: 10px; } .alert { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 14px; padding: 16px 20px; border-radius: 8px; background-color: #F8F9FB; color: #000000; } .alert__icon { font-size: 22px; margin-right: 10px; line-height: 0; } .alert__title { font-weight: 600; } .alert__description { font-weight: 500; font-size: 16px; } .alert__description:not(:last-of-type) { margin-bottom: 15px; } body[dir='rtl'] .alert__icon { margin-right: unset; margin-left: 10px; } .alert-summary { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 16px; padding: 16px 20px; border-radius: 8px; background-color: #FEF2F2; color: #000000; } .alert-summary__icon { font-size: 22px; margin-right: 10px; line-height: 0; color: #DC2626; } .alert-summary__title { font-weight: 600; } .alert-summary__description { font-weight: 500; font-size: 16px; } .alert-summary__description:not(:last-of-type) { margin-bottom: 15px; } /*.alert-success{ font-size: 14px; letter-spacing: 0.6px; position: absolute; right: 30px; top: 75px; display: none; } #error-alert{ font-size: 14px; letter-spacing: 0.6px; position: fixed; width: 100%; top: 51px; z-index: 10; }*/ /** * Owl Carousel v2.3.4 * Copyright 2013-2018 David Deutsch * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE */ /* * Owl Carousel - Core */ .owl-carousel { display: none; width: 100%; -webkit-tap-highlight-color: transparent; /* position relative and z-index fix webkit rendering fonts issue */ position: relative; z-index: 1; } .owl-carousel .owl-stage { position: relative; -ms-touch-action: pan-Y; touch-action: manipulation; -moz-backface-visibility: hidden; /* fix firefox animation glitch */ } .owl-carousel .owl-stage:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .owl-carousel .owl-stage-outer { position: relative; overflow: hidden; /* fix for flashing background */ -webkit-transform: translate3d(0px, 0px, 0px); } .owl-carousel .owl-wrapper, .owl-carousel .owl-item { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); } .owl-carousel .owl-item { position: relative; min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .owl-carousel .owl-item img { display: block; width: 100%; } .owl-carousel .owl-nav.disabled, .owl-carousel .owl-dots.disabled { display: none; } .owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-dot { cursor: pointer; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next, .owl-carousel button.owl-dot { background: none; color: inherit; border: none; padding: 0 !important; font: inherit; } .owl-carousel.owl-loaded { display: block; margin: 20px 0 30px 0; } .owl-carousel.owl-loading { opacity: 0; display: block; } .owl-carousel.owl-hidden { opacity: 0; } .owl-carousel.owl-refresh .owl-item { visibility: hidden; } .owl-carousel.owl-drag .owl-item { -ms-touch-action: pan-y; touch-action: pan-y; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel.owl-grab { cursor: move; cursor: grab; } .owl-carousel.owl-rtl { direction: rtl; } .owl-carousel.owl-rtl .owl-item { float: right; } /* No Js */ .no-js .owl-carousel { display: block; } /* * Owl Carousel - Animate Plugin */ .owl-carousel .animated { animation-duration: 1000ms; animation-fill-mode: both; } .owl-carousel .owl-animated-in { z-index: 0; } .owl-carousel .owl-animated-out { z-index: 1; } .owl-carousel .fadeOut { animation-name: fadeOut; } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } /* * Owl Carousel - Auto Height Plugin */ .owl-height { transition: height 500ms ease-in-out; } /* * Owl Carousel - Lazy Load Plugin */ .owl-carousel .owl-item { /** This is introduced due to a bug in IE11 where lazy loading combined with autoheight plugin causes a wrong calculation of the height of the owl-item that breaks page layouts */ } .owl-carousel .owl-item .owl-lazy { opacity: 0; transition: opacity 400ms ease; } .owl-carousel .owl-item .owl-lazy[src^=""], .owl-carousel .owl-item .owl-lazy:not([src]) { max-height: 0; } .owl-carousel .owl-item img.owl-lazy { transform-style: preserve-3d; } /* * Owl Carousel - Video Plugin */ .owl-carousel .owl-video-wrapper { position: relative; height: 100%; background: #000; } .owl-carousel .owl-video-play-icon { position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background: url("owl.video.play.png") no-repeat; cursor: pointer; z-index: 1; -webkit-backface-visibility: hidden; transition: transform 100ms ease; } .owl-carousel .owl-video-play-icon:hover { -ms-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); } .owl-carousel .owl-video-playing .owl-video-tn, .owl-carousel .owl-video-playing .owl-video-play-icon { display: none; } .owl-carousel .owl-video-tn { opacity: 0; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: contain; transition: opacity 400ms ease; } .owl-carousel .owl-video-frame { position: relative; z-index: 1; height: 100%; width: 100%; } .searh-in { background-color: #D7F5F4; position: relative; color: #118886; } .searh-in::before { bottom: 0; left: 0; right: 0px; top: 0px; position: absolute; content: " "; background: url('https://res.cloudinary.com/turna/image/upload/q_auto,f_auto/Images/Common/cloud-left.png'); background-repeat: no-repeat; background-size: auto 100%,auto 100%,cover; height: 500px; } .searh-in::after { bottom: 0; left: 0; right: 0px; top: 0px; position: absolute; content: " "; background: url('https://res.cloudinary.com/turna/image/upload/q_auto,f_auto/Images/Common/cloud-right.png'); background-repeat: no-repeat; background-position: right top; } .searh-in div { z-index: 2; } .searh-in .text-center { z-index: 2; } @media (max-width:800px) { .div-landingpage .in { margin-top: 51px; width: 84%; overflow: hidden; padding: 70px 2% 0; } } @media (min-width:801px) { .div-landingpage .in { margin-top: 51px; width: 84%; overflow: hidden; padding: 60px 8% 0; } } .div-landingpage .in h1 { font-size: 38px; font-weight: 500; text-align: center; margin-bottom: 0; padding-bottom: 0; margin-top: 12px; } .div-landingpage .in h3 { font-size: 28px; text-align: center; margin-top: 5px; padding-bottom: 10px; } /**************************************************** ***=========CREATRIX IDEAS POINT TO TICKET STYLE==*** ***********************2016************************** ****************************************************/ @media (max-width:768px) { .div-point-ticket { width: 98%; height: auto; margin: 0px auto 80px auto; background-color: #f7ffff; border-radius: 20px; overflow: hidden; } .div-landingpage .in h1 { font-size: 36px !important; margin-top: 40px !important; } .div-point-ticket h2 { font-size: 18px !important; } } @media (min-width:769px) { .div-point-ticket { width: 90%; height: auto; margin: 0px 5% 80px 5%; background-color: #f7ffff; border-radius: 20px; overflow: hidden; } } .point-ticket-container { width: 100%; overflow: hidden; position: relative; } .point-ticket-container h2 { width: 90%; position: relative; /* height: 100%;*/ color: #FFF; background-color: #ff8b1a; padding: 10px; border-top-right-radius: 5px; border-bottom-right-radius: 21px; margin-bottom: 28px; margin-left: 20px; margin-top: 20px; font-size: 20px; } .point-ticket-control.active h2 { width: 100%; margin-left: 0px; font-size: 18px; } .point-ticket-container > div > h2 > i { position: absolute; width: 60px; height: 39px; line-height: 39px; border-radius: 100%; padding: 10px 0; background-color: #ff8b1a; color: #FFF; font-style: normal; left: -17px; top: -7px; text-align: center; font-size: 32px; -webkit-box-shadow: 0px 0px 27px -5px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 27px -5px rgba(0,0,0,0.75); box-shadow: 0px 0px 27px -5px rgba(0,0,0,0.75); } .point-ticket-container > div > h2 > span { display: block; text-align: center; } .point-ticket-container > .point-ticket-control { width: 50% !important; display: block; padding: 6px; float: left; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; border-right: 5px solid #d7f5f4; opacity: 0.5; filter: alpha(opacity=50); /* For IE8 and earlier */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .point-ticket-container > .point-ticket-control:hover { opacity: 1; filter: alpha(opacity=100); /* For IE8 and earlier */ } .point-ticket-container > .point-ticket-control.active { width: 60% !important; margin: 0 20% !important; float: none; border-right: 0; opacity: 1; filter: alpha(opacity=100); /* For IE8 and earlier */ } .point-ticket-container > .point-ticket-change { width: 50% !important; display: block; padding: 6px; float: right; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .point-ticket-container .item { padding: 5px; font-size: 16px; color: #000; padding-bottom: 7px; overflow: hidden; margin-left: 20px; width: 90%; text-align: left; } .point-ticket-control.active .item { margin-left: 0px; width: 100%; } .point-ticket-container .red { color: #f00 !important; } .point-ticket-container > div > .item.win-point { font-size: 18px; margin-bottom: 48px; } .point-ticket-container .item span { font-size: 14px; text-align: left; color: #118886; float: left; letter-spacing: 0.0625em; font-weight: 500; } .point-ticket-container > div > .item p { color: #118886; letter-spacing: 0.0625em; } .point-ticket-container > div > .item p.cvv-tooltip { font-size: 12px; } .point-ticket-info { width: 80%; margin: 0 10%; } .point-ticket-info > h3 { padding: 0 10px 20px !important; text-align: center !important; font-size: 32px !important; color: #38B0AE; } .point-ticket-info > ul.infos { list-style: none; margin: 0; padding: 0; margin-bottom: 50px; } .point-ticket-info > ul.infos > li { padding: 10px 20px 20px; font-size: 14px; line-height: 22px; color: #2c2c2c; } .point-ticket-info > ul.infos > li > strong { padding: 10px 0; font-size: 18px; color: #ff6a00; } .form-input-control { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #ffffff; border: 1px solid #cce2e2; text-align: left; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .btnClick { background-color: #41b7b3; padding: 10px 30px; border-radius: 4px !important; color: #fff !important; text-decoration: none; font-size: 20px; outline: 0; border: none; float: left; } #btnpointpayment { float: none; } #txtPoints { background-color: #fff; box-shadow: 0 0 5px rgba(81,203,238,1) !important; -webkit-box-shadow: 0 0 5px rgba(81,203,238,1) !important; -moz-box-shadow: 0 0 5px rgba(81,203,238,1) !important; border: 1px solid rgba(81,203,238,1) !important; outline: 0 !important; } .payment-validation { font-size: 17px; text-align: left; padding: 10px 0 10px 10px; background-color: #FF3200; color: #fff; border: 1px solid #FF3200; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .btnabs { width: auto !important; position: absolute; bottom: 10px; right: 27px; } .refund-desc { background-color: #fff; color: #528a88; border: 1px solid #f1f1f1; text-align: left; padding: 13px; font-size: 14px; width: 89%; margin: auto; border-radius: 14px; letter-spacing: 0.0335em; } .left.item { float: left; width: 34%; margin: 10px 0 10px 5%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .right.item { float: right; width: 59%; margin: 10px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .point-ticket-container .input-converted-points-wrapper span { color: #656565; font-size: 16px; } .summary-desc { background-color: #fffff7; color: #528a88; border: 1px solid #f1f1f1; text-align: left; padding: 37px; font-size: 20px; width: 100%; margin: 53px auto; letter-spacing: .0335em; overflow: hidden; } .home-href { float: left; margin-top: 50px; } .new-card { float: right; margin-top: 50px; } .home-href a, .new-card a { background-color: #41b7b3; padding: 14px 30px; color: #fff !important; text-decoration: none; font-size: 20px; border-radius: 3px; } @media (max-width:1025px) { .point-ticket-container > .point-ticket-control.active.summary-wrapper { width: 80% !important; margin: 0 10% !important; } } .credit-card-desc { background-color: #fff; overflow: hidden; font-size: 14px; } .credit-card-desc ul { margin-left: 30px; } .credit-card-desc .div-article { margin: 50px auto; padding: 10px 20px; border: 1px solid #e7e7e7; width: 85%; } .credit-card-desc .div-article p strong { font-weight: 500; font-size: 16px; } .credit-card-desc .div-article li{ list-style-type: disc; line-height: 28px; } .item.flex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .item.flex .card-cvv-wrapper{ margin-bottom: 10px; } .card-cvv-wrapper input{ max-width: 100px; } @media screen and (max-width:1230px) { .item.flex { -ms-flex-wrap: wrap; flex-wrap: wrap; } } .saved-cards-wrapper .cvv-form-wrapper .cvv-form .cvv-input input[type=number]::-webkit-inner-spin-button, .saved-cards-wrapper .cvv-form-wrapper .cvv-form .cvv-input input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0; } ..automatic-convertion-consent { display: none; } body[dir='rtl'] .point-ticket-container #point-ticket-control h2 i { left: unset; right: -17px; } body[dir='rtl'] .point-ticket-container #point-ticket-control h2 { border-radius: unset; border-top-left-radius: 5px; border-bottom-left-radius: 21px; } body[dir='rtl'] .point-ticket-container #point-ticket-control .item span{ float: right; } body[dir='rtl'] .point-ticket-container #point-ticket-control .item .credit__card__date { display:flex; } body[dir='rtl'] .form-input-control{ text-align: unset; text-align: right; } body[dir='rtl'] .point-ticket-container #point-ticket-control .item .credit__card__cvv { display: flex; } :root { --text-primary-color: #000000; --white: #fff; --text-secondary-color: #AAAAAA; --border-color: #DDDDDD; --border: 1px solid var(--border-color); --transition: .3s; --radius: 8px; --main-color: #01007F; --second-color: #2321FF; --icon-color: #000000; --bg-gray: #F8F9FB; --main-light-color: #f4f4ff; } body { font-family: "Inter", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.43; color: var(--text-primary-color); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body[dir='rtl'] { font-family: sans-serif !important; } .clearfix { clear: both; width: 100%; height: 1px; } /** START CSS CODE**/ .gradient-grt-wht { border-width: 1px; border-style: solid; -webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(#cccccc), to(rgba(0, 0, 0, 0))) 1 100%; -webkit-border-image: -webkit-linear-gradient(#cccccc, rgba(0, 0, 0, 0)) 1 100%; -moz-border-image: -moz-linear-gradient(#cccccc, rgba(0, 0, 0, 0)) 1 100%; -o-border-image: -o-linear-gradient(#cccccc, rgba(0, 0, 0, 0)) 1 100%; border-image: linear-gradient(to bottom, #cccccc, rgba(0, 0, 0, 0)) 1 100%; } .reservation-done-note { padding: 5px 10px; font-size: 13px; border-bottom: 1px solid var(--border-color); color: var(--text-primary-color); } .reservation-done-note a { color: var(--main-color); font-weight: 600; } .reservation-done { padding: 0; } .reservation-done .details { font-size: 14px; line-height: 27px; color: var(--text-primary-color); } .reservation-done a { color: var(--text-primary-color); } .trn-payment-container { position: relative; display: inline-block; width: 100%; color: var(--text-primary-color); } .trn-payment-box { position: relative; display: block; border: 1px solid var(--border-color); border-radius: var(--radius); background-color: var(--white); width: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .phoneverify { width: 100%; border: 1px solid var(--border-color); height: 48px; position: relative; display: inline-block; vertical-align: middle; white-space: nowrap; display: flex; align-items: center; } .phoneverify .select-wrapper { float: left; position: relative; padding: 3px; width: 60px; height: 48px; font-size: 16px; margin-right: 0; } .phone-verify-info-messages { float: left; display: block; width: 100%; font-size: .8em; color: var(--text-secondary-color); text-align: left !important; margin-top: 4px; margin-bottom: 5px; } .phone-verify-info-messages .info-regular { color: var(--text-secondary-color); } .phone-verify-info-messages .info-success { color: #62deaf; } .phone-verify-info-messages .info-error { color: #FF3200; } .verify-phone-caption { text-align: center; font-weight: bold; font-size: 18px !important; margin-bottom: 10px; } .verify-phone-form { text-align: center; } .verify-phone-form-body { width: 70%; margin: auto; } .submit-phone-form-body { width: 100%; } .grayscale { color: var(--text-secondary-color) !important; text-align: center; margin-top: 20px; margin-bottom: 20px; } .color-orange { color: var(--main-color) !important; font-weight: bold; } .margin-top-60 { margin-top: 60px !important; } .verify-phone-form-label { width: 100%; float: left; text-align: left !important; padding-right: 2%; line-height: 36px; font-size: 12px; font-weight: bold; } .has-any-issues { width: 100%; text-align: center; margin-top: 20px; } .user-phone-span { color: var(--second-color) !important; font-weight: 600; } .phoneverify input[type=text] { border: 0; padding: 3px; width: 70%; height: 35px; font-size: 16px; } .verify-phone-trn { width: 100% !important; max-width: 320px !important; border-radius: var(--radius); } .submit-phone-trn { border-radius: var(--radius); } #txtPhoneVerify { height: 43px; padding: 0px 90px 0px 0px; padding-left: 10px !important; border: 0 !important; width: 82%; margin-bottom: unset; } #btn-send-verification-code { font-weight: bold; padding: 12px 0 !important; background-color: var(--second-color); border: none; border-radius: 6px; } #verification-code { text-align: center; letter-spacing: 0.40em; font-weight: 600; text-transform: uppercase; color: var(--text-primary-color); height: 48px; border-radius: 6px; } .phoneverify button.phone-number-verify { position: absolute; right: 10px; background: var(--second-color) !important; color: var(--white) !important; border: 0 !important; line-height: 0; font-size: 14px !important; width: auto !important; padding: 13px 8px !important; display: inline-block !important; border-radius: calc(var(--radius) / 2); margin: 0 !important; top: 50%; transform: translateY(-50%); } .phoneverify button.passive { background: #878787 !important; } .phoneverify .select-wrapper .phoneverifyprefix { float: none; bottom: 0; left: 0; right: 0; top: 0; height: 100%; width: 60px; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); position: absolute; -webkit-appearance: none; padding: 5px 20px; color: var(--text-primary-color); z-index: 10; padding: 0px; margin: 0px; } .phoneverify .select-wrapper .select-value { padding: 11px; font-size: 15px; font-weight: 600; } .phoneverify .select-wrapper .select-value .value { padding-right: 10px; } .phoneverify .select-wrapper .select-value .select-icon { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid var(--text-primary-color); right: 0px; top: 50%; transform: translateY(-50%); position: absolute; } .details-input-label { text-align: left; margin-bottom: 4px; } .details-input-value { width: 100%; } .trn-verify-phone { padding: 2px 18px; color: var(--main-color); background-color: var(--white); margin-top: 10px; box-sizing: border-box; font-size: 13px; font-weight: 600; letter-spacing: .0325em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; border: 1px solid var(--border-color); } .trn-payment-box .trn-payment-box-caption { position: relative; display: inline-block; width: 100%; color: var(--text-primary-color); box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; line-height: 30px; font-size: 17px; padding: 3px 5px 5px; } .trn-payment-box .trn-payment-box-caption img { float: left; display: block; margin: 3px 10px 0 5px; } .trn-payment-box .trn-payment-box-content { position: relative; display: inline-block; width: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .trn-payment-box .trn-payment-box-content .payment-win-point { height: 0; width: 0; border-right: 40px solid var(--text-primary-color); border-bottom: 40px solid transparent; position: absolute; z-index: 5; margin: 0px; right: 0; } .trn-payment-box .trn-payment-box-content .payment-win-point span { color: var(--white); font-size: 15px; font-weight: 600; position: absolute; left: 28px; width: 40px; display: block; margin-left: -22px; text-align: center; } .trn-payment-box.trn-payment-summary .trn-payment-box-content { padding: 0; } .trn-payment-left { float: left; width: 72%; } .trn-payment-right { float: right; width: 25.5%; } .trn-payment-continue { border: none !important; background-color: var(--bg-gray) !important; } .trn-payment-box .trn-payment-box-use-points { padding: 2px 0; background-color: var(--white); margin-top: 10px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; border: 1px solid var(--border-color); border-radius: calc(var(--radius) / 2); } .trn-payment-box .trn-payment-box-use-points.trn-payment-disabled { opacity: 0.5; } .trn-payment-box .trn-payment-box-use-points a { display: block; position: relative; width: 100%; padding: 8px 0; padding-left: 45px; /*background: url(https://res.cloudinary.com/turna/image/upload/q_auto,f_auto/Images/Icons/Common/ic_plus.png) no-repeat left 20px center;*/ box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; font-size: 13px; font-weight: 600; letter-spacing: 0.0325em; color: var(--main-color); } .trn-payment-box .trn-payment-box-use-points a::before { content: "\e984"; position: absolute; left: 20px; top: 50%; font-family: turna; font-size: 16px; transform: translateY(-50%); } .trn-payment-box .point-payment-button-info { position: relative; padding: 15px 15px 15px 40px; background-color: var(--bg-gray); font-size: 13px; margin-top: 15px; border: 1px solid var(--border-color); color: var(--text-primary-color); } .trn-payment-box .point-payment-button-info::before { content: "\e948"; display: block; position: absolute; width: 20px; height: 20px; font-family: "turna"; line-height: 1; font-size: 20px; left: 10px; top: 15px; } .trn-payment-box .point-payment-button-info strong { font-weight: bold; } .trn-payment-flight-info { position: relative; display: inline-block; width: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; border-bottom: 1px solid var(--border-color); } .trn-ferry::before { content: "\e966"; font-family: turna; } .trn-payment-flight-info .trn-payment-flight-info-item { position: relative; display: inline-block; width: 100%; font-size: 11px; color: var(--text-secondary-color); line-height: 18px; margin: 3px 0 10px; } .trn-payment-flight-info .trn-payment-flight-info-item > strong { font-weight: 600; font-size: 14px; color: var(--text-primary-color); padding-right: 2px; } .trn-payment-flight-info .trn-payment-flight-info-item > span { font-size: 11px; display: block; width: 99%; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; overflow: hidden; } .trn-payment-services-info { position: relative; display: inline-block; width: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; margin-top: 7px; } .trn-payment-services-info li span { color: var(--text-secondary-color); } .trn-payment-services-info li strong { color: var(--text-primary-color); } .trn-payment-summary-amounts { margin-top: 7px; } .trn-payment-services-info ul.trn-payment-services-amount { list-style: none; padding: 0; margin: 0; } .trn-payment-services-info ul.trn-payment-services-amount > li { display: inline-block; width: 100%; padding: 2px 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .trn-payment-services-info ul.trn-payment-services-amount > li > span { font-size: 13px; } .trn-payment-services-info ul.trn-payment-services-amount > li > strong { font-size: 14px; float: right; } .trn-payment-services-info ul.trn-payment-services-amount > li.trn-payment-point { border-top: 1px solid var(--border-color); padding-top: 4%; margin-top: 4%; } .trn-payment-services-info ul.trn-payment-services-amount > li.trn-payment-point-toggle { display: none; } .trn-payment-summary-amounts ul.trn-payment-services-total-amount { list-style: none; padding: 8px 16px; margin: 0; background-color: var(--bg-gray); } .trn-payment-summary-amounts ul.trn-payment-services-total-amount .total-ticket-amount { font-weight: 700; } .trn-payment-summary-amounts ul.trn-payment-services-total-amount > li { display: inline-block; width: 100%; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; line-height: 30px; } .trn-payment-summary-amounts ul.trn-payment-services-total-amount > li > span { font-size: 14px; font-weight: 600; color: var(--text-primary-color); } .trn-payment-summary-amounts ul.trn-payment-services-total-amount > li.guard > span { font-size: 14px; font-weight: normal; } .trn-payment-summary-amounts ul.trn-payment-services-total-amount > li.guard > span > img { margin-bottom: 4px; } .trn-payment-summary-amounts ul.trn-payment-services-total-amount > li > strong { font-size: 20px; float: right; font-weight: 600; color: var(--text-primary-color); } .trn-payment-summary-amounts ul.trn-payment-services-total-amount > li.information { font-size: 11px; font-style: italic; color: var(--text-secondary-color); padding: 4px 0; line-height: 14px; } .trn-payment-box.trn-payment-continue .trn-payment-box-content { padding: 4% 0; } .trn-payment-continue ul.trn-payment-continue-info { list-style: none; padding: 0; margin: 0; width: 100%; } .trn-payment-continue ul.trn-payment-continue-info > li { display: inline-block; width: 100%; padding: 4px 0; font-size: 14px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .trn-payment-continue ul.trn-payment-continue-info > li > label > span > a { text-decoration: underline; color: var(--text-primary-color); font-weight: 600; font-style: normal; } .trn-payment-continue ul.trn-payment-continue-info > li > label > span > a:hover { color: var(--main-color); } .trn-payment-continue ul.trn-payment-continue-info > li.trn-payment-continue-button a { background-color: var(--second-color) !important; border-radius: 6px; display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: center; text-decoration: none; color: var(--white); font-weight: 600; font-size: 15px; padding: 10px 15px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; margin: 5px 0 0; line-height: 32px; } .trn-payment-continue ul.trn-payment-continue-info > li.trn-payment-saved-card-button a { background-color: var(--second-color) !important; border-radius: 6px; display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: center; text-decoration: none; color: var(--white); font-weight: 600; font-size: 15px; padding: 10px 15px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; margin: 5px 0 0; line-height: 32px; } .trn-payment-continue ul.trn-payment-continue-info > li.trn-payment-bkm-button a { background-color: var(--second-color); display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: center; text-decoration: none; color: var(--white); font-weight: 600; font-size: 16px; padding: 10px 15px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; margin: 5px 0 0; line-height: 32px; } .trn-payment-credit-card { position: relative; display: inline-block; width: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .trn-payment-credit-card ol.trn-payment-tab { list-style: none; padding: 0; margin: 0; width: 100%; border-bottom: 1px solid var(--border-color) !important; display: -webkit-box; display: -ms-flexbox; display: flex; } .trn-payment-credit-card .trn-payment-tab li { position: relative; text-align: center; padding: 15px; background-color: var(--bg-gray); color: var(--text-secondary-color); font-size: 15px; cursor: pointer; margin-bottom: -1px; border-top: 1px solid var(--border-color); -webkit-box-shadow: inset 0px -9px 49px -21px rgba(220, 220, 220, 0.75); -moz-box-shadow: inset 0px -9px 49px -21px rgba(220, 220, 220, 0.75); box-shadow: inset 0px -9px 49px -21px rgba(220, 220, 220, 0.75); box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .trn-payment-credit-card .trn-payment-tab li:first-child { border-left: 1px solid var(--border-color); } .trn-payment-credit-card .trn-payment-tab li:not(:last-child) { border-right: 1px solid var(--border-color); } .trn-payment-credit-card .trn-payment-tab li:last-child { border-right: 1px solid var(--border-color); } .trn-payment-credit-card .trn-payment-tab li:hover { color: var(--text-primary-color); } .trn-payment-credit-card .trn-payment-tab li strong { font-weight: 700; } .trn-payment-credit-card .trn-payment-tab li.active { background-color: var(--white); color: var(--text-primary-color); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .trn-payment-credit-card .trn-payment-tab li.active:before { content: ""; display: block; position: absolute; left: 0px; right: -1px; top: -9px; height: 10px; border-width: 1px 1px 0 1px; border-style: solid; border-color: var(--border-color); box-sizing: border-box; margin-left: -1px; background-color: var(--white); } .trn-payment-credit-card .trn-payment-tab li.active strong { font-weight: bold; } .trn-payment-tab-items { display: inline-block; position: relative; } .trn-payment-credit-card .trn-payment-credit-card-info { float: left; display: block; width: 52%; } .trn-payment-credit-card .trn-payment-credit-card-info ul { list-style: none; padding: 20px 5% 0; margin: 0; } .trn-payment-credit-card .trn-payment-credit-card-info .trn-bkm-content { padding: 20px 8%; margin: 0; font-size: 13px; line-height: 22px; text-align: justify; color: var(--text-primary-color); } .trn-payment-credit-card .trn-payment-credit-card-info ul > li { width: 100%; display: inline-block; padding: 4px; margin-bottom: 10px; } .trn-payment-credit-card .trn-payment-credit-card-info ul > li { width: 100%; display: inline-block; padding: 4px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .trn-payment-credit-card .trn-payment-credit-card-info ul > li.trn-payment-credit-card-note { font-size: 11px; color: var(--text-secondary-color); position: relative; padding: 10px 35% 10px 13px; background-color: var(--bg-gray); width: 97.5%; margin-left: 4px; } .trn-payment-credit-card .trn-payment-credit-card-info ul > li.trn-payment-credit-card-note strong { font-weight: 600; } .trn-payment-credit-card-note .trn-payment-installment-note a { color: var(--second-color); font-size: 12px; position: absolute; top: 10px; right: 5px; padding: 8px; } .inst-open-show-all { color: var(--text-primary-color); font-size: 12px; position: relative; margin-bottom: 0 !important; padding-bottom: 0 !important; } .inst-open-show-all .trn-payment-installment-note a { color: var(--main-color); font-size: 11px; position: absolute; top: 5px; right: 6px; } .trn-payment-credit-card .trn-payment-credit-card-info ul > li.trn-payment-credit-cvc { width: 40%; float: left; } .trn-payment-credit-card .trn-payment-credit-card-info ul > li.trn-payment-credit-cvc input[type=text] { width: 100%; max-width: 150px; } .trn-payment-credit-card .trn-payment-credit-card-info ul > li.trn-payment-credit-cvc label a { color: var(--second-color) !important; font-size: 10px; font-weight: 600; } .trn-payment-credit-card .trn-payment-credit-card-info ul > li.trn-payment-credit-card-date { width: 60%; float: left; } .trn-payment-credit-card .trn-payment-credit-card-info ul > li.trn-payment-credit-card-date select { width: 48%; padding: 0 4%; display: inline-block; border-radius: 3px; color: var(--text-primary-color); font-size: 16px; height: 40px; border: 1px solid var(--border-color); box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; outline: none; } .trn-payment-credit-card .trn-payment-credit-card-info ul > li label { width: 100%; display: inline-block; color: var(--text-primary-color); font-size: 12px; margin-bottom: 5px; } .trn-payment-credit-card .trn-payment-credit-card-info ul > li input[type=text] { width: 100%; padding: 0 4%; display: inline-block; color: var(--text-primary-color); border-radius: 3px; font-size: 16px; height: 40px; border: 1px solid var(--border-color); box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; outline: none; } .trn-payment-credit-card .trn-payment-credit-card-info ul > li { position: relative; } .trn-payment-credit-card .trn-payment-credit-card-info ul > li.visa::before { content: ""; position: absolute; right: 10px; background: url(https://res.cloudinary.com/turna/image/upload/q_auto,f_auto/Images/Icons/Common/ic_visacard.png) no-repeat right 10px center; z-index: 999; width: 60px; height: 40px; bottom: 4px; } .trn-payment-credit-card .trn-payment-credit-card-info ul > li.master::before { content: ""; position: absolute; right: 10px; background: url(https://res.cloudinary.com/turna/image/upload/q_auto,f_auto/Images/Icons/Common/ic_mastercard.png) no-repeat right 10px center; z-index: 999; width: 60px; height: 40px; bottom: 4px; } .trn-payment-credit-card .trn-payment-credit-card-info ul > li.maestro::before { content: ""; position: absolute; right: 10px; background: url(https://res.cloudinary.com/turna/image/upload/q_auto,f_auto/Images/Icons/Common/ic_maestrocard.png) no-repeat right 10px center; z-index: 999; width: 60px; height: 40px; bottom: 4px; } body[dir='rtl'] .trn-payment-credit-card .trn-payment-credit-card-info ul > li.maestro::before, body[dir='rtl'] .trn-payment-credit-card .trn-payment-credit-card-info ul > li.master::before, body[dir='rtl'] .trn-payment-credit-card .trn-payment-credit-card-info ul > li.visa::before { right: unset; left: 10px; } .trn-payment-credit-card .trn-payment-turna-point-info > .member-turna-point { display: inline-block; position: relative; width: 100%; margin: 72px 0 0 0; height: 100%; max-height: 250px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding: 0 11%; } .trn-payment-credit-card .trn-payment-turna-point-info { float: right; display: block; width: 48%; } .trn-payment-credit-card .trn-payment-turna-point-info > .member-turna-point > .trn-point-item { display: inline-block; position: relative; height: 33%; width: 100%; vertical-align: middle; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .trn-payment-credit-card .trn-payment-turna-point-info > .member-turna-point > .trn-point-item.member-point { color: var(--text-secondary-color); text-align: center; font-size: 16px; padding-top: 6%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .trn-payment-credit-card .trn-payment-turna-point-info > .member-turna-point > .trn-point-item.member-point strong { font-size: 18px; font-weight: 600; } .trn-payment-credit-card .trn-payment-turna-point-info > .member-turna-point > .trn-point-item.win-point { background: rgba(255,255,255,1); background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 66%, rgba(247,247,247,1) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,1)), color-stop(66%, rgba(255,255,255,1)), color-stop(100%, rgba(247,247,247,1))); background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 66%, rgba(247,247,247,1) 100%); background: -o-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 66%, rgba(247,247,247,1) 100%); background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 66%, rgba(247,247,247,1) 100%); background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 66%, rgba(247,247,247,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=1 ); padding-top: 13px; padding-right: 8%; } .trn-payment-credit-card .trn-payment-turna-point-info > .member-turna-point > .trn-point-item.win-point > .trn-point { text-align: center; width: 50%; float: left; font-size: 46px; font-weight: 600; margin-left: 3%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .trn-payment-credit-card .trn-payment-turna-point-info > .member-turna-point > .trn-point-item.win-point > .trn-point > span.trn-point-sign { color: var(--text-secondary-color); font-size: 32px !important; font-weight: normal; } .trn-payment-credit-card .trn-payment-turna-point-info > .member-turna-point > .trn-point-item.win-point > span { color: var(--text-primary-color); font-size: 13px; float: left; width: 47%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .trn-payment-credit-card .trn-payment-turna-point-info > .member-turna-point > .trn-point-item.win-point strong { color: var(--main-color); font-size: 20px; float: left; width: 47%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .trn-payment-credit-card .trn-payment-turna-point-info > .member-turna-point > .trn-point-item.point-use-link { padding-top: 30px; padding-bottom: 30px; text-align: center; } .trn-payment-credit-card .trn-payment-turna-point-info > .member-turna-point > .trn-point-item.point-use-link a { color: var(--main-color); font-weight: 600; font-size: 16px; } .trn-payment-credit-card .trn-payment-turna-point-info > .member-turna-point .member-turna-point-secure-password { display: block; position: relative; max-width: 330px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; text-align: center; font-size: 14px; line-height: 18px; color: var(--text-secondary-color); margin: auto 0; padding-left: 80px; } .trn-payment-credit-card .trn-payment-turna-point-info > .member-turna-point .member-turna-point-secure-password .security-logo { position: absolute; left: 0; top: 1; width: 79px; height: 37px; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE8AAAAlCAMAAAA0hUSIAAAAjVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8DizOFAAAALnRSTlMAIKjshyL1fmdhTkUklTouJ9SkhXtZUzTxsqyKK/nz6OPYz8m6no5zakrexGxIKbYZdgAAAY5JREFUSMftk9dywjAQRbUmLriCIab3XnL///OyskBuChMmbxmfh9VwZd1tg2hpacmheHg890i8YN9hkoa8ZrVfF8MpJOdXhjswzQ+WrK7q1e2h6L7ws/jeafr1Wd7VtE9g4V0ijrbRKkjYZwBgI5NnD1Py5YAmLE/5l+0XubjbgO8PQGYcbh9pTJwUE0HnNWIl20CUkEwzEKHrINQPtqqRDDiZ/BIw6YiD6604Hp9dMTMZM7c6rD7G8vCBocnPxRMnj2vKq1Y7XGh5QkU/Y+JD+pk2vEGNWLVb5zH8rysK9mHTL7p1UGI1CfIpHHbLsny1ElVdNb1r3IgdzyC5eZceFXIYWLlsdQNbd4sKqTBBXSiOVJFdKDyWzX7Wz3bbfKFUkgda7tIbfvQJyTwf44mq1XXmkPj0e79A3dBQvXzKHiRDUjMcvVHfTD0I5UIj/Z/sSaNxKEaq7Hfm5zuI+MFdDUrLXKHHR4RxQFp0UOYgjMytnvw2HVX3G6f0vNRYKJOJv2LfPzSDC4mWlv/INyGOVleEzg1uAAAAAElFTkSuQmCC') left center no-repeat; background-color: var(--second-color); border-radius: var(--radius); -webkit-border-radius: var(--radius); -moz-border-radius: var(--radius); border-radius: var(--radius); } .trn-payment-credit-card .trn-payment-turna-point-info > .member-turna-point .member-turna-point-secure-password p { padding: 0; margin: 0 0 0 5px; font-size: 13px; display: block; } .trn-payment-credit-card .trn-payment-turna-point-info > .member-turna-point .member-turna-point-secure-password p strong { font-weight: 600; font-size: 16px; color: var(--text-primary-color); } .trn-payment-credit-card .trn-payment-turna-point-info > .member-turna-point .member-turna-point-secure-info { display: inline-block; position: relative; width: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; font-size: 12px; line-height: 19px; color: var(--text-secondary-color); padding: 25px 0px; } .trn-payment-credit-card .trn-payment-turna-point-info > .member-turna-point .member-turna-point-secure-cc-brands { display: inline-block; position: relative; width: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; font-size: 12px; line-height: 18px; color: var(--text-secondary-color); padding: 0 0 15px; } .trn-payment-credit-card .trn-payment-turna-point-info > .member-turna-point .member-turna-point-secure-cc-brands img { width: 100%; } .trn-payment-credit-card .trn-payment-installment-info { display: block; width: 100%; margin-left: 26px; position: relative; } .trn-payment-credit-card .trn-payment-installment-info table, .trn-payment-credit-card .trn-payment-installment-info thead, .trn-payment-credit-card .trn-payment-installment-info tbody { width: 45.5%; } .installments-table { border: 1px solid var(--border-color); } .trn-payment-credit-card .trn-payment-installment-info table > thead { background-color: var(--bg-gray); border-bottom: 1px solid var(--border-color); } .trn-payment-credit-card .trn-payment-installment-info table > thead th { text-align: center; padding: 10px 0; font-weight: 600; font-size: 12px; color: var(--text-primary-color); background-color: var(--bg-gray); border-bottom: 1px solid var(--border-color); } .trn-payment-credit-card .trn-payment-installment-info table.trn-payment-multi-installment > tbody td { text-align: center; padding: 8px 0; font-size: 14px; color: var(--text-primary-color); position: relative; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; overflow: hidden; max-width: 74px; } .trn-payment-credit-card .trn-payment-installment-info table.trn-payment-multi-installment > tbody td.monthly-amount:before { content: "x"; margin-right: 6px; font-size: 12px; color: var(--text-secondary-color); } .trn-payment-credit-card .trn-payment-installment-info table.trn-payment-multi-installment > tbody td.cash { font-size: 12px; } .trn-payment-credit-card .trn-payment-installment-info table.trn-payment-multi-installment > tbody td.cash strong { font-size: 16px; font-weight: 600; } .trn-payment-credit-card .trn-payment-installment-info table.trn-payment-multi-installment > tbody td:nth-child(1) { width: 40px !important; padding-left: 10px; } .trn-payment-credit-card .trn-payment-installment-info table.trn-payment-multi-installment > tbody td:nth-child(2) { color: var(--text-primary-color); font-weight: 600; text-align: left; } .trn-payment-credit-card .trn-payment-installment-info table.trn-payment-multi-installment > thead th:nth-child(4), .trn-payment-credit-card .trn-payment-installment-info table.trn-payment-multi-installment > tbody td:nth-child(4) { text-align: right; padding-right: 10px; } .trn-payment-credit-card .trn-payment-installment-info table.trn-payment-multi-installment > tbody tr { cursor: pointer; } .trn-payment-credit-card .trn-payment-installment-info table.trn-payment-multi-installment > tbody tr:hover { background-color: var(--main-light-color); } .trn-credit-card-content { font-weight: 600; } /*checbox*/ input[type=checkbox].cbox-standart { position: absolute; z-index: -1000; left: -1000px; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } label[for="cboxmailing"].cbox-label-standart span::before, label[for="invoice-checkbox"].cbox-label-standart span::before { position: absolute; left: 0; content: ""; width: 16px; height: 16px; display: inline-block; border: 1px solid var(--border-color); } body[dir='rtl'] label[for="cboxmailing"].cbox-label-standart span::before, body[dir='rtl'] label[for="invoice-checkbox"].cbox-label-standart span::before { left: unset; right: 0; } input[type=checkbox].cbox-standart + label.cbox-label-standart { position: relative; padding-left: 21px; height: 21px; display: block; line-height: 18px; cursor: pointer; position: relative; } input[type=checkbox].cbox-standart:checked + label.cbox-label-standart span::before { border-color: var(--main-color); background-color: var(--main-color); } input[type=checkbox].cbox-standart:checked + label.cbox-label-standart span::after { position: absolute; left: 1px; top: -1px; content: "\e936"; font-family: turna; font-size: 16px; display: inline-block; color: var(--white); } body[dir='rtl'] input[type=checkbox].cbox-standart:checked + label.cbox-label-standart span::after { right: 1px; left: unset; } /*label.cbox-label-standart { margin-right: 8px; }*/ span.span-standart { margin-top: 2px; display: block; font-size: 13px; } body[dir='rtl'] span.span-standart { padding-left: unset; padding-right: 20px; } /*/*radiobutton*/ input[type=radio].rbox-standart { position: absolute; z-index: -1000; left: -1000px; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } input[type=radio].rbox-standart + label.rbox-label-standart { height: 21px; width: 21px; background-repeat: no-repeat; font-size: 21px; cursor: pointer; position: absolute; top: 8px; left: 14px; } input[type=radio].rbox-standart:checked + label.rbox-label-standart { background-position: 0 -21px; } label.rbox-label-standart { background-image: url(https://res.cloudinary.com/turna/image/upload/q_auto,f_auto/Images/Icons/Common/ic_installment_radiobox.png); -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: block; float: left; margin-right: 8px; } /* BEGIN: All Installments */ #installment-options { display: none; } #installment-options.trn-modal > .trn { max-width: 1000px; } .trn-installement-option-items { width: 100%; position: relative; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; background-color: var(--bg-gray); border-radius: var(--radius); padding: 20px 0; display: -webkit-box; display: -ms-flexbox; display: flex; } .trn-installement-option-items * { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .trn-installement-option-items > .trn-installement-option-item { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .trn-installement-option-items > .trn-installement-option-item:not(:last-child) { border-right: 1px dotted var(--border-color); } .trn-installement-option-items > .trn-installement-option-item > .trn-installement-option-item-caption { position: relative; text-align: center; margin-bottom: 15px; } .trn-installement-option-items > .trn-installement-option-item > .trn-installement-option-item-caption img { max-width: 100px; width: 100%; } .trn-installement-option-items > .trn-installement-option-item ul { list-style: none; width: 100%; display: block; margin: 0; } .trn-installement-option-items > .trn-installement-option-item ul li { width: 100%; margin: 0; background-color: var(--bg-gray); padding: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .trn-installement-option-items > .trn-installement-option-item ul li .installement-label { font-weight: 600; font-size: 14px; color: var(--text-primary-color); margin-bottom: 2px; } .trn-installement-option-items > .trn-installement-option-item ul li .installement-amount { font-size: 14px; color: var(--text-primary-color); } .trn-installement-option-items > .trn-installement-option-item ul li > strong { font-size: 13px; font-weight: 600; color: var(--text-primary-color); display: block; width: 100%; } /* END: All Installments */ /* BEGIN: Old payment css */ #point-payment .color-turquoise-orange { color: var(--main-color); } #point-payment.trn-modal > .trn .trn-form button { height: 42px; padding: 5px; width: 101.5%; } .point-payment-note { color: var(--main-color); line-height: 22px; background-color: var(--white); font-size: 13px; font-weight: 600; } .popup-with-table table td { padding: 5px 0 5px 10px; letter-spacing: .0325em; text-rendering: optimizeLegibility; vertical-align: middle; } #point-payment.trn-modal > .trn { max-width: 430px; } .validation { border: none; } .payment-validation { margin-bottom: 10px; } .point-validation { margin-bottom: 10px; font-size: 16px !important; } .point-validation-position { position: inherit; } .trn .validation { margin-top: 5px; } .turna-tooltip { max-width: 290px; } /* BEGIN: Invoice Modal */ #invoice-form.trn-modal .form-control { display: block; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #invoice-form.trn-modal .trn .trn-modal-caption { background-color: var(--white); color: var(--main-color); } #invoice-form.trn-modal .trn { background-color: var(--bg-gray); } #invoice-form label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 600; } #invoice-form table { width: 100%; } #invoice-form table td { width: 50%; max-width: 50%; } #invoice-form input, #invoice-form select { width: 100%; } #billing-name { width: 98%; } #billing-country { width: 210px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-appearance: none; } #invoice-form .btn { min-width: 150px; } #invoice-form.trn-modal textarea.form-control { height: auto; } /* END: Invoice Modal */ /* END: Old payment css */ .display-inline-block { display: inline-block; } .display-none { display: none; } /*********************** OLD INSTALLMENTS ********************************/ .logo-axess { width: 75px; } .logo-axess::before { background-position: -339px -15px !important; } .logo-bonus { width: 84px; } .logo-bonus::before { background-position: -108px -15px !important; } .logo-cardfinans { width: 128px; } .logo-cardfinans::before { background-position: -538px -15px !important; } .logo-maximum { width: 95px; } .logo-maximum::before { background-position: -430px -15px !important; } .logo-paraf { width: 70px; } .logo-paraf::before { background-position: -676px -15px !important; } .logo-world { width: 90px; } .logo-world::before { background-position: -3px -14px !important; } .program-logo { position: relative; color: var(--white); height: 30px; } .program-logo::before { width: 100%; height: 100%; position: absolute; top: 0; left: 0; color: #DDB723; color: #fff; z-index: 100; content: " "; background: url(https://res.cloudinary.com/turna/image/upload/q_auto,f_auto/Images/General/Payment/bank_programs_2020.png) no-repeat; } .installment-note-wrapper { position: absolute; position: absolute; top: 5px; width: 43%; left: 52.5% } .trn-payment-credit-card .installment-note-wrapper p { font-size: 12px; color: var(--text-secondary-color); background: none; border: none; padding-top: 0; padding-left: 7px; } .header-axess { width: 75px; } .header-axess::before { background-position: -339px -15px !important; } .header-bonus { width: 84px; } .header-bonus::before { background-position: -108px -15px !important; } .header-cardfinans { width: 128px; } .header-cardfinans::before { background-position: -538px -15px !important; } .header-maximum { width: 95px; } .header-maximum::before { background-position: -430px -15px !important; } .header-paraf { width: 70px; } .header-paraf::before { background-position: -676px -15px !important; } .header-world { width: 90px; } .header-world::before { background-position: -3px -14px !important; } .header-combo { width: 84px; } .header-combo::before { background-position: -819px -21px !important; } .header-saglam { } .header-saglam::before { width: 92px; height: 55px; background-position: -910px -7px !important; } /*********************** OLD INSTALLMENTS ********************************/ @media screen and (max-width:1024px) { .trn-payment-credit-card .trn-payment-credit-card-info { width: 56%; } .trn-payment-credit-card .trn-payment-turna-point-info { width: 44%; } .trn-payment-credit-card .trn-payment-credit-card-info ul { padding: 20px 0 0 5%; } .trn-payment-credit-card .trn-payment-turna-point-info > .member-turna-point { padding: 0 10px 0 20px; margin-top: 51px; } .trn-payment-credit-card .trn-payment-turna-point-info > .member-turna-point .member-turna-point-secure-password { padding-left: 80px; } .trn-payment-credit-card .trn-payment-turna-point-info > .member-turna-point .member-turna-point-secure-password p { font-size: 11px; width: auto; } .trn-payment-credit-card .trn-payment-turna-point-info > .member-turna-point .member-turna-point-secure-password p strong { font-size: 13px; } .trn-payment-credit-card .trn-payment-tab li { font-size: 13px; } .trn-payment-credit-card .trn-payment-installment-info { margin-left: 22px; } .trn-payment-credit-card .trn-payment-installment-info table, .trn-payment-credit-card .trn-payment-installment-info thead, .trn-payment-credit-card .trn-payment-installment-info tbody { width: 51.8%; } .installment-note-wrapper { width: 41%; left: 54%; } .trn-payment-credit-card .installment-note-wrapper p { padding-left: 10px; } .trn-payment-summary-amounts ul.trn-payment-services-total-amount { padding: 7px 10px; } .trn-payment-summary-amounts ul.trn-payment-services-total-amount > li > span { font-size: 14px; } .trn-payment-summary-amounts ul.trn-payment-services-total-amount > li > strong { font-size: 15px; } span.span-standart { font-size: 11px; } .trn-payment-continue ul.trn-payment-continue-info > li.trn-payment-continue-button a { padding: 6px 15px; } .trn-payment-continue ul.trn-payment-continue-info > li.trn-payment-bkm-button a { padding: 6px 1px 6px 4px; font-size: 13px; } #installment-options.trn-modal > .trn { max-width: 800px; } .trn-payment-credit-card .trn-payment-turna-point-info > .member-turna-point .member-turna-point-secure-cc-brands { width: 95%; } } @media(max-width: 768px) { .trn-payment-left { width: 63%; } .trn-payment-right { width: 35%; } .trn-payment-credit-card .trn-payment-credit-card-info ul { padding: 20px 5% 0; } .trn-payment-credit-card .trn-payment-turna-point-info { display: none; } .trn-payment-credit-card .trn-payment-credit-card-info { width: 100%; } .trn-payment-credit-card .trn-payment-tab li { font-size: 11px; width: 50%; padding: 20px 15px; } .trn-installement-option-items > .trn-installement-option-item > .trn-installement-option-item-caption img { width: 80%; } #installment-options.trn-modal > .trn { width: 600px; } .installment-note-wrapper { display: none; } .trn-payment-credit-card .trn-payment-installment-info table, .trn-payment-credit-card .trn-payment-installment-info thead, .trn-payment-credit-card .trn-payment-installment-info tbody { width: 88.1%; } .payment-validation { margin-top: 0px; } } /* Saved Cards Styles */ .saved-cards-content * { -webkit-box-sizing: border-box; box-sizing: border-box; } .saved-cards-content { text-align: left; line-height: 1.3; color: var(--text-primary-color); padding: 30px; } @media screen and (max-width: 1100px) { .saved-cards-content { padding: 15px; } } .saved-cards-title { margin-bottom: 5px; font-weight: bold; } .saved-cards-description { margin-bottom: 15px; color: var(--text-secondary-color); } .saved-cards-wrapper { margin-bottom: 15px; } .saved-cards-wrapper .saved-card-item { background-color: var(--bg-gray); border-radius: calc(var(--radius) / 2); } .saved-cards-wrapper .saved-card-item.selected { background-color: var(--main-light-color); border: 2px solid var(--main-color); } .saved-cards-wrapper .saved-card-item:not(:last-child) { margin-bottom: 10px; } .saved-cards-wrapper .saved-card-item .card-item-top { position: relative; padding: 15px; height: 70px; } .saved-cards-wrapper .saved-card-item .radio-button { position: absolute; left: 15px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .saved-cards-wrapper .saved-card-item .radio-button label input { display: none; } .radio-button-icon { width: 20px; height: 18px; background-size: cover; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAkBAMAAAAJEmUlAAAAMFBMVEUAAACxsbGvr6+wsLCxsbGwsLCxsbGxsbGvr6+vr6+xsbGwsLCysrKysrKvr6+xsbHaHfBYAAAAD3RSTlMAwEDwkOCggCAQsK9wYDCbdlYQAAAARklEQVQoz2Pg2PwfBcgyAEHzfzTgABTMRxf8BBSMRxf8AhT8/58BGTD9/zgqOCpInqA9RgLDlRSnogsWAAU5TwmigDqgGABgauX6vpgrRgAAAABJRU5ErkJggg=='); } .saved-cards-wrapper .saved-card-item .radio-button label input:checked + .radio-button-icon { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAkBAMAAAAJEmUlAAAAMFBMVEUAAAAxiuwxi+0xi+0wiu8wi+8wj+8wiuwxi+0wh+8xiu0xi+wyiu0wiu0yi+0yi+16RmFAAAAAD3RSTlMAwPCgMEAQYNAg4LCQb4Am+VvUAAAA0ElEQVQoz63MMQrCQBCF4YHEiKUnECWN1YoX2GWx8xKpvYSdtXgP8QoewNLOxsILmCAGLMadDclmn62v/Ph5lE442pHcDhyv3I+INGBOS0MnCE3Cc2KmeJrrH0yY34IQ8l0QwooEIVx4xBBxKyHgUMKAIcwChnANKGE67TCE9tnitQtHqsWkNE34oQG3qDlvwl0PFZdGwrrooWWXWgl7mLp0pSQM6NOZDwP6VB4jlFRCwFQeEclKiJhdCsCw/6BiWOVQI74cbhDPDrPbONrD2RccPh7RyDBT+AAAAABJRU5ErkJggg=='); } .saved-cards-wrapper .saved-card-item .card-item-top .card-info { font-size: 14px; padding-left: 40px; } .saved-cards-wrapper .saved-card-item .card-item-top .card-info .card-name { font-weight: bold; margin-bottom: 2px; } .saved-cards-wrapper .saved-card-item .card-item-top .card-info .card-number { color: var(--text-secondary-color); } .saved-cards-wrapper .saved-card-item .card-item-top .card-image { position: absolute; right: 15px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .saved-cards-wrapper .saved-card-item .card-item-top .card-image img { height: 20px; width: auto; } .saved-cards-wrapper .saved-card-item .card-item-bottom { display: none; position: relative; padding: 0 15px 15px; } .saved-cards-wrapper .saved-card-item.selected .card-item-bottom { display: block; } .saved-cards-wrapper .cvv-form-wrapper .cvv-title { font-size: 14px; font-weight: bold; margin-bottom: 8px; } .saved-cards-wrapper .cvv-form-wrapper .cvv-form { display: -webkit-box; display: -ms-flexbox; display: flex; } .saved-cards-wrapper .cvv-form-wrapper .cvv-form .cvv-description { -webkit-box-flex: 0; -ms-flex: 0 0 70%; flex: 0 0 70%; font-size: 13px; line-height: 1.2; padding-right: 10px; color: var(--text-primary-color); } .saved-cards-wrapper .cvv-form-wrapper .cvv-form .cvv-input { -webkit-box-flex: 0; -ms-flex: 0 0 30%; flex: 0 0 30%; } .saved-cards-wrapper .cvv-form-wrapper .cvv-form .cvv-input input { width: 100%; height: 40px; background-color: var(--white); border: 1px solid var(--border-color); border-radius: calc(var(--radius) / 2); padding: 0 15px; font-weight: bold; text-align: center; } .saved-cards-wrapper .cvv-form-wrapper .cvv-form .cvv-input input[type=number]::-webkit-inner-spin-button, .saved-cards-wrapper .cvv-form-wrapper .cvv-form .cvv-input input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0; } /* Payment with Turna Points */ .trn-payment-with-points, .trn-payment-with-points * { -webkit-box-sizing: border-box; box-sizing: border-box; } .trn-payment-with-points { position: relative; height: 44px; margin: 15px 0; background-color: var(--white); } .trn-payment-with-points .trn-payment-box-use-points { display: block; height: 44px; width: 100%; position: relative; font-size: 13px; font-weight: 600; color: var(--main-color); border: 1px solid var(--border-color); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 15px 0 40px; } .trn-payment-with-points .trn-payment-box-use-points::before { content: "\e984"; position: absolute; left: 15px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-family: "turna"; font-size: 18px; font-weight: normal; margin-right: 5px; } .trn-payment-with-points .point-payment-info-toggler { display: none; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(255,255,255,0.5); border: 1px solid var(--border-color); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; z-index: 200; } .trn-payment-with-points .point-payment-info-toggler.isVisible { display: -webkit-box; display: -ms-flexbox; display: flex; } .trn-payment-with-points .point-payment-info-toggler.isVisible ~ .trn-payment-box-use-points { color: var(--text-secondary-color); } /* halil todo Kampanya bitiminden sonra kaldırılacak! */ .discount-banner { position: relative; background-color: #4BB543; color: white; margin-bottom: 20px; border-radius: 3px; padding: 20px 20px 20px 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .discount-banner::before { content: ""; font-family: "turna"; } .discount-banner-icon { display: block; width: 22px; height: 22px; position: absolute; top: 50%; left: 15px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .trn-payment-content.trn-axs-content { float: left; width: 50%; padding: 20px; box-sizing: border-box; } .trn-payment-content.trn-axs-content strong { display: block; font-weight: bold; margin-bottom: 16px } .trn-payment-content.trn-axs-content p { margin-bottom: 16px; } .axs-init-payment-button { display: flex; justify-content: center; align-items: center; height: 56px; background-color: #000; text-decoration: none; font-size: 16px; font-weight: 600; line-height: 0; color: white; } .trn-payment-continue.trn-payment-box .discount-form-wrapper #campaign-code { background-color: var(--white); box-sizing: border-box; color: var(--text-primary-color); outline: 0; width: 100%; height: 50px; font-weight: bold; border: 1px solid #eaeaea; padding: 0 70px 0 20px; font-size: .9em; border-radius: 5px; position: relative; } .trn-payment-continue.trn-payment-box .discount-form-wrapper #campaign-code::placeholder { color: var(--text-secondary-color) !important; font-weight: 600; } span.span-standart a { color: var(--main-color); } /*.trn-payment-continue.trn-payment-box .discount-form-wrapper .discount-submit { position: absolute; right: 10px; top: 25%; width: 40px; height: 50px; border-radius: 50%; border: none; } body[dir="rtl"] .trn-payment-services-info ul.trn-payment-services-amount > li > strong { float: left; } body[dir="rtl"] .trn-payment-left { float: right; width: 135% !important; } body[dir="rtl"] .trn-payment-right { float: left; width: 93%; } body[dir="rtl"] .trn-payment-credit-card .trn-payment-credit-card-info { float: right; } body[dir="rtl"] .trn-payment-credit-card .trn-payment-turna-point-info { float: left; } body[dir="rtl"] .trn-payment-continue ul.trn-payment-continue-info > li.trn-payment-continue-button a > img:first-child { float: right; } body[dir="rtl"] .trn-payment-continue ul.trn-payment-continue-info > li.trn-payment-continue-button a > img:last-child { float: left; transform: scaleX(-1); }*/ .discount-form-wrapper .discount-form{ position: relative; } .trn-payment-continue.trn-payment-box .discount-form-wrapper .discount-btn { position: absolute; right: 10px; top: 50% !important; transform: translateY(-50%); width: 64px; border: none; font-size: 13px; border-radius: 12px; padding: 5px; } .trn-payment-continue.trn-payment-box .discount-form-wrapper .discount-submit { color: var(--main-color); background-color: var(--main-light-color); } .trn-payment-continue.trn-payment-box .discount-form-wrapper .discount-delete { color: var(--main-color); background-color: var(--main-light-color); } body[dir='rtl'] .trn-payment-continue.trn-payment-box .discount-form-wrapper #campaign-code { padding: 0 20px 0 0px; } body[dir='rtl'] .trn-payment-box .trn-payment-box-use-points a { padding-right: 45px; } body[dir='rtl'] .trn-payment-box .trn-payment-box-use-points a::before { left: unset; right: 20px; } /*body[dir='rtl'] .inst-open-show-all .trn-payment-installment-note a { color: #137f8c; font-size: 11px; position: absolute; top: 5px; right: 268px; } .otel-payment-section { margin-top: -110px; margin-left : -10px; } .otel-payment-section .div-reservation-payment{ max-width: 1290px; padding: unset; } .otel-payment-section .div-reservation-payment .trn-payment-container { display: flex; justify-content: space-between; }*/ body[dir='rtl'] .trn-payment-continue.trn-payment-box .discount-form-wrapper .discount-btn { left: 10px !important; right: unset !important; } body[dir='rtl'] .trn-payment-services-info ul.trn-payment-services-amount > li > strong, body[dir='rtl'] .trn-payment-summary-amounts ul.trn-payment-services-total-amount > li > strong { float: left; } body[dir='rtl'] .trn-payment-right { float: left; } body[dir='rtl'] .trn-payment-left { float: right; } body[dir='rtl'] .trn-payment-button img:last-child { transform: scaleX(-1); } .trn-payment-hotel-info { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; padding: 16px 16px 0 16px; } .trn-payment-hotel-info-item { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; } .trn-payment-hotel-info-title { font-size: 14px; line-height: 19px; font-weight: 600; } .trn-payment-hotel-info-subitem { display: flex; justify-content: center; align-items: center; gap: 8px; } .trn-payment-hotel-info-bold { font-size: 14px; font-style: normal; font-weight: 500; line-height: 19px; } .trn-payment-hotel-info-muted { color: #585B5E; font-size: 14px; font-style: normal; font-weight: 400; line-height: 19px; } .hotel-payment-detail { background: var(--white) !important; } .hotel-payment-detail .span-standart { font-size: 14px; font-weight: 400; color: #1D1E20; } .hotel-payment-detail .cbox-label-standart { padding-left: 24px !important; } .hotel-payment-detail .span-standart::before { width: 24px; height: 24px; border: 1px solid #BCBEBF; } .hotel-payment-detail #btnpayment { display: flex; height: 56px; padding: 0px; justify-content: center; align-items: center; gap: 12px; align-self: stretch; border-radius: 8px; background: #01007F; } .hotel-payment-footer { margin-top: 32px; } .hotel-payment-footer .trn-payment-continue-button, .hotel-payment-footer .trn-payment-bkm-button, .hotel-payment-footer .trn-payment-saved-card-button, .hotel-payment-footer .trn-payment-axs-button { text-align: -webkit-right; } .hotel-payment-footer .trn-payment-continue-button a, .hotel-payment-footer .trn-payment-bkm-button a, .hotel-payment-footer .trn-payment-saved-card-button a, .hotel-payment-footer .trn-payment-axs-button a { background-color: var(--second-color) !important; display: flex; justify-content: space-between; align-items: center; width: 100%; border-radius: 6px; text-align: center; text-decoration: none; color: var(--white); font-weight: 600; font-size: 16px; padding: 10px 15px; width: 320px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; margin: 5px 0 0; line-height: 32px; } .hotel-payment-footer .trn-payment-bkm-button a { border-radius: unset; } .modal-3d { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.5); z-index: 9999; align-items: center; justify-content: center; } .modal-3d--active { display: flex; } /* Modal Elements */ .modal-3d__content { background: #fff; padding: 5px; border-radius: 8px; width: 500px; height: 600px; position: relative; } .modal-3d__close-btn { position: absolute; top: -10px; right: -10px; border-radius: 50%; border: 1px solid #dadada; background: #ebebeb; transform: rotate(45deg); font-size: 21px; width: 30px; height: 30px; padding: 0; text-align: center; line-height: 0; cursor: pointer; } .modal-3d__close-btn:hover { background: #d4d4d4; } .modal-3d__iframe { width: 100%; height: 100%; border: none; } :root { --text-primary-color: #000000; --white: #fff; --text-secondary-color: #AAAAAA; --border-color: #DDDDDD; --border: 1px solid var(--border-color); --transition: .3s; --radius: 8px; --main-color: #01007F; --second-color: #2321FF; --icon-color: #000000; --bg-gray: #F8F9FB; --main-light-color: #f4f4ff; } .invitation-container{ position: relative; padding-top: 50px; background-color: white; -webkit-box-shadow: 0 20px 40px rgba(0,0,0,.2); box-shadow: 0 20px 40px rgba(0,0,0,.2); display:none; } .invitation-container .invitation-centered{ width: 85%; margin: auto; max-width: 1180px; } .invitation-wrapper{ position: relative; background-color: white; padding-bottom: 60px; } .invitation-wrapper *{ -webkit-box-sizing: border-box; box-sizing: border-box; } .invitation-wrapper .invitation-close-button-wrapper{ position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; right: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .invitation-wrapper .invitation-close-button-wrapper:hover{ cursor: pointer; opacity: .6; } .invitation-wrapper .invitation-close-button { width: 40px; height: 40px; border-radius: 40px; border: 2px solid var(--second-color); color: var(--second-color); background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQBAMAAAB8P++eAAAAKlBMVEUAAABh2+FizdVizNVq1dVizNVizdVizdVjzdVizdVizdVk0dhjztZjzdVDZ9tdAAAADXRSTlMACL3IDMS576SV+CEf6214JAAAALVJREFUSMft1MEJwkAQBdAvWMCiWIAFeBC8CoIVpAA70AIswrNVeLUQQ1QC00s25J/nT+7zz58XsjuzyGQymZl53wuYxfPqFC+2BbOy1im+7FMI7uznFB9WSYL2d4pnqyRBa5zi8lhJgl2BIidwD2iygu0JkOQIHgBNEpTkl6AmCWqSoCQFqIr60/pn9PHcSIYOvCB4hU0A5JRpUM9tfHDXYhXEcql17WMPwMa6+JOSyWQy8zIAZzR6ZoWVIIYAAAAASUVORK5CYII='); background-size: contain; background-repeat: no-repeat; margin-bottom: 2px; } .invitation-wrapper .invitation-close-button-label { text-align: center; font-size: 12px; color: var(--second-color); } .invitation-wrapper .invitation-top{ padding: 60px 0 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .invitation-wrapper .invitation-top .top-left{ -webkit-box-flex: 7; -ms-flex: 7; flex: 7 } .invitation-wrapper .invitation-top .top-right{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-flex: 3; -ms-flex: 3; flex: 3 } .invitation-wrapper .invitation-bottom{ padding-top: 30px; } .invitation-wrapper .form-elements{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; margin-bottom: 10px } .invitation-wrapper .form-element.input-element{ -webkit-box-flex: 0; -ms-flex: 0 1 300px; flex: 0 1 300px; } .invitation-wrapper .form-element.button-element{ -webkit-box-flex: 0; -ms-flex: 0 0 150px; flex: 0 0 150px } .invitation-wrapper .form-element.button-element button{ width: 100%; } .invitation-wrapper .form-element:not(:last-child){ margin-right: 15px; } .invitation-wrapper .form-label{ display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; } .invitation-wrapper .input-form{ position: relative; } .invitation-wrapper .input-form input { width: 100%; height: 50px; border: 1px solid var(--border-color); border-radius: calc(var(--radius) / 2); background-color: var(--white); padding: 0 45px 0 15px; font-size: 16px; } .invitation-wrapper .input-form.phone-number input { padding-left: 58px; } .invitation-wrapper .input-form input::-webkit-input-placeholder { color: var(--border-color); } .invitation-wrapper .input-form input::-moz-placeholder { color: var(--border-color); } .invitation-wrapper .input-form input:-ms-input-placeholder { color: var(--border-color); } .invitation-wrapper .input-form input:-moz-placeholder { color: var(--border-color); } .invitation-wrapper input:focus, .invitation-wrapper select:focus, .invitation-wrapper textarea:focus { border-color: transparent; outline: none; -webkit-box-shadow: 0 0 0 3px rgba(99,205,213,.4); box-shadow: 0 0 0 3px rgba(99,205,213,.4); } .invitation-wrapper input.invalid{ border-color: rgba(220,53,69,.5) !important; background-color: rgba(255,53,69,.04) !important; } .invitation-wrapper input.invalid:focus{ border-color: transparent !important; outline: none; -webkit-box-shadow: 0 0 0 3px rgba(220,53,69,.25); box-shadow: 0 0 0 3px rgba(220,53,69,.25); } .invitation-wrapper .input-form .form-image { position: absolute; width: 30px; right: 10px; top: 50%; text-align: center; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .invitation-wrapper .input-form .form-image img { width: 24px; height: auto; opacity: .6; } .invitation-wrapper .form-description{ font-size: 12px; color: var(--text-secondary-color); } .invitation-wrapper .country-code { position: absolute; left: 0px; color: var(--text-secondary-color); border-right: 1px solid var(--border-color); padding: 0 10px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-size: 16px; } .invitation-wrapper .invitation-title { font-weight: bold; font-size: 22px; color: var(--text-primary-color); margin-bottom: 6px; } .invitation-wrapper .invitation-description { font-size: 18px; color: var(--text-primary-color); } .invitation-wrapper .invitation-description strong { font-weight: bold; font-size: 18px; color: var(--text-primary-color); } .invitation-wrapper .invitation-description .colored { color: var(--main-color); } .invitation-wrapper .btn-group{ display: -webkit-box; display: -ms-flexbox; display: flex; } .invitation-wrapper .btn-default { height: 50px; min-width: 120px; border: 0; border-radius: calc(var(--radius) / 2); background-color: var(--bg-gray); border-width: 2px; border-style: solid; border-color: var(--border-color); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-weight: bold; font-size: 18px; } .invitation-wrapper .btn-default:hover{ opacity: .7; } .invitation-wrapper .btn-primary { background-color: var(--second-color); border-color: var(--second-color); color: white; } .invitation-wrapper .btn-outline{ background-color: transparent; } .invitation-wrapper .btn-outline.btn-primary { color: var(--second-color); } .invitation-wrapper .btn-default:not(:last-child){ margin-right: 10px } .invitation-form-wrapper .checkbox-wrapper { position: relative; font-size: 14px; color: var(--text-primary-color); max-width: 600px; margin-bottom: 6px; } .invitation-form-wrapper .checkbox-wrapper > *:not(:last-child){ margin-bottom: 5px; } .invitation-form-wrapper .checkbox-wrapper .checkbox-tooltip{ color: var(--text-primary-color); font-size: 14px; position: relative; color: white; padding-left: 18px; background-color: #b00121; padding: 6px 10px; border-radius: 5px; display: inline-block; margin-top: 5px; } .invitation-form-wrapper .checkbox-wrapper .checkbox-tooltip:before{ content: ""; display: block; width: 13px; height: 13px; position: absolute; left: 14%; background-color: #b00121; transform: rotate(-45deg); top: -5px; border-radius: 2px; z-index: 0; } .invitation-form-wrapper .checkbox-wrapper .checkbox-tooltip.error{ color: white; background-color: #b00121; } .invitation-form-wrapper .checkbox-wrapper label{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .invitation-form-wrapper .checkbox-wrapper input[type=checkbox]{ margin-right: 3px; zoom: 1.3; -webkit-transform: translateY(20%); -ms-transform: translateY(20%); transform: translateY(20%); } .invitation-form-wrapper .checkbox-wrapper .check-status a { font-weight: bold; color: var(--text-primary-color); text-decoration: underline; } @media screen and (max-width: 768px){ .invitation-wrapper .invitation-title{ font-size: 20px; margin-bottom: 0; } .invitation-wrapper .invitation-description{ font-size: 15px; } .invitation-wrapper .invitation-close-button{ width: 30px; height: 30px; } .invitation-wrapper .form-element.input-element{ -webkit-box-flex: 2; -ms-flex: 2; flex: 2; } .invitation-wrapper .form-element.button-element{ -webkit-box-flex: 1; -ms-flex: 1; flex: 1 } .invitation-wrapper .btn-default{ font-size: 16px; } } @media screen and (max-width: 1100px){ .invitation-wrapper .invitation-close-button-wrapper{ top: 40px; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .invitation-wrapper .invitation-description{ padding-right: 50px; } } /* SMS MODAL STYLES */ .trn.sms-modal-container *{ -webkit-box-sizing: border-box; box-sizing: border-box; } .trn.sms-modal-container{ max-width: 340px; text-align: center; padding: 30px; } .trn.sms-modal-container .sms-modal-body{ margin-top: 0; } .fw-bold{ font-weight: bold; } .sms-modal-wrapper{} .sms-modal-header{ margin-bottom: 15px; } .sms-modal-title{ font-weight: bold; font-size: 18px; margin-bottom: 5px; } .sms-modal-description{ color: var(--text-primary-color); } .sms-modal-form{ margin-bottom: 15px; } .sms-modal-form .form-with-timer{ max-width: 230px; margin: 0 auto 30px; } .sms-modal-form .form-with-timer .timer { color: var(--second-color); font-size: 50px; font-weight: bold; text-align: center; line-height: 1; margin-bottom: 10px; } .sms-modal-form .form-with-timer form{ margin-bottom: 10px; } .sms-modal-form .form-with-timer form .label{ margin-bottom: 6px; font-size: 14px; font-weight: 600; } .sms-modal-form .form-with-timer form input { width: 100%; height: 50px; border: 1px solid var(--border-color); border-radius: calc(var(--radius) / 2); background-color: var(--white); padding: 15px; font-size: 16px; text-align: center; } .sms-modal-form input[type=number]::-webkit-inner-spin-button, .sms-modal-form input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0; } .sms-modal-form .form-with-timer form input:focus{ border-color: transparent; outline: none; -webkit-box-shadow: 0 0 0 3px rgba(99,205,213,.4); box-shadow: 0 0 0 3px rgba(99,205,213,.4); } .sms-modal-form .form-with-timer .sms-form-button-wrapper button { width: 100%; border-radius: 5px; height: 50px; border: 0; background-color: var(--second-color); color: var(--white); margin-bottom: 10px; font-weight: bold; } .sms-modal-form .form-with-timer .phone-number { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 14px; color: var(--text-primary-color); } .sms-modal-form .form-with-timer .phone-number .country-flag{ width: 18px; height: 12px; margin-right: 5px; } .sms-modal-form .form-with-timer .phone-number .country-code{ margin-right: 5px; } .sms-modal-form .form-with-timer .phone-number .number { font-size: 14px; color: var(--text-primary-color); } .sms-modal-link { color: var(--second-color); text-decoration: underline; } .show-save-credit-card-section { font-size: 18px; font-weight: bold; text-decoration: underline; color: var(--main-color); } :root { --text-primary-color: #000000; --white: #fff; --text-secondary-color: #AAAAAA; --border-color: #DDDDDD; --border: 1px solid var(--border-color); --transition: .3s; --radius: 8px; --main-color: #01007F; --second-color: #2321FF; --icon-color: #000000; --bg-gray: #F8F9FB; --main-light-color: #f4f4ff; } .expandable-sms-form .bottom .sms-form-wrapper .form-wrapper .input-form input, .descriptive-button, .saved-cards-wrapper .cvv-form-wrapper .cvv-form .cvv-input input, .turna-points-widget .form-wrapper .form-wrapper-inn input { border-radius: 4px; } .modal-container .modal-close-button, .accordion-menu-wrapper .accordion-menu .accordion-menu-item .item-label, .accordion-menu-wrapper .accordion-menu .accordion-menu-item .item-label .label-inn, .inline-payment-wrapper ul li .amount-item { display: -webkit-box; display: flex; } .modal-container .modal-close-button { -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; } .accordion-menu-wrapper .accordion-menu .accordion-menu-item .item-label, .accordion-menu-wrapper .accordion-menu .accordion-menu-item .item-label .label-inn { -webkit-box-align: center; align-items: center; } .inline-payment-wrapper ul li .amount-item { -webkit-box-pack: justify; justify-content: space-between; } .expandable-sms-form .bottom .sms-form-wrapper .form-wrapper .input-form.phone-number .country-code, .expandable-sms-form .bottom .sms-form-wrapper .form-wrapper .input-form .form-image, .accordion-menu-wrapper .accordion-menu .accordion-menu-item .item-label:before, .accordion-menu-wrapper .accordion-menu .accordion-menu-item.selected .item-label:after, .descriptive-button .switch-button, .inline-payment-wrapper .button-group .button-icon, .saved-cards-wrapper .saved-card-item .card-item-top .card-image, .saved-cards-wrapper .saved-card-item .radio-button { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } @-webkit-keyframes switch-animation { 0% { left: 4px; opacity: 1; } 80% { opacity: 1; } 100% { left: -webkit-calc(100% - 26px); left: calc(100% - 26px); opacity: 0; } } @keyframes switch-animation { 0% { left: 4px; opacity: 1; } 80% { opacity: 1; } 100% { left: -webkit-calc(100% - 26px); left: calc(100% - 26px); opacity: 0; } } /* Informative Box Styles */ .informative-box { margin: 15px 0; } .informative-box .informative-image { text-align: center; margin: 0 0 15px 0; padding: 0; width: 100%; } .informative-box .informative-image img { width: 100%; } .informative-box .informative-text { color: var(--text-primary-color); } .informative-box .informative-text .title { font-size: 20px; margin-bottom: 10px; line-height: 1; } .informative-box .informative-text .description { font-size: 14px; } .informative-box .informative-text .description.secondary { font-size: 12px; color: var(--text-secondary-color); line-height: 1.5; } @media screen and (max-height: 550px) { .informative-box .informative-image img { display: none; } } /* Expandable SMS Form */ .expandable-sms-form { position: relative; background-color: var(--bg-gray); border-radius: 4px; padding: 15px; } .expandable-sms-form .top .lable { font-weight: bold; text-decoration: underline; margin-bottom: 10px; } .expandable-sms-form .top .description .card-number { color: var(--main-color); margin-right: 10px; } .expandable-sms-form .bottom { margin-top: 15px; } .expandable-sms-form .bottom .sms-form-wrapper .form-wrapper { margin-bottom: 10px; } .expandable-sms-form .bottom .sms-form-wrapper .form-wrapper label { display: block; margin-bottom: 5px; font-size: 14px; font-weight: 600; } .expandable-sms-form .bottom .sms-form-wrapper .form-wrapper .input-form { position: relative; } .expandable-sms-form .bottom .sms-form-wrapper .form-wrapper .input-form input { width: 100%; height: 50px; border: 1px solid var(--border-color); background-color: #FFFFFF; padding: 0 15px; font-weight: bold; } .expandable-sms-form .bottom .sms-form-wrapper .form-wrapper .input-form ::-webkit-input-placeholder { color: var(--text-secondary-color); font-size: 16px; font-weight: normal; text-align: left; } .expandable-sms-form .bottom .sms-form-wrapper .form-wrapper .input-form ::-moz-placeholder { color: var(--text-secondary-color); font-size: 16px; font-weight: normal; text-align: left; } .expandable-sms-form .bottom .sms-form-wrapper .form-wrapper .input-form :-ms-input-placeholder { color: var(--text-secondary-color); font-size: 16px; font-weight: normal; text-align: left; } .expandable-sms-form .bottom .sms-form-wrapper .form-wrapper .input-form :-moz-placeholder { color: var(--text-secondary-color); font-size: 16px; font-weight: normal; text-align: left; } .expandable-sms-form .bottom .sms-form-wrapper .form-wrapper .input-form.phone-number .country-code { position: absolute; left: 0px; color: var(--text-secondary-color); border-right: 1px solid var(--border-color); padding: 0 10px; } .expandable-sms-form .bottom .sms-form-wrapper .form-wrapper .input-form.phone-number input { padding-left: 60px; } .expandable-sms-form .bottom .sms-form-wrapper .form-wrapper .input-form .form-image { position: absolute; width: 40px; right: 5px; text-align: center; } .expandable-sms-form .bottom .sms-form-wrapper .form-wrapper .input-form .form-image img { width: 20px; height: auto; opacity: .8; } .sms-form-button-wrapper .button { width: 100%; border-radius: 4px; height: 44px; border: 0; background-color: var(--text-secondary-color); color: var(--white); margin-bottom: 10px; font-weight: bold; } .sms-form-button-wrapper .button.active { background-color: var(--second-color); } .sms-form-button-wrapper .description { font-size: 12px; } .save-card-cta .button { width: 100%; border-radius: 4px; height: 44px; border: 0; color: #FFFFFF; font-weight: bold; margin-top: 15px; background-color: var(--second-color); } .form-with-timer { max-width: 250px; margin: 0 auto; } .form-with-timer .timer { color: var(--second-color); font-size: 50px; font-weight: bold; text-align: center; line-height: 1; margin-bottom: 10px; } .form-with-timer form .label { width: 100%; text-align: center; margin-bottom: 10px; } .form-with-timer form input { width: 100%; height: 50px; border-radius: 4px; border: 1px solid var(--border-color); padding: 0 15px; margin-bottom: 10px; text-align: center; } .form-with-timer form ::-webkit-input-placeholder { color: var(--text-secondary-color); font-size: 20px; font-weight: normal; text-align: center; } .form-with-timer form ::-moz-placeholder { color: var(--text-secondary-color); font-size: 20px; font-weight: normal; text-align: center; } .form-with-timer form :-ms-input-placeholder { color: var(--text-secondary-color); font-size: 20px; font-weight: normal; text-align: center; } .form-with-timer form :-moz-placeholder { color: var(--text-secondary-color); font-size: 20px; font-weight: normal; text-align: center; } .form-with-timer .phone-number { position: relative; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; font-size: 14px; color: var(--text-secondary-color); } .form-with-timer .phone-number .country-flag { width: auto; height: 12px; border-radius: 3px; margin-right: 5px; } .form-with-timer .phone-number .country-code { margin-right: 5px; } /* Link Styles */ .link-container { margin-bottom: 15px; } .inline-link { color: var(--second-color); text-decoration: underline; } /* User Phone Verify */ .user-input-block { padding: 5px; overflow: hidden; padding: 0px 50px; } .user-phone-input-block { padding: 5px; overflow: hidden; padding: 0; } .user-phone-span { color: var(--second-color); } .user-input-label { color: var(--text-secondary-color); font-size: 12px; line-height: 15px; padding: 2px 0 3px 6px; } .user-input-wrapper { overflow: hidden; display: grid; } .phone { margin-left: 5px; border: 1px solid var(--border-color); width: 96%; position: relative; display: inline-block; vertical-align: middle; white-space: nowrap; line-height: 30px; border-radius: 5px; } .phone input[type=text] { border: 0; padding: 3px; margin-left: 0; width: 83.5%; height: 35px; font-size: 16px; } .phone #txtPhoneVerify { padding-left: 10px; width: calc(100% - 60px); background-color: var(--white); } .phone #txtPhoneVerify :focus { outline: none; } .phone-logo { padding: 0 !important; margin-top: 50px !important; text-align: center; } .phone-logo img { width: 140px; height: 140px; border-radius: 100%; } .bottom button.passive { background: var(--text-secondary-color) !important; } .phone .select-wrapper { float: left; position: relative; padding: 3px; width: 60px; height: 44px; font-size: 16px; margin-right: 0; } .phone .select-wrapper .phoneprefix { float: none; bottom: 0; left: 0; right: 0; top: 0; height: 34px; width: 60px; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); position: absolute; -webkit-appearance: none; padding: 5px 20px; color: var(--text-secondary-color); z-index: 10; padding: 0; margin: 0; } .phone .select-wrapper .select-value { padding: 3px; font-size: 15px; font-weight: bold; } .phone .select-wrapper .select-value .value { padding-right: 10px; } .phone .select-wrapper .select-value .select-icon { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid var(--border-color); right: 4px; top: 17px; position: absolute; } .phone button.phone-number-verify { position: absolute; top: 48%; transform: translateY(-50%); line-height: 12px; right: 5%; background: var(--second-color); color: #fff; border: 0; } .phone-verify-info-messages { margin: 0 3%; font-size: .8em; color: var(--text-secondary-color); font-weight: 200; text-align: left !important; } .phone-verify-info-messages .info-regular { color: var(--text-secondary-color); } .phone-verify-info-messages .info-success { color: #62deaf; } .phone-verify-info-messages .info-error { color: #ff3200; } .phone-verify-info-messages .info-error { color: #ff3200; } .grayscale { color: var(--text-secondary-color) !important; text-align: center; margin-top: 20px; margin-bottom: 20px; letter-spacing: 0.00025em; } .submit-phone-header { font-size: 16px; font-weight: 800; text-align: center; } .submit-phone-widget .form-wrapper .form-wrapper-inn button { width: 100%; min-height: 40px; border-radius: 4px; text-align: center; background-color: var(--main-color); color: #FFFFFF; font-weight: bold; padding: 0 10px; margin: 0; border: 0; outline: 0; font-size: 14px; } .trn .modal-header { width: 100%; position: absolute; display: block; background-color: #fff; color: #5f5252; padding: 12px; top: 0; left: 0; letter-spacing: .0325em; font-size: 15px; } .verification-code-caption { background-color: #fff !important; text-align: center; font-weight: 900 !important; font-size: 16px !important; margin-bottom: 20px; } .submit-verification-code-container .trn .modal-header { padding-top: 70px; } #verify-user-phone-content { margin-top: 180px; } #submit-verification-code-content { margin-top: 70px; } #verification-code { text-align: center; letter-spacing: .4em; background-color: #fff; font-weight: bold; text-transform: uppercase; font-size: 16px; margin: auto; border: 1px solid #ccc; color: rgba(0,0,0,.5); } .verification-trn-button { width: 100%; display: inline-block; background-color: var(--second-color) !important; color: #fff; height: 49px; border: 0 !important; border-radius: 4px; font-size: 16px; font-weight: 600; padding: 7px 0 !important; } .color-aqua-blue { color: var(--main-color) !important; font-weight: bold; } .timer-container { margin: 7px auto; font-weight: 600; text-align: center; } .has-any-issues { font-size: 14px; text-align: center; margin-top: 20px; margin-bottom: 20px; } /* Accordion Menu Styles */ .accordion-menu-wrapper .accordion-menu { list-style: none; padding: 0; margin: 0; } .accordion-menu-wrapper .accordion-menu .accordion-menu-item { min-height: 60px; border: 2px solid var(--border-color); margin-bottom: 10px; border-radius: 4px; } .accordion-menu-wrapper .accordion-menu .accordion-menu-item .item-label { position: relative; min-height: 60px; padding-left: 46px; padding-right: 15px; } .accordion-menu-wrapper .accordion-menu .accordion-menu-item .item-label:before, .accordion-menu-wrapper .accordion-menu .accordion-menu-item .item-label:after { content: ""; display: block; position: absolute; } .accordion-menu-wrapper .accordion-menu .accordion-menu-item .item-label:before { width: 20px; height: 20px; border-radius: 20px; border: 2px solid var(--border-color); left: 10px; } .accordion-menu-wrapper .accordion-menu .accordion-menu-item .item-label .label-inn strong { margin-right: 6px; display: contents; } .accordion-menu-wrapper .accordion-menu .accordion-menu-item .item-label .label-inn .label-img { margin-right: 6px; } .accordion-menu-wrapper .accordion-menu .accordion-menu-item .item-label .label-inn .label-img img { height: 26px; width: auto; } .accordion-menu-wrapper .accordion-menu .accordion-menu-item .item-content { display: none; padding-left: 15px; padding-right: 15px; padding-bottom: 15px; } .accordion-menu-wrapper .accordion-menu .accordion-menu-item:not(.selected) .item-label:hover { cursor: pointer; } .accordion-menu-wrapper .accordion-menu .accordion-menu-item.selected { border-color: var(--second-color); } .accordion-menu-wrapper .accordion-menu .accordion-menu-item.selected .item-label:before { border-color: var(--second-color); } .accordion-menu-wrapper .accordion-menu .accordion-menu-item.selected .item-label:after { width: 14px; height: 14px; border-radius: 14px; background-color: var(--second-color); left: 15px; } .accordion-menu-wrapper .accordion-menu .accordion-menu-item.selected .item-content { display: block; margin-top: 10px; } .accordion-menu-wrapper .accordion-menu .accordion-menu-item .item-description { font-size: 14px; } /* Descriptive Button */ .descriptive-button { position: relative; background-color: var(--bg-gray); margin-bottom: 15px; padding: 10px 15px; } .descriptive-button .button-label { color: var(--second-color); text-decoration: underline; font-weight: bold; font-size: 14px; margin-bottom: 2px; } .descriptive-button .button-description { font-size: 11px; margin: 0; color: var(--text-primary-color); } .descriptive-button.turna-puan { margin-bottom: 10px; background: #FFCB47; padding: 15px !important; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=1 ); } .descriptive-button.turna-puan .button-label { color: var(--text-primary-color); text-decoration: none; } .descriptive-button.turna-puan .turna-points { color: var(--white); font-size: 18px; font-weight: 900; } /* Switch Button Styles */ .switch-button { position: absolute; top: 15px; right: 15px; width: 46px; height: 28px; } .switch-button form label { cursor: pointer; } .switch-button form label input { display: none; } .switch-button form label input:checked + .switch:after { left: -webkit-calc(100% - 26px); left: calc(100% - 26px); } .switch-button form label .switch { position: absolute; width: 46px; height: 28px; border-radius: calc(var(--radius) * 2); -webkit-transition: .3s; transition: .3s; } .switch-button form label .switch:after { content: ""; display: block; position: absolute; left: 4px; width: 22px; height: 22px; border-radius: 50%; -webkit-transition: left .3s; transition: left .3s; top: 3px; } .switch-button.orange .switch { opacity: .6; background-color: var(--white); } .switch-button.orange .switch:after { background-color: var(--main-color); } .switch-button.orange input:checked + .switch { opacity: 1; } .switch-button.gray-to-blue .switch { background-color: #CECECE; } .switch-button.gray-to-blue .switch:after { background-color: var(--bg-gray); } .switch-button.gray-to-blue input:checked + .switch { background-color: var(--main-color); } .switch-button.gray-to-blue input:checked + .switch:after { background-color: #FFFFFF; } .switch-button.gray-to-orange .switch { background-color: var(--text-secondary-color); } .switch-button.gray-to-orange .switch:after { background-color: var(--bg-gray); } .switch-button.gray-to-orange input:checked + .switch { background-color: var(--main-color); } .switch-button.gray-to-orange input:checked + .switch:after { background-color: var(--white); } /* Inline Payment Styles */ .inline-payment-wrapper ul { list-style: none; padding: 0; margin: 0; } .inline-payment-wrapper ul li { margin-bottom: 15px; } .inline-payment-wrapper ul li .alert { margin: 10px 0; } .inline-payment-wrapper ul li .amount-item { margin-bottom: 10px; border-width: 0 0 1px 0; border-color: var(--border-color); border-style: solid; } .inline-payment-wrapper ul li .amount-item-details { display: flex; flex-direction: column; gap: 16px; } .amount-item-details .details-item { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .amount-item-details .details-item .text { font-size: 14px; color: #000; font-weight: 500; } .amount-item-details .details-item .text-muted { font-size: 14px; color: #585B5E; font-weight: 400; } .amount-item-details .details-item .text-bold { font-size: 16px; color: #1D1E20; font-weight: 700; } .amount-item-details .details-item .text-price { font-size: 24px; color: #01007F; font-weight: 700; } .amount-item-details .details-item i { font-family: "Font Awesome 6 Pro" !important; color: #01007F; margin-right: 4px; } .inline-payment-wrapper ul li .amount-item:last-child { border: 0; } .inline-payment-wrapper ul li .amount-item:not(:last-child) { padding-bottom: 10px; } .inline-payment-wrapper ul li .amount { font-size: 18px; } .inline-payment-wrapper ul li .amount .currency { padding: 0 2px; font-size: 12px; } .inline-payment-wrapper ul li.agreement-items .agreement-item { position: relative; display: -webkit-box; display: flex; -webkit-box-pack: start; justify-content: flex-start; -webkit-box-align: center; align-items: center; font-size: 14px; margin-bottom: 15px; } .inline-payment-wrapper ul li.agreement-items .agreement-item label input[type=checkbox] { display: none; } .inline-payment-wrapper ul li.agreement-items .agreement-item label input[type=checkbox] + span.check-status { position: relative; display: block; padding-left: 26px; pointer-events: none; line-height: 1.2; } .inline-payment-wrapper ul li.agreement-items .agreement-item label input[type=checkbox] + span.check-status::before { content: "\e9c5"; position: absolute; left: 0; top: 9px; font-family: "iconfont"; font-size: 21px; line-height: 0; background-color: white; border-radius: 4px; text-decoration: none; font-weight: normal; } .inline-payment-wrapper ul li.agreement-items .agreement-item label input[type=checkbox]:checked + span.check-status::before { content: "\e9c6"; font-weight: normal; color: var(--main-color); } .inline-payment-wrapper ul li.agreement-items .agreement-item a { color: var(--main-color); font-weight: bold; text-decoration: underline; pointer-events: auto; } .inline-payment-wrapper .button-group { position: relative; } .inline-payment-wrapper .button-group .button-icon { position: absolute; color: #FFFFFF; } .inline-payment-wrapper .button-group .button-icon.icon_trn_arrow_right_light { right: 15px; font-size: 18px; } .inline-payment-wrapper .button-group .button-icon.icon_trn_secure_on { left: 15px; font-size: 22px; } .inline-payment-wrapper .button-group .button { font-size: 16px; font-weight: bold; margin-right: 0 !important; height: 50px; } .inline-payment-wrapper .button-group .button.bkm-green { background-color: #00A99D; color: #FFFFFF; } .inline-payment-wrapper .button-group .button.black { background-color: #000; color: #FFFFFF; } .inline-payment-wrapper .button-group .button-image { position: absolute; left: 10px; } .inline-payment-wrapper .button-group .button-image img { width: 20px; height: auto; } /* Payment Options Styles */ .payment-options-wrapper { border-radius: 4px; margin-bottom: 15px; } .payment-options-wrapper .payment-options-header { margin-bottom: 15px; } .payment-options-wrapper .payment-options-header .payment-image { margin-bottom: 15px; } .payment-options-wrapper .payment-options-header .payment-image img { height: 20px; width: auto; } .payment-options-wrapper .payment-options-header .payment-description { font-size: 12px; color: var(--text-secondary-color); } .payment-options-wrapper .payment-options-content table { width: 100%; border-collapse: collapse; margin-bottom: 20px; } .payment-options-wrapper .payment-options-content table tr td { font-size: 14px; } .payment-options-wrapper .payment-options-content table tr td:first-child { text-align: center; padding: 0 0 0 10px; } .payment-options-wrapper .payment-options-content table tr td:first-child { border-top-left-radius: calc(var(--radius) / 2); border-bottom-left-radius: calc(var(--radius) / 2); } .payment-options-wrapper .payment-options-content table tr td:last-child { border-top-right-radius: calc(var(--radius) / 2); border-bottom-right-radius: calc(var(--radius) / 2); } .payment-options-wrapper .payment-options-content table thead tr td { padding: 12px 8px !important; background-color: var(--bg-gray); } .payment-options-wrapper .payment-options-content table tbody:before { content: ""; display: block; height: 10px; width: 100%; } .payment-options-wrapper .payment-options-content table tbody tr:not(:last-child) { border-bottom: 1px dotted var(--border-color); } .payment-options-wrapper .payment-options-content table tbody tr:hover { cursor: pointer; } .payment-options-wrapper .payment-options-content table tbody tr td { padding: 12px 8px; } .payment-options-wrapper .payment-options-content table tbody tr td.monthly-amount:before { content: "x"; margin-right: 6px; font-size: 12px; } .payment-options-wrapper .payment-options-content table tbody tr.checked-row td { font-weight: bold; color: var(--main-color); } .payment-options-wrapper .radio-button label .radio-button-icon { position: relative; width: 12px; height: 12px; border-radius: 20px; border: 2px solid var(--border-color); box-sizing: content-box; } .payment-options-wrapper .radio-button label input { display: none; } .payment-options-wrapper .radio-button label input:checked + .radio-button-icon { border-color: var(--main-color); } .payment-options-wrapper .radio-button label input:checked + .radio-button-icon:after { content: ""; display: block; position: absolute; width: 6px; height: 6px; border-radius: 10px; left: 3px; top: 3px; background-color: var(--main-color); } /* Saved Cards Wrapper */ .saved-cards-wrapper { margin-bottom: 15px; } .saved-cards-wrapper .saved-card-item { background-color: var(--bg-gray); border-radius: calc(var(--radius) / 2); } .saved-cards-wrapper .saved-card-item:not(:last-child) { margin-bottom: 10px; } .saved-cards-wrapper .saved-card-item .card-item-top { position: relative; padding: 15px; height: 70px; } .saved-cards-wrapper .saved-card-item .card-item-top .card-info { font-size: 14px; padding-left: 40px; } body[dir='rtl'] .saved-cards-wrapper .saved-card-item .card-item-top .card-info { padding-right: 40px; padding-left: unset; } .saved-cards-wrapper .saved-card-item .card-item-top .card-info .card-name { font-weight: bold; } .saved-cards-wrapper .saved-card-item .card-item-top .card-info .card-number { color: var(--text-secondary-color); } .saved-cards-wrapper .saved-card-item .card-item-top .card-image { position: absolute; right: 15px; } body[dir='rtl'] .saved-cards-wrapper .saved-card-item .card-item-top .card-image { left: 15px; right: unset; } .saved-cards-wrapper .saved-card-item .card-item-top .card-image img { height: 20px; width: auto; } .saved-cards-wrapper .saved-card-item .card-item-bottom { display: none; position: relative; padding: 0 15px 15px; } .saved-cards-wrapper .saved-card-item .radio-button { position: absolute; left: 15px; } body[dir='rtl'] .saved-cards-wrapper .saved-card-item .radio-button { right: 15px; left: unset; } .saved-cards-wrapper .saved-card-item .radio-button label .radio-button-icon:before { content: "\e9c5"; display: block; font-family: "iconfont"; color: var(--text-primary-color); font-size: 28px; line-height: 1; } .saved-cards-wrapper .saved-card-item .radio-button label input { display: none; } .saved-cards-wrapper .saved-card-item .radio-button label input:checked + .radio-button-icon:before { content: "\e9c6"; color: var(--main-color); } .saved-cards-wrapper .saved-card-item.selected { background-color: var(--main-light-color); } .saved-cards-wrapper .saved-card-item.selected .card-item-bottom { display: block; } .saved-cards-wrapper .cvv-form-wrapper .cvv-title { font-size: 14px; font-weight: bold; margin-bottom: 8px; } .saved-cards-wrapper .cvv-form-wrapper .cvv-form { display: -webkit-box; display: flex; } .saved-cards-wrapper .cvv-form-wrapper .cvv-form .cvv-description { -webkit-box-flex: 0; flex: 0 0 70%; font-size: 13px; line-height: 1.2; } .saved-cards-wrapper .cvv-form-wrapper .cvv-form .cvv-input { -webkit-box-flex: 0; flex: 0 0 30%; } .saved-cards-wrapper .cvv-form-wrapper .cvv-form .cvv-input input { width: 100%; height: 40px; background-color: var(--white); border: 1px solid var(--border-color); padding: 0 15px; font-weight: bold; } /* Simple List */ .simple-list-wrapper { margin-bottom: 15px; } .simple-list-wrapper .simple-list { list-style: none; padding: 0; border: 1px solid var(--border-color); border-radius: calc(var(--radius) / 2); } .simple-list-wrapper .simple-list .list-item { padding: 15px; } .simple-list-wrapper .simple-list .list-item:not(:last-child) { border-bottom: 1px solid var(--border-color); } .simple-list-wrapper .simple-list .list-item .list-item-label { font-size: 13px; margin-bottom: 5px; font-weight: bold; } .simple-list-wrapper .simple-list .list-item .list-item-description { line-height: 1; } .simple-list-wrapper .simple-list .list-item .list-item-description .amount { font-size: 16px; color: var(--main-color); margin-right: 4px; } .simple-list-wrapper .simple-list .list-item .list-item-description .value { font-size: 14px; } /* Turna Points Widget */ .turna-points-widget { position: relative; background-color: var(--bg-gray); margin-bottom: 15px; padding: 15px; border-radius: calc(var(--radius) / 2); } .turna-points-widget .turna-points-header { margin-bottom: 10px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); } .turna-points-widget .turna-points-header .label { font-weight: bold; font-size: 14px; text-decoration: underline; width: -webkit-calc(100% - 60px); width: calc(100% - 60px); } .turna-points-widget .turna-points-content .description { font-size: 13px; margin-bottom: 10px; } .turna-points-widget .form-wrapper .form-label { margin-bottom: 5px; font-size: 12px; font-weight: 600; } .turna-points-widget .form-wrapper .form-label-flex { display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; margin-bottom: 5px; font-size: 12px; font-weight: bold; } .turna-points-widget .form-wrapper .form-wrapper-inn .top { position: relative; margin-bottom: 10px; } .turna-points-widget .form-wrapper .form-wrapper-inn .top .input-value-label { position: absolute; top: 50%; right: 15px; -webkit-transform: translateY(-50%); transform: translateY(-50%); color: var(--text-secondary-color); font-size: 16px; } .turna-points-widget .form-wrapper .form-wrapper-inn .top .input-value-label:after { content: attr(data-content); margin-left: 2px; font-size: 12px; } .turna-points-widget .form-wrapper .form-wrapper-inn input { width: 100%; height: 40px; background-color: var(--white); border: 1px solid var(--border-color); padding: 0 15px; font-weight: bold; } .turna-points-widget .form-wrapper .form-wrapper-inn button { width: 100%; min-height: 40px; border-radius: 4px; text-align: center; background-color: var(--main-color); color: var(--white); font-weight: bold; padding: 0 10px; margin: 0; border: 0; outline: 0; font-size: 14px; } @media only screen and (max-width: 359px) { .expandable-sms-form .description { font-size: 12px; } .informative-box .informative-text .title { font-size: 16px; } .turna-points-widget .turna-points-content .description { font-size: 12px; } .turna-points-widget .turna-points-content .form-wrapper button { font-size: 12px; } .simple-list-wrapper .list-item .list-item-label { font-size: 12px !important; margin-bottom: 0 !important; } .simple-list-wrapper .list-item .list-item-description .amount, .simple-list-wrapper .list-item .list-item-description .value { font-size: 12px !important; } .descriptive-button .button-label { font-size: 12px; } .form-row label { font-size: 12px; } .form-row .form-wrapper input { height: 40px; } .form-row .form-item input { height: 40px; } .form-row .form-item .select-items select { height: 40px; width: 70px; padding: 0 0 0 10px; } .accordion-menu-wrapper .accordion-menu .accordion-menu-item .item-label .label-inn { font-size: 14px; } .saved-cards-wrapper .saved-card-item .card-item-top .card-info { font-size: 12px; } .saved-cards-wrapper .saved-card-item .card-item-bottom .cvv-form-wrapper .cvv-title { font-size: 12px; } .saved-cards-wrapper .saved-card-item .card-item-bottom .cvv-form-wrapper .cvv-form .cvv-description { font-size: 11px; } .link-container { margin-bottom: 10px; } .link-container .inline-link { font-size: 14px; } .payment-options-wrapper .payment-options-content table thead tr td { font-size: 12px; } .payment-options-wrapper .payment-options-content table tbody tr td { font-size: 12px; } .payment-options-wrapper .payment-options-content table tbody tr td:first-child { padding: 0 10px 0 0; } } body[dir="rtl"] .accordion-menu-wrapper .accordion-menu .accordion-menu-item .item-label { padding-left: 15px; padding-right: 46px; } body[dir="rtl"] .accordion-menu-wrapper .accordion-menu .accordion-menu-item .item-label:before { left: unset; right: 10px; } body[dir="rtl"] .accordion-menu-wrapper .accordion-menu .accordion-menu-item.selected .item-label:after { left: unset; right: 15px; } body[dir="rtl"] .descriptive-button.turna-puan .switch-button { right: unset; left: 15px; transform: translateY(-50%) scale(-1) } body[dir="rtl"] .turna-points-widget .switch-button { right: unset; left: 15px; transform: scale(-1) } body[dir="rtl"] .turna-points-widget .form-wrapper .form-wrapper-inn .top .input-value-label { right: unset; left: 15px; } body[dir="rtl"] .simple-list-wrapper .simple-list .list-item .list-item-description .amount { margin-right: unset; margin-left: 4px; } body[dir="rtl"] .inline-payment-wrapper ul li.agreement-items .agreement-item label input[type=checkbox] + span.check-status { padding-left: unset; padding-right: 26px; } body[dir="rtl"] .inline-payment-wrapper ul li.agreement-items .agreement-item label input[type=checkbox] + span.check-status::before { left: unset; right: 0; } body[dir="rtl"] .multiple-form-wrapper .left.expiration-date { margin-right: unset; margin-left: 10px; } body.tkfb .descriptive-button.turna-puan { background: linear-gradient(to right,#2D2926 0,#A2AAAD 100%); } body.tkfb .switch-button.orange .switch:after { background-color: #2D2926; } body.tkfb .inline-payment-wrapper ul li.agreement-items .agreement-item a { color: #2D2926; } body.tkfb .modal-content { margin-top: 30px; } body.tkfb .simple-list-wrapper .simple-list .list-item .list-item-description .amount { color: #2D2926; } body.tkfb .switch-button.gray-to-orange input:checked + .switch { background-color: #2D2926; } body.tkfb .turna-points-widget .form-wrapper .form-wrapper-inn button { background-color: #2D2926; } body.tkfb .alert.warning .alert-icon { background-color: #2D2926; } body.tkfb .alert.warning { background-color: #F1F3F4; } body.tkfb .saved-cards-wrapper .saved-card-item .radio-button label input:checked + .radio-button-icon:before { color: #2D2926; } body.tkfb .payment-options-wrapper .radio-button label input:checked + .radio-button-icon:after { background-color: #2D2926; } body.tkfb .payment-options-wrapper .radio-button label input:checked + .radio-button-icon { border-color: #2D2926; } body.tkfb .inline-payment-wrapper ul li.agreement-items .agreement-item label input[type=checkbox]:checked + span.check-status::before { color: #2D2926; } .tkfb-info { background-color: #F1F3F4; border-radius: 6px; } .tkfb-info__container { padding: 10px; } .tkfb-info__container span { color: #343A40; font-weight: 600; display: flex; align-items: flex-start; gap: 7px; font-size: 13px; } .tkfb-info__container span::before { content: "\e948"; position: relative; font-family: turna; font-size: 16px; color: #343A40; } body.tkfb .saved-cards-wrapper .saved-card-item.selected { background-color: #f1f3f4; } body.tkfb .invalid { border-color: #2D2926 !important; background-color: #f1f3f4 !important; } body.tkfb .invalid:focus-visible { border-color: #2d2926 !important; background-color: #f1f3f4 !important; } body.tkfb .installment-highlight { background-color: #f1f3f4; } body.tkfb .header-bonus { color: #2D2926 !important; } body.tkfb .card-footer .button.secondary, body.tkfb .button-group .button.secondary { background-color: #2d2926; } body.tkfb .inline-link { color: #2D2926; } body.tkfb .accordion-menu-wrapper .accordion-menu .accordion-menu-item.selected .item-label:before { border-color: #2D2926; } body.tkfb .accordion-menu-wrapper .accordion-menu .accordion-menu-item.selected .item-label:after { background-color: #2D2926; } body.tkfb .informative-text .description.primary span { color: #2D2926 !important; } body.tkfb .alert-message { color: #2D2926; } body.tkfb .accordion-menu-wrapper .accordion-menu .accordion-menu-item.selected { border-color: #2D2926; } .modal-3d { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.5); z-index: 9999; align-items: center; justify-content: center; } .modal-3d--active { display: flex; } /* Modal Elements */ .modal-3d__content { background: #fff; padding: 5px; border-radius: 8px; width: 400px; height: 600px; position: relative; } .modal-3d__close-btn { position: absolute; top: 10px; right: 10px; border-radius: 50%; border: 1px solid #dadada; background: #ebebeb; transform: rotate(45deg); font-size: 21px; width: 30px; height: 30px; padding: 0; text-align: center; line-height: 0; cursor: pointer; } .modal-3d__close-btn:hover { background: #d4d4d4; } .modal-3d__iframe { width: 100%; height: 100%; border: none; } /* Modal Styles */ .trn-modal::after { content: ""; display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background-color: rgba(0,0,0,.7); -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } .trn-modal .modal-wrapper { background-color: transparent; } .modal-wrapper { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.7); z-index: 300; padding: 15px; overflow-y: scroll; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .modal-wrapper .modal-close-button { position: absolute; top: 15px; right: 15px; width: 32px; height: 32px; border-radius: 32px; z-index: 20; background-color: #F8F9FB; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .modal-wrapper .modal-inner { position: relative; /*width: 100%; height: 100%;*/ max-height: calc(100% - 30px); } .modal-wrapper .modal-container { position: relative; width: 100%; max-height: 100%; overflow-y: scroll; background-color: #fff; border-radius: calc(8px / 2); padding: 30px 15px; } .modal-wrapper .modal-container > div[class^="modal-"]:last-of-type { margin-bottom: 0; } .modal-wrapper .modal-container .modal-close-button .icon { font-size: 12px; color: #000000; } .modal-wrapper .modal-container .modal-header { margin-bottom: 15px; padding-right: 30px; } .modal-wrapper .modal-container .modal-header .modal-title { font-size: 16px; margin: 0 0 5px; color: #000000; } .modal-wrapper .modal-container .modal-header .modal-title.orange { color: #01007F; } .modal-wrapper .modal-container .modal-header .modal-title.blue { color: #2321FF; } .modal-wrapper .modal-container .modal-header .modal-description { font-size: 14px; margin-bottom: 0; } .modal-wrapper .modal-container .modal-content { margin-bottom: 15px; } .modal-wrapper .modal-container .modal-content .point-note { margin-bottom: 10px; } .modal-wrapper .modal-container .modal-content div[class^="note"] { margin-bottom: 15px; } .modal-wrapper .modal-container .modal-content .flight-important-note { position: relative; padding-left: 22px; } .modal-wrapper .modal-container .modal-content .flight-important-note-content { padding-left: 15px; margin-bottom: 25px; } .modal-wrapper .modal-container .modal-content .flight-important-note-title { font-weight: bold; margin-bottom: 5px !important; } .modal-wrapper .modal-container .modal-content .flight-important-note:before { content: "\e9c9"; position: absolute; width: 14px; height: 14px; border-radius: calc(8px * 2); background-color: #000000; color: white; left: 0; top: 4px; font-family: "iconfont"; font-size: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .modal-wrapper .modal-wrapper .modal-container .modal-text-wrapper { padding-right: 30px; } .modal-wrapper .modal-container .modal-text-wrapper.cancellation > div { margin-bottom: 10px; } .modal-wrapper .modal-container .modal-text-wrapper.cancellation ul { margin-bottom: 10px; } .modal-wrapper .modal-container .modal-text-wrapper.cancellation ul li { margin-bottom: 10px; } .modal-wrapper .modal-container .modal-text-wrapper.insurance-info p a { color: #2321FF; text-decoration: underline; } .modal-wrapper .modal-container .modal-image { padding: 0 15px; margin: 0 0 15px; text-align: center; } .modal-wrapper .modal-container .modal-image img { width: 100%; height: auto; vertical-align: top; } .modal-wrapper .modal-container .modal-image.icon img { max-width: 100px; height: auto; } .modal-padding-reset { padding: 0 !important; } @media screen and (max-width: 359px) { .modal-wrapper .modal-container .modal-header .modal-title { font-size: 14px; } .modal-wrapper .modal-container .modal-header .modal-description { font-size: 12px; } } body[dir="rtl"] .modal-wrapper .modal-close-button { right: unset; left: 15px; transform: scale(-1); } body[dir="rtl"] .modal-wrapper .modal-container .modal-header { padding-right: 15px; padding-left: 30px; } body[dir="rtl"] .modal-wrapper .modal-container .modal-content .flight-important-note { padding-left: unset; padding-right: 22px; } body[dir="rtl"] .modal-wrapper .modal-container .modal-content .flight-important-note:before { left: unset; right: 0; } .form-wrapper input, .form-wrapper .form-item .select-items select { border-radius: calc(8px / 2); } .form-wrapper .label-row, .multiple-form-wrapper, .flexible-form-wrapper { display: -webkit-box; display: flex; } .form-wrapper .label-row, .multiple-form-wrapper { -webkit-box-pack: justify; justify-content: space-between; } .mb { margin-bottom: 15px; } /* Form Styles */ .form-wrapper { position: relative; } .form-wrapper:not(:last-child) { margin-bottom: 20px; } .form-wrapper .label-row { margin-bottom: 5px; } .form-wrapper .label-row .label { font-weight: 600; font-size: 13px; } .form-wrapper .checkbox-wrapper a { font-weight: bold; text-decoration: underline; pointer-events: auto; color: inherit; } .form-wrapper .checkbox-wrapper label input[type=checkbox] { display: none; } .form-wrapper .checkbox-wrapper label input[type=checkbox] + span.check-status { position: relative; padding-left: 22px; line-height: 1.3; pointer-events: none; font-weight: normal; display: inline-block; } .form-wrapper .checkbox-wrapper label input[type=checkbox] + span.check-status::before { content: "\e9c5"; position: absolute; left: 0; top: 0; font-family: "iconfont"; font-size: 18px; border-radius: 4px; text-decoration: none; font-weight: normal; line-height: 1; } .form-wrapper .checkbox-wrapper label input[type=checkbox]:checked + span.check-status::before { content: "\e9c6"; font-weight: normal; color: #01007F; } .form-wrapper label { display: block; font-size: 14px; } .form-wrapper input { background-color: #F8F9FB; border: 0; padding: 0 15px; font-size: 16px; } .form-wrapper .validation-text { display: none; position: relative; color: #B00121; font-size: 12px; line-height: 1.2; padding-left: 10px; margin: 3px 0; } .form-wrapper .validation-text:before { content: ""; display: block; position: absolute; left: 0; top: 6px; width: 4px; height: 4px; border-radius: 5px; background-color: #B00121; } .form-wrapper.invalid-form-element .validation-text { display: block; } .form-wrapper.invalid-form-element .label { color: #B00121; } .form-wrapper.outlined.invalid-form-element input, .form-wrapper.outlined.invalid-form-element select { border-color: #B00121; } .form-wrapper.invalid-form-element input:focus, .form-wrapper.invalid-form-element select:focus { -webkit-box-shadow: 0 0 0 3px rgba(220, 53, 69,.25) !important; box-shadow: 0 0 0 3px rgba(220, 53, 69,.25) !important; } .form-wrapper textarea { width: 100%; background-color: #F8F9FB; border: 0; border-radius: calc(8px / 2); outline: 0; font-size: 14px; padding: 10px; resize: none; } .form-wrapper input:-webkit-autofill, .form-wrapper input:-webkit-autofill:hover, .form-wrapper input:-webkit-autofill:focus, .form-wrapper textarea:-webkit-autofill, .form-wrapper textarea:-webkit-autofill:hover, .form-wrapper :-webkit-autofill:focus, .form-wrapper select:-webkit-autofill, .form-wrapper select:-webkit-autofill:hover, .form-wrapper select:-webkit-autofill:focus { background-color: #F8F9FB; -webkit-text-fill-color: inherit; -webkit-box-shadow: 0 0 0px 1000px #F1F3F4 inset; transition: background-color 5000s ease-in-out 0s; } /* Form Validation Styles Start */ .form-wrapper input.invalid { border: 1px solid #B00121 !important; background-color: white !important; } .form-wrapper input.invalid:focus { box-shadow: 0 0 0 3px rgba(220, 53, 69,.25) !important; } .form-wrapper select.invalid { border: 1px solid rgba(220, 53, 69, .5) !important; background-color: white !important; color: #484848; } .form-wrapper select.invalid:focus { box-shadow: 0 0 0 3px rgba(220, 53, 69,.25) !important; } .form-wrapper textarea.invalid { border: 1px solid rgba(220, 53, 69, .5) !important; background-color: white !important; color: #484848; } .form-wrapper textarea.invalid:focus { box-shadow: 0 0 0 3px rgba(220, 53, 69,.25) !important; } .passenger-input-list-wrapper .passengers.validation { padding: 15px; background-color: #FEF4F6 !important; border-radius: 4px; margin-bottom: 15px; } .passenger-input-list-wrapper .ferry-vehicle-content { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; } .passenger-input-list-wrapper .ferry-vehicle-content .form-item { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; } .passenger-input-list-wrapper .ferry-vehicle-content .form-item .form-item__label { font-weight: 700; } .passenger-input-list-wrapper .ferry-vehicle-content .form-item .form-item__input { width: 100%; } .passenger-input-list-wrapper .ferry-vehicle-content .form-item .form-item__input input { width: 100%; padding: 16px 8px; background: #F8F9FB; border: none; border-radius: 4px; outline: none; } .passenger-input-list-wrapper .ferry-vehicle-content .form-item .isLpg-select, .passenger-input-list-wrapper .ferry-vehicle-content .form-item .isRented-select { display: flex; justify-content: flex-start; align-items: center; gap: 12px; } .passenger-input-list-wrapper .ferry-vehicle-content .form-item input[type="checkbox"] { accent-color: #2321FF; } .passenger-input-list-wrapper .passengers.validation > div { position: relative; margin-bottom: 4px; padding-left: 12px; } .passenger-input-list-wrapper .passengers.validation > div::before { content: "\2022"; position: absolute; left: 0; } /* Form Validation Styles End */ .form-wrapper input:focus, .form-wrapper select:focus, .form-wrapper textarea:focus { border: 0; outline: none; box-shadow: 0 0 0 3px rgba(201, 203, 204, .4); } .form-wrapper input:not([type=checkbox]) { width: 100%; height: 44px; } .form-wrapper ::-webkit-input-placeholder { color: #AAAAAA; font-size: 14px; font-weight: normal; text-align: left; } .form-wrapper ::-moz-placeholder { color: #AAAAAA; font-size: 14px; font-weight: normal; text-align: left; } .form-wrapper :-ms-input-placeholder { color: #AAAAAA; font-size: 14px; font-weight: normal; text-align: left; } .form-wrapper :-moz-placeholder { color: #AAAAAA; font-size: 14px; font-weight: normal; text-align: left; } .form-wrapper .form-item .select-items { display: -webkit-box; display: flex; } .form-wrapper .form-item .select-items select { height: 44px; width: 86px; background-color: #F8F9FB; border: 0; padding: 0 15px; margin-right: 10px; text-align: center; } .form-wrapper .form-item .select-items select option { text-align: center; } .form-wrapper.multiple-form-items { display: -webkit-box; display: flex; } .form-wrapper select { width: 100%; height: 44px; border: none; padding-left: 10px; padding-right: 15px; border-radius: 4px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(https://res.cloudinary.com/turna/image/upload/q_auto,f_auto/Images/Icons/select-box-arrow.png) no-repeat #F8F9FB; background-position: calc(100% - 8px) center; background-size: 6px; font-size: 14px; word-wrap: break-word; } /* For IE10 */ .form-wrapper select::-ms-expand { display: none; } .multiple-form-wrapper .left.gender { width: 30%; -webkit-box-flex: 0; flex: 0 0 30%; } .multiple-form-wrapper .left.expiration-date { width: 50%; -webkit-box-flex: 0; flex: 0 0 50%; margin-right: 10px; } .multiple-form-wrapper .right.birth-date { width: calc(70% - 15px); -webkit-box-flex: 0; flex: 0 0 calc(70% - 15px); } .multiple-form-wrapper .form-wrapper { margin-bottom: 0; } .flexible-form-wrapper select:not(:last-of-type) { margin-right: 5px; } .multiple-form-wrapper .nationality-form-item { flex: 1; margin-right: 15px; } .multiple-form-wrapper .gender-form-item { flex: 1; } /* Datepicker */ .flexible-form-wrapper.datepicker { } .flexible-form-wrapper.datepicker .select-box { position: relative; flex: 1; } .flexible-form-wrapper.datepicker .select-box:not(:last-of-type):after { content: ""; display: block; position: absolute; width: 1px; height: 60%; right: 0; top: 50%; transform: translateY(-50%); background-color: rgb(210,210,210); } .flexible-form-wrapper.datepicker select { } .flexible-form-wrapper.datepicker .select-box:nth-of-type(1) select { border-top-right-radius: 0; border-bottom-right-radius: 0; } .flexible-form-wrapper.datepicker .select-box:nth-of-type(2) select { border-radius: 0; } .flexible-form-wrapper.datepicker .select-box:nth-of-type(3) select { border-top-left-radius: 0; border-bottom-left-radius: 0; } .flexible-form-wrapper.datepicker select:focus { position: relative; z-index: 200; border-radius: 4px !important; } .phone-number-input { position: relative; } .phone-number-input input { position: relative; padding: 0 15px 0 60px; } .phone-number-input::before { content: attr(data-content); position: absolute; display: block; width: 60px; left: 0; top: 50%; transform: translateY(-50%); text-align: center; z-index: 20; color: rgb(150,150,150); } .form-wrapper.outlined input, .form-wrapper.outlined select { background-color: transparent; border: 1px solid #DDDDDD; } @media screen and (max-width: 359px) { .form-wrapper .label-row .label { font-size: 12px; } .form-wrapper ::-webkit-input-placeholder { font-size: 12px; } .form-wrapper ::-moz-placeholder { font-size: 12px; } .form-wrapper :-ms-input-placeholder { font-size: 12px; } .form-wrapper :-moz-placeholder { font-size: 12px; } } body[dir="rtl"] .multiple-form-wrapper .nationality-form-item { margin-right: unset; margin-left: 15px; } body[dir="rtl"] .flexible-form-wrapper.datepicker .select-box:not(:last-of-type):after { display: none; } body[dir="rtl"] .flexible-form-wrapper.datepicker .select-box:not(:first-of-type):after { content: ""; display: block; position: absolute; width: 1px; height: 60%; right: 0; top: 50%; transform: translateY(-50%); background-color: #d2d2d2; } body[dir="rtl"] .form-wrapper select { background-position: 8px center; } body[dir="rtl"] .phone-number-input input { padding: 0 60px 0 15px } body[dir="rtl"] .phone-number-input::before { left: unset; right: 0; } body[dir="rtl"] .form-wrapper .checkbox-wrapper label input[type=checkbox] + span.check-status { padding-left: unset; padding-right: 22px; } body[dir="rtl"] .form-wrapper .checkbox-wrapper label input[type=checkbox] + span.check-status::before { left: unset; right: 0; } body[dir="rtl"] .form-wrapper input:not([type=checkbox]) { text-align: right; } body[dir="rtl"] .form-wrapper input:not([type=checkbox])::-webkit-input-placeholder { text-align: right; } body[dir="rtl"] .form-wrapper input:not([type=checkbox]):-moz-placeholder { text-align: right; } body[dir="rtl"] .multiple-form-wrapper { align-items: flex-end; } body[dir="rtl"] .flexible-form-wrapper select:not(:last-of-type) { margin-right: unset; } body[dir="rtl"] .flexible-form-wrapper select:not(:first-of-type) { margin-right: 5px; } body.tkfb .form-wrapper .checkbox-wrapper label input[type=checkbox]:checked + span.check-status::before { color: #2d2926; } .card-footer .button, .button-group .button { border-radius: 4px; } .button-group, .cta-button { display: -webkit-box; display: flex; } .button-group, .cta-button { -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; } .card-footer .button, .button-group .button { width: 100%; min-height: 44px; text-align: center; background-color: #E2E3E5; padding: 0; margin: 0; border: 0; outline: 0; } .card-footer .button.primary, .button-group .button.primary { background-color: #01007F; color: #FFFFFF; } .card-footer .button.secondary, .button-group .button.secondary { background-color: #01007F; color: #FFFFFF; } .card-footer .button.success, .button-group .button.success { background-color: #23CCA1; color: #FFFFFF; } .card-footer .button.danger, .button-group .button.danger { background-color: #FF1C1C; color: #FFFFFF; } .card-footer .button.small, .button-group .button.small { width: auto; min-width: 50%; } .button-group { position: relative; } .button-group .button { padding: 0 15px; } .button-group .button.fw-bold { font-weight: bold; } .button-group .button:not(:last-child) { margin-right: 15px; } .cta-button { position: relative; border: 1px solid #FFFFFF; border-radius: 40px; height: 40px; color: #FFFFFF; padding: 0 40px; text-align: center; } .cta-button i[class^="b64-"] { width: 14px; height: 14px; position: absolute; right: 15px; } .cta-button .cta-button-text { font-weight: bold; } .button-group.vertical { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .button-group.vertical .button:not(:last-child) { margin-bottom: 10px; margin-right: 0; } /* Outlined Button Styles */ .button-group .button.outlined { background-color: transparent; border: 1.5px solid rgb(150,150,150); color: rgb(150,150,150); } .button-group .button.outlined.primary { border-color: #FF9012; color: #FF9012; } .button-group .button.outlined.secondary { border-color: #006EE9; color: #006EE9; } :root { --text-primary-color: #000000; --white: #fff; --text-secondary-color: #AAAAAA; --border-color: #DDDDDD; --border: 1px solid #DDDDDD; --transition: .3s; --radius: 8px; --main-color: #01007F; --second-color: #2321FF; --main-light-color: #f4f4ff; --bg-gray: #F8F9FB; } .toast-wrapper *{ -webkit-box-sizing: border-box; box-sizing: border-box; } .toast-wrapper{ position: relative; background-color: var(--white); border-radius: 5px; min-height: 80px; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.1); box-shadow: 0 3px 6px rgba(0,0,0,.1); padding: 15px; display: -webkit-box; display: -ms-flexbox; display: flex; border-right: 20px solid var(--second-color); margin-bottom: 30px; } .toast-wrapper .toast-icon{ width: 100px; background-color: var(--second-color); margin-left: -15px; margin-top: -15px; margin-bottom: -15px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; background-size: 50%; background-repeat: no-repeat; background-position: center; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAABYCAMAAABGS8AGAAAAPFBMVEUAAAD////////////////////////////////////////////////////////////////////////////YSWgTAAAAE3RSTlMAQIDQ8MDgEGAwcJBQILCfoI9vVjPcSgAAAsFJREFUWMPNmduyqzAIhgORqPGs7/+ue8+sKLqs8qetM4ubdqbkKyGQAzhAiGZmkbAsXoR5JnKfS1f1xXKSoq/KT6g1++VSPNdvYjkshgR+A1slrIGuMrEUFlA85WDluFTScCTqnKuJmBs5LqfA6Okw2ebFuLY5zGiCsKXfzTN2l3EY93olEGIBdh8pOpih1xa64DmhU7T3mvOmGB0kcTNkvlMbVq0RzthyXMcMAJezMtQkx9UNVWaSru6IF+u2cuvszWoltxe/GjFpxP6FTWUwuBA5nEev/5nHVfI6398/NIZ/YT83v7Izeb9yb0uVEMd9QKz4xeNZXhg83pvkl8XfTWk8mxyAhetTepkL6E/uiXfcBkh31oXaGxyMcEpSXKmcQQxEBC2b1GZk8OF/vAPBdKPm9ybXpj4Opv2kWA2GwKUzTebdd+soUvCtWlQrux/17jvgWmdVqb8NsKasGXHVllGNBRYArInUb6bQt8DtmkWUvsBgNhSLZCglMyxhFCwJzOpiFIw4OaYBjIMJUuTtDyyhXLCoNgiGFCUf7EBwSAltCgqu026h2iAYVMwGCwqGXSEKRlyhi4eCwcXLBjMI1gQBU48xPV4/vw+OmWBy2CYEb5uOsk4E0o0eBmMbvX6xpNNUgo4mPUyhOY6Yi3v7+Fcp5f+A0jnw+NcLCyrghUWvWKggVyzoUoiLWgleY3Ghw908YCaXQxGmEjE4wE8FHSTIIzJCjxs88xSEP8d0Xq2tUuU8IHVd8AekDhrslO7tUhVlnzsswsAj/bGywlOFkKdKN48Vm54qjz1Z0Hu+BKkyflY0HZ0zyQNe5h0ArnpjKWbQ3K2kE58qpT9a/MfbFXN3acCc0a7QfUMlTO0Lh01hr9O83RKamInq1BKajJaQ5T5QPP2NthvaKPxbrc2f4MObsflCFJlFfGofR6h9/A98/IDsEtdSsQAAAABJRU5ErkJggg=='); } .toast-wrapper .toast-content{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 0 70px 0 25px; } .toast-wrapper .toast-content .toast-title{ font-size: 20px; font-weight: bold; color: var(--second-color); } .toast-wrapper .toast-content .toast-description{ font-size: 16px; } .toast-wrapper .toast-close-button{ position: absolute; right: 15px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 40px; height: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .toast-wrapper .toast-close-button:hover{ cursor: pointer; opacity: .6 } .toast-wrapper .toast-close-button:before, .toast-wrapper .toast-close-button:after { content: ""; position: absolute; height: 28px; width: 4px; background-color: var(--second-color); border-radius: 4px; } .toast-wrapper .toast-close-button:before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .toast-wrapper .toast-close-button:after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } /* Toast Success */ .toast-wrapper.success{ border-color: var(--second-color); } .toast-wrapper.success .toast-icon{ background-color: var(--second-color); background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAABYCAMAAABGS8AGAAAAWlBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////9ZMre9AAAAHXRSTlMA8H/QQOAQwDBgcJCfV7BP2CAfiD9vlY+4t8vDoYo1oL4AAALQSURBVFjDzZnhlqMgDIVrFFHs2HGqdba7vv9rbufU9NYySKLDOcMvT4uf4SZACAdB6/uByFozTbm1REPfH/a3rm6zyWtZW5d7qBXlU7DlVG3EkpkizdAGbM3YdXStxBYxLBQpNFi7dJVtyBVFdxO9KIgau3SnFaPHxWCbb947NYsRjSJsmT+N03XBOHTP/UpBiBmxfAXQJhp6pwwO14ROdlrvOTw6Opk/3MOQYa3bkXsdxTO2xDsCLqlmaJTsWIZaOUlZDhfwG3Mr9WLF5FPwXz8mhbEftqk04G4nG/9t/qaOCzKP9/WPJqKvWOfmZXbO6teHza2eEct1wIbiVx/P1jOYI3xzO/omG89xOxyYe/K4XViIUb8YbHZiAQp9aHdkEH+Hpdnf8meTK3bm3obwqlgJz+CdJtPTs/sZsIOV3d36Th2152v7tvwJupbsSX2sfbx/veaTzSPCWl6UtFwsDP4y2d6eEBN67mQCG1zGAZJt48JitOxu6Ay2Or+9r+Q/dgaTXuKyZS77zhfZzWD6MS4D+QM7uT6YJVFyw6NkpzF4L9cHG9WELv9GuDyp83l+SA2Oc3nGhcF0vXpZ8h9wY+CgFJevn98/lFxIEXSemZjsc//5OHFUlDMDZHCPBwE4OEFykF+4Z0lyQcEp/ZYtyRdwZWDH4HXyWcplCR6SrJIVXHYaFvo1slgHLPR4CJPRLjEqtiZspgLyZxSLzRTbf4Cs42L7R8ISIuu4SFiQYkXIn8oUC0lhkCzmwspYGgtyq0tjZYl3dbk4XeKd6qjgUh1ukh3HUh0gkx15Ux3Sk5UVUhVCUpVukhWbUpXHUhX00pYg0xdN05d5ocaUDUJzH3uiS1VKT1X8V15XDF3QgEFzXYF1A7aMp28EG81zn2bzldBI1PfVzcy+Jxq3XAlBPvkl1u+4dpNeFP6uq8178CW4jIUnC0dkbT5fH7tC4q//3SHCiee5z1cAAAAASUVORK5CYII='); } .toast-wrapper.success .toast-content .toast-title{ color: var(--second-color); } .toast-wrapper.success .toast-close-button:before, .toast-wrapper.success .toast-close-button:after { background-color: var(--second-color); } /* Toast Error */ .toast-wrapper.error{ border-color: #EF6832; } .toast-wrapper.error .toast-icon{ background-color: #EF6832; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAABYCAMAAABGS8AGAAAASFBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////neHiwAAAAF3RSTlMA8LJA0PWAwBAwcGCQ3+BqoFB/ID/rpXzAIocAAALvSURBVFjDtZnbuqMgDIVRKQgIrWjr+7/pzJ6tLh3EoJRc9WvlN80JSFiCjKP2Xko7TVxK7/U4snwZTF1NgVS1aXOoyvMpKtyrm1hvJ0Ksv4E1wJ6hzUVsAywhvLmClXtXyU7ophkYU00jRCf37pTJ6G67zHUH6/rObZ/pkrAtxwquh2gc6u1zLc1VNtl8DdCWDL1+tZ9LcLhxqx/68yf1+qBmSaJXRU4XvJanXskZ22JNAlewCyJAJuxQmYtJWp1bo1+46nKxWsj98a9ETBKxH9OpteDeJ9tw9fLOa1yQl/8b1gfavrSdw7rRzNY37LaYGbGvA5KK3/R4lgcKv1iWvEKVbeC4DAfywDxInDxjmP8Udixb3G8wx16UHRkCCsM0ecK3Kis4M08QXgqWgMLfUFlsPuvvgDW0HH61H2I1oJahV5/yc/Q87NqunnQnteVds73UP19GyG6NsDp+mFl+fezJ9SOyAmXyZ8F5TMgJ5B13+pxtcNUSIFX0APMAecetYqpUs6JNWOuC/w0yuM/YAjmDBUxMkWkujKxnsGBpZJq7ANcXJJHBJcGrSVLI7wTu6jSAafIELg22SGiKTHOR1HzOD4ILMsVdMw5gQt4zmLNEsIMpSI0Rz7Qp4DyaC3KBqACZAtMJgnzjyEE6QeiURr4hBxPAGmCSy2gyihDKJs2lySibKPQ0N4GMQo8Px/KswN2/qSe2JmIzleCm7XnYTA2OWwfyAXdDjvgbB0FDHliGN7gg//3y3RIHFuqINXSfJjTkp2uJI1aZQ6Eue4xl7tsHb1fqqqCDO0mW4JZU/jrGXIELZIErb6lLerG2QtlGSPnWDWvdN5pNri3VHivV0CvVgiSbpv4K16NpWr7Nm9+Y9mhMp7bSrbkyhal60sPuTvPfqa+NKxQxriAHLLbrjwYslhiwpI6EvB9HxZgaR++JkRBlvgJDLMxOaHHmzo7gSKy4W7zF2WhTqKydt8AwFp5stBBS8n/jYyF0k+KvP68RnBNqNlepAAAAAElFTkSuQmCC'); } .toast-wrapper.error .toast-content .toast-title{ color: #EF6832; } .toast-wrapper.error .toast-close-button:before, .toast-wrapper.error .toast-close-button:after { background-color: #EF6832; } /* Toast Warning */ .toast-wrapper.warning{ border-color: var(--second-color); } .toast-wrapper.warning .toast-icon{ background-color: var(--second-color); background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAABYCAMAAABGS8AGAAAAPFBMVEUAAAD////////////////////////////////////////////////////////////////////////////YSWgTAAAAE3RSTlMAQIDQ8MDgEGAwcJBQILCfoI9vVjPcSgAAAsFJREFUWMPNmduyqzAIhgORqPGs7/+ue8+sKLqs8qetM4ubdqbkKyGQAzhAiGZmkbAsXoR5JnKfS1f1xXKSoq/KT6g1++VSPNdvYjkshgR+A1slrIGuMrEUFlA85WDluFTScCTqnKuJmBs5LqfA6Okw2ebFuLY5zGiCsKXfzTN2l3EY93olEGIBdh8pOpih1xa64DmhU7T3mvOmGB0kcTNkvlMbVq0RzthyXMcMAJezMtQkx9UNVWaSru6IF+u2cuvszWoltxe/GjFpxP6FTWUwuBA5nEev/5nHVfI6398/NIZ/YT83v7Izeb9yb0uVEMd9QKz4xeNZXhg83pvkl8XfTWk8mxyAhetTepkL6E/uiXfcBkh31oXaGxyMcEpSXKmcQQxEBC2b1GZk8OF/vAPBdKPm9ybXpj4Opv2kWA2GwKUzTebdd+soUvCtWlQrux/17jvgWmdVqb8NsKasGXHVllGNBRYArInUb6bQt8DtmkWUvsBgNhSLZCglMyxhFCwJzOpiFIw4OaYBjIMJUuTtDyyhXLCoNgiGFCUf7EBwSAltCgqu026h2iAYVMwGCwqGXSEKRlyhi4eCwcXLBjMI1gQBU48xPV4/vw+OmWBy2CYEb5uOsk4E0o0eBmMbvX6xpNNUgo4mPUyhOY6Yi3v7+Fcp5f+A0jnw+NcLCyrghUWvWKggVyzoUoiLWgleY3Ghw908YCaXQxGmEjE4wE8FHSTIIzJCjxs88xSEP8d0Xq2tUuU8IHVd8AekDhrslO7tUhVlnzsswsAj/bGywlOFkKdKN48Vm54qjz1Z0Hu+BKkyflY0HZ0zyQNe5h0ArnpjKWbQ3K2kE58qpT9a/MfbFXN3acCc0a7QfUMlTO0Lh01hr9O83RKamInq1BKajJaQ5T5QPP2NthvaKPxbrc2f4MObsflCFJlFfGofR6h9/A98/IDsEtdSsQAAAABJRU5ErkJggg=='); } .toast-wrapper.warning .toast-content .toast-title{ color: var(--second-color); } .toast-wrapper.warning .toast-close-button:before, .toast-wrapper.warning .toast-close-button:after { background-color: var(--second-color); }